/* House of Rooks
 * Author: Jerome Griffin
 * Copyright (c) 2026 Jerome Griffin / Griffin House
 */
:root {
  --green: #00c853;
  --red: #ff1744;
  --yellow: #d4a017;
  --black: #111111;
  --bg: #1a120b;
  --card-bg: #2a1f14;
  --accent: #3d2914;
  --text: #f5e6c8;
  --primary: #c9a227;
  --success: #4caf50;
  --felt: #0d5c2e;
  --felt-dark: #084422;
  --wood: #5c3a1e;
  --wood-light: #8b5a2b;
  --cream: #f7f1e3;
  --room-felt: #16325f;
  --room-felt-hi: #2a4a86;
  --room-rail: #d7e3f0;
  --room-bg-top: #1a2744;
}

/* Pre-bidding intro tip */
.bidding-intro {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 16000;
  width: min(92vw, 340px);
  pointer-events: none;
  animation: biddingIntroIn 0.35s ease-out both;
}
@media (orientation: landscape) {
  .bidding-intro {
    left: auto;
    right: calc(50px + max(18px, env(safe-area-inset-right)));
    top: 22%;
    bottom: 30%;
    width: min(28vw, 15.5rem);
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100050;
    animation: biddingIntroInRight 0.35s ease-out both;
  }
  .bidding-intro-card {
    width: 100%;
    background: #1a140c !important;
    border: 1.5px solid rgba(232, 196, 92, 0.8) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
  }
}
@keyframes biddingIntroInRight {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bidding-intro.hidden {
  display: none !important;
}
.bidding-intro-card {
  background: linear-gradient(165deg, rgba(40, 28, 14, 0.97) 0%, rgba(20, 14, 8, 0.98) 100%);
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  border-radius: 14px;
  padding: 0.85rem 1rem 1rem;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(201, 162, 39, 0.15);
  text-align: center;
}
.bidding-intro-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a227;
  margin-bottom: 0.4rem;
}
.bidding-intro-body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #f5e6c8;
  opacity: 0.95;
}
.bidding-intro-body strong {
  color: #ffe9a8;
}
@keyframes biddingIntroIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bidding-intro {
    animation: none;
  }
}

/* ===== Special capture celebration (Rook eats Red 2 / trump 1) ===== */
.capture-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(80, 0, 20, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 75%
  );
  animation: captureOverlayIn 0.35s ease-out both;
}
.capture-overlay.hidden {
  display: none !important;
}
.capture-overlay.capture-rook {
  background: radial-gradient(
    ellipse at center,
    rgba(90, 20, 120, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 75%
  );
}
.capture-overlay.capture-one {
  background: radial-gradient(
    ellipse at center,
    rgba(180, 40, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 75%
  );
}
@keyframes captureOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.capture-burst {
  position: absolute;
  width: min(90vw, 320px);
  height: min(90vw, 320px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, transparent 55%),
    radial-gradient(circle, rgba(255, 80, 80, 0.25) 20%, transparent 70%);
  animation: captureBurst 1.1s ease-out both;
  pointer-events: none;
}
@keyframes captureBurst {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.capture-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.1rem 1.4rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(165deg, #2a1020 0%, #1a0a12 50%, #0d0610 100%);
  border: 2px solid #ffd54f;
  box-shadow:
    0 0 0 1px rgba(255, 80, 80, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(255, 200, 0, 0.35);
  max-width: min(92vw, 320px);
  animation: captureCardPop 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes captureCardPop {
  0% {
    transform: scale(0.4) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.capture-emoji {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 0.35rem;
  animation: captureEmojiBounce 0.7s ease-out both;
  filter: drop-shadow(0 4px 12px rgba(255, 200, 0, 0.5));
}
@keyframes captureEmojiBounce {
  0% {
    transform: translateY(-30px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateY(6px) scale(1.15);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.capture-title {
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe082;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(255, 180, 0, 0.45);
  line-height: 1.2;
}
.capture-sub {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: #ffab91;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.capture-sparks {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  overflow: visible;
}
.capture-sparks span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd54f;
  box-shadow: 0 0 8px #ff9800;
  animation: captureSpark 0.9s ease-out both;
}
.capture-sparks span:nth-child(1) {
  left: 10%;
  top: 20%;
  animation-delay: 0.05s;
  --dx: -28px;
  --dy: -36px;
}
.capture-sparks span:nth-child(2) {
  right: 12%;
  top: 15%;
  animation-delay: 0.12s;
  background: #ff5252;
  --dx: 32px;
  --dy: -28px;
}
.capture-sparks span:nth-child(3) {
  left: 20%;
  bottom: 18%;
  animation-delay: 0.18s;
  background: #ce93d8;
  --dx: -36px;
  --dy: 24px;
}
.capture-sparks span:nth-child(4) {
  right: 18%;
  bottom: 22%;
  animation-delay: 0.08s;
  --dx: 30px;
  --dy: 28px;
}
.capture-sparks span:nth-child(5) {
  left: 45%;
  top: 5%;
  animation-delay: 0.22s;
  background: #fff;
  --dx: 0;
  --dy: -40px;
}
.capture-sparks span:nth-child(6) {
  left: 50%;
  bottom: 8%;
  animation-delay: 0.15s;
  background: #ff8a65;
  --dx: 8px;
  --dy: 36px;
}
@keyframes captureSpark {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1.2) translate(var(--dx, 20px), var(--dy, -30px));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .capture-overlay,
  .capture-card,
  .capture-emoji,
  .capture-burst,
  .capture-sparks span {
    animation-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  height: 100dvh;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background:
    radial-gradient(ellipse at 50% 0%, #3d2914 0%, transparent 55%),
    linear-gradient(180deg, #2a1a0e 0%, #1a120b 40%, #0f0a06 100%);
  color: var(--text);
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;
}

/* Subtle wallpaper pattern */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(139, 90, 43, 0.04) 48px,
      rgba(139, 90, 43, 0.04) 50px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(139, 90, 43, 0.04) 48px,
      rgba(139, 90, 43, 0.04) 50px
    );
  pointer-events: none;
  z-index: 0;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100dvh;
  height: 100%;
  height: 100dvh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.screen {
  padding: 1rem;
  min-height: 100%;
  min-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.header h1 {
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
}

.subtitle {
  opacity: 0.7;
  font-size: 0.9rem;
}

.card {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(201, 162, 39, 0.25);
}

input[type='text'],
input[type='number'],
input[type='search'],
textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 16px; /* iOS: avoid auto-zoom which can dismiss keyboard */
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: #0f0f1a;
  color: white;
  margin-bottom: 1rem;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

input:focus {
  border-color: var(--primary);
}

.btn-row {
  display: flex;
  gap: 0.75rem;
}

.btn {
  flex: 1;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  transition:
    transform 0.1s,
    opacity 0.2s;
}

.btn:active {
  transform: scale(0.97);
}
.btn.primary {
  background: linear-gradient(180deg, #f3d58a 0%, #c9a227 55%, #b08a1c 100%);
  color: #1a1408;
  border: 1px solid #e8c96a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 rgba(255, 236, 180, 0.35) inset;
}
.btn.danger {
  background: #8b1a1a;
}
.btn.link {
  background: transparent;
  color: #e8c547;
  text-decoration: underline;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
  min-height: 1.5rem;
}

.players-list {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(201, 162, 39, 0.2);
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #333;
}

.player-item:last-child {
  border-bottom: none;
}

.player-item .host-badge {
  font-size: 0.75rem;
  background: var(--primary);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
}

.hint {
  font-size: 0.8rem;
  opacity: 0.6;
  text-align: center;
  margin-top: 1rem;
}

.host-options {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid rgba(201, 162, 39, 0.2);
}

.option-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.option-label input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.option-hint {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-top: 0.4rem;
}

/* Game layout */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scores span {
  margin-right: 0.75rem;
}

.phase {
  font-weight: 700;
  color: var(--primary);
}

.trump {
  font-weight: 600;
}

/* ===== Game room & felt table ===== */
.game-room {
  background: transparent;
  padding: 0.1rem 0.4rem 0;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
}

.game-room .top-bar {
  background: linear-gradient(180deg, rgba(60, 40, 20, 0.95), rgba(40, 25, 12, 0.9));
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 4px;
  padding: 0.02rem 0.2rem;
  margin-bottom: 0.04rem;
  margin-top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  font-size: 0.52rem;
  line-height: 1.05;
  min-height: 0;
  align-items: center;
}

.table-wrap {
  flex: 1 1 0;
  min-height: 0;
  /* Fill space above the hand; leave room for hand + action panel */
  max-height: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.15rem 0.2rem 0.2rem;
  overflow: hidden;
  flex-shrink: 1;
  background: transparent;
  border: none;
  box-shadow: none;
}

.table-felt {
  /* Slightly smaller so the complete table breathes on phone screens. */
  width: min(97%, 330px);
  max-width: min(330px, 86vw);
  height: 97%;
  max-height: 97%;
  aspect-ratio: 3 / 4; /* taller oval, not a pinched racetrack */
  min-height: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 40%,
    #128a42 0%,
    var(--felt) 45%,
    var(--felt-dark) 100%
  );
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.35),
    inset 0 0 8px rgba(255, 255, 255, 0.08),
    0 0 0 8px var(--wood),
    0 0 0 11px var(--wood-light),
    0 0 0 13px #3d2410,
    0 8px 20px rgba(0, 0, 0, 0.5);
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.5rem 0.55rem;
  flex: 0 1 auto;
  margin: 0 auto;
  overflow: hidden;
  align-self: center;
}

/* Felt texture noise */
.table-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  opacity: 0.45;
  pointer-events: none;
}

.table {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: minmax(2.2rem, 18%) minmax(0, 1fr) minmax(2.8rem, 20%);
  gap: 0.2rem;
  align-items: center;
  justify-items: center;
  place-content: center;
  padding: 0.15rem;
  box-sizing: border-box;
}

.player-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Team identification is a separate badge so player names stay clean and readable. */

.team-marker {
  position: absolute;
  top: -0.82rem;
  right: -0.65rem;
  min-width: 1.28rem;
  height: 1.28rem;
  padding: 0 0.18rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  z-index: 12;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.team-marker[data-team='0'] {
  background: #6b1830;
  color: #ffe4ec;
}
.team-marker[data-team='1'] {
  background: #173a78;
  color: #e5efff;
}
.player-name-text {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  overflow-wrap: anywhere;
}
.player-slot.bottom .team-marker {
  top: -1.02rem;
  right: -0.82rem;
}
@media (max-width: 520px) and (orientation: portrait) {
  .team-marker {
    top: -0.7rem;
    right: -0.5rem;
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: 0.56rem;
  }
  .player-slot.bottom .team-marker {
    top: -0.86rem;
    right: -0.62rem;
  }
}

.player-slot.top {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}
.player-slot.left {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}
.player-slot.right {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}
/* Bottom seat only (turn message lives above the hand now) */
.bottom-seat-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: center;
  padding: 0.1rem 0.2rem;
  box-sizing: border-box;
  z-index: 4;
  align-self: center;
  overflow: visible;
}
.player-slot.bottom {
  grid-column: auto;
  grid-row: auto;
  flex: 0 1 auto;
  max-width: min(96%, 13rem);
  min-width: 0;
  padding: 0.1rem 0.15rem 0;
  margin: 0;
  z-index: 4;
  overflow: visible;
}
.player-slot.bottom .name {
  font-size: 0.72rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.2;
  margin-bottom: 0.08rem;
  padding: 0.05rem 0.28rem;
  box-sizing: border-box;
}
.player-slot.bottom .bid-badge,
#slot-me .bid-badge {
  font-size: 0.55rem;
  padding: 0.05rem 0.28rem;
  margin-top: 0.05rem;
  margin-bottom: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-slot .name {
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: #ffe9a8;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
}

.player-slot .cards-count {
  font-size: 0.72rem;
  opacity: 0.8;
  color: #c8e6c9;
}

.center-area {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.trick {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.2rem;
  justify-content: center;
  align-items: center;
  min-height: 108px;
  height: auto;
  max-height: none;
  padding: 0.15rem;
  box-sizing: border-box;
  overflow: visible;
}

.trick-empty {
  font-size: 0.8rem;
  opacity: 0.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8e6c9;
}

.trick-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: transform 0.2s ease;
}

/* ===== Modern Rook card faces (color + number, no suits) ===== */
.card-face {
  width: 58px;
  height: 84px;
  border-radius: 8px;
  background-color: #f7f0e4;
  background-image: linear-gradient(165deg, #fffcf5 0%, #f7f0e4 55%, #ebe2d2 100%);
  color: #1a1a1a;
  display: block;
  position: relative;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 800;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.18),
    0 5px 12px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  border: 2px solid #c8b99a;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 1;
  isolation: isolate;
}

/* Soft inner frame */
.card-face::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(40, 28, 12, 0.28);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}
.hand > .card-face::before,
.card-face.small::before,
#myHand .card-face::before,
.lt-hand-wrap .card-face::before {
  inset: 2px;
  border-radius: 3px;
}

/* Color bars top/bottom — modern Rook stripe */
.card-face .c-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2;
  pointer-events: none;
}
.card-face .c-bar.top {
  top: 0;
}
.card-face .c-bar.bot {
  bottom: 0;
}

/* Centered stack: large rank + single upright color word below */
.card-face .c-stack {
  position: absolute;
  inset: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 1;
  text-align: center;
}
.card-face .c-corner {
  display: none !important;
}
.card-face .c-rank {
  display: none !important;
}
.card-face .c-suit {
  display: none !important;
}

.card-face .c-num {
  font-size: 2.35rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  display: block;
}
.card-face .c-color {
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  opacity: 0.85;
  display: block;
  transform: none !important;
}
.card-face .c-center {
  display: block;
  line-height: 1;
}
.card-face .rook-bird {
  font-size: 1.75rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Color identity */
.card-face.green {
  border-color: #00c853;
  color: #00b34a;
}
.card-face.green .c-num,
.card-face.green .c-color,
.card-face.green .c-center {
  color: #00b34a;
}
.card-face.green .c-bar {
  background: linear-gradient(90deg, #009624, #69f0ae, #00e676, #009624);
}
.card-face.red {
  border-color: #ff1744;
  color: #ff1744;
}
.card-face.red .c-num,
.card-face.red .c-color,
.card-face.red .c-center {
  color: #ff1744;
}
.card-face.red .c-bar {
  background: linear-gradient(90deg, #d50000, #ff5252, #ff1744, #d50000);
}
.card-face.yellow {
  border-color: #c9a227;
  color: #b8860b;
}
.card-face.yellow .c-num,
.card-face.yellow .c-color,
.card-face.yellow .c-center {
  color: #b8860b;
}
.card-face.yellow .c-bar {
  background: linear-gradient(90deg, #8a6d0f, #e0bc3a, #c9a227, #8a6d0f);
}
.card-face.black {
  border-color: #111;
  color: #111;
}
.card-face.black .c-num,
.card-face.black .c-color,
.card-face.black .c-center {
  color: #111;
}
.card-face.black .c-bar {
  background: linear-gradient(90deg, #000, #424242, #111, #000);
}

/* Rook specialty card — full-bleed photo, no text label */
.card-face.rook {
  background: #0a0a0c;
  color: transparent;
  border-color: #ce93d8;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.25),
    0 5px 14px rgba(91, 45, 142, 0.55);
  overflow: hidden;
  padding: 0;
}
.card-face.rook .c-bar {
  display: none !important;
}
.card-face.rook .c-stack.rook-stack {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.card-face.rook .rook-bird-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: none;
}
.card-face.rook .c-color,
.card-face.rook .rook-label,
.card-face.rook .c-center {
  display: none !important;
}
.card-face.rook::before {
  inset: 0;
  border: 1px solid rgba(206, 147, 216, 0.35);
  border-radius: 6px;
  z-index: 2;
}

/* Red 2 — full-bleed art face */
.card-face.red2 {
  background: #d31114;
  color: transparent;
  border-color: #e53935;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.22),
    0 5px 14px rgba(196, 30, 58, 0.5);
  overflow: hidden;
  padding: 0;
}
.card-face.red2 .c-bar {
  display: none !important;
}
.card-face.red2 .c-stack.red2-stack {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.card-face.red2 .red2-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  border-radius: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}
.card-face.red2 .c-num,
.card-face.red2 .c-color,
.card-face.red2 .c-center {
  display: none !important;
}
.card-face.red2::before {
  inset: 0;
  border: 1px solid rgba(229, 57, 53, 0.45);
  border-radius: 6px;
  z-index: 2;
}
.card-face.small.red2 .c-num {
  display: none !important;
}

/* Red 1 — special trump (when used) */
.card-face.red1 {
  background: linear-gradient(160deg, #3a0000 0%, #b71c1c 45%, #e65100 100%);
  color: #fffde7;
  border-color: #ffab00;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.22),
    0 5px 14px rgba(183, 28, 28, 0.5),
    inset 0 0 12px rgba(255, 171, 0, 0.22);
}
.card-face.red1 .c-bar {
  background: linear-gradient(90deg, #ff6f00, #ffd54f, #ff6f00);
}
.card-face.red1 .c-num {
  font-size: 2.2rem;
  color: #fffde7;
}

.card-face.small {
  width: 44px;
  height: 64px;
  border-radius: 5px;
  border-width: 2px;
}
.card-face.small .c-num {
  font-size: 1.55rem;
  font-weight: 900;
}
.card-face.small .c-color {
  font-size: 0.38rem;
}
.card-face.small .c-bar {
  height: 3px;
}
.card-face.small.rook .c-center,
.card-face.small .rook-bird {
  font-size: 1.2rem;
}
.card-face.small.red2 .c-num,
.card-face.small.red1 .c-num {
  font-size: 1.25rem;
}

/* Legal / playable cards — strong beginner-friendly highlight */
.card-face.playable {
  cursor: pointer;
  position: relative;
  z-index: 2;
  transform: translateY(-6px);
  outline: 2px solid #ffd54f;
  box-shadow:
    0 0 0 3px rgba(255, 213, 79, 0.45),
    0 0 14px rgba(255, 213, 79, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  animation: playablePulse 1.6s ease-in-out infinite;
}
.card-face.playable::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -4px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #ffd54f;
  color: #1a120b;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 3;
}
@keyframes playablePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(255, 213, 79, 0.4),
      0 0 12px rgba(255, 213, 79, 0.45),
      0 6px 14px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 236, 150, 0.7),
      0 0 20px rgba(255, 213, 79, 0.75),
      0 8px 16px rgba(0, 0, 0, 0.45);
  }
}
.card-face.playable:hover {
  transform: translateY(-12px) scale(1.05);
  outline-color: #ffe082;
  box-shadow:
    0 0 0 4px rgba(255, 224, 130, 0.65),
    0 0 22px rgba(255, 213, 79, 0.7),
    0 12px 22px rgba(0, 0, 0, 0.5);
  animation: none;
}
.card-face.playable:active,
.card-face.selected {
  transform: translateY(-16px) scale(1.06);
  outline: 3px solid #fff59d;
  box-shadow:
    0 0 0 4px rgba(255, 245, 157, 0.7),
    0 12px 24px rgba(0, 0, 0, 0.55);
  animation: none;
}

/* Illegal cards — clearly dimmed, but still long-pressable */
.card-face.disabled {
  opacity: 0.32;
  pointer-events: auto;
  filter: grayscale(0.55) brightness(0.85);
  transform: translateY(2px) scale(0.96);
  box-shadow: none;
  outline: none;
  touch-action: manipulation;
}

/* Respect reduce-motion */
body.reduce-motion .card-face.playable {
  animation: none;
}

/* Hand rail — wooden ledge under cards */
.hand-area {
  background: linear-gradient(180deg, #4a3020 0%, #3a2418 30%, #2a1a10 100%);
  border-radius: 18px 18px 0 0;
  border-top: 3px solid var(--wood-light);
  padding: 0.45rem 0.2rem 0.7rem;
  min-height: 0;
  flex-shrink: 0;
  overflow-x: auto; /* allow scroll if many cards (e.g. 9–16 after nest) */
  overflow-y: hidden;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  position: relative;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.hand-rail {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.5), transparent);
  border-radius: 2px;
}

.hand {
  display: flex;
  gap: var(--hand-gap, 2px);
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  padding: 0.25rem 0.1rem 0.35rem;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* Hand cards scale to fit; size set by JS via --hand-card-w */
.hand > .card-face {
  width: var(--hand-card-w, 48px);
  height: var(--hand-card-h, 70px);
  flex: 0 0 var(--hand-card-w, 48px);
  margin: 0;
}
.hand > .card-face .c-num {
  font-size: calc(var(--hand-card-w, 48px) * 0.55);
  font-weight: 900;
  line-height: 0.95;
}
.hand > .card-face .c-color {
  font-size: max(6px, calc(var(--hand-card-w, 48px) * 0.12));
  font-weight: 700;
  opacity: 0.85;
}
.hand > .card-face .c-center,
.hand > .card-face .rook-bird {
  font-size: calc(var(--hand-card-w, 48px) * 0.48);
}
.hand > .card-face.rook .c-center,
.hand > .card-face .rook-bird {
  font-size: calc(var(--hand-card-w, 48px) * 0.44);
}
.hand > .card-face.red2 .c-num,
.hand > .card-face.red1 .c-num {
  font-size: calc(var(--hand-card-w, 48px) * 0.55);
}
.hand > .card-face .c-bar {
  height: max(3px, calc(var(--hand-card-h, 70px) * 0.05));
}

.action-panel {
  background: linear-gradient(165deg, rgba(72, 48, 24, 0.98) 0%, rgba(32, 20, 10, 0.98) 100%);
  padding: 0.35rem 0.55rem 0.28rem;
  border-radius: 14px;
  margin: 0.3rem 0.35rem;
  text-align: center;
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 220, 140, 0.18);
  backdrop-filter: blur(6px);
}

.action-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe9a8;
  opacity: 0.95;
}

.bid-buttons,
.trump-buttons,
.confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.bid-buttons .btn,
.trump-buttons .btn {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
}

.trump-btn.green {
  background: var(--green);
}
.trump-btn.red {
  background: var(--red);
}
.trump-btn.yellow {
  background: var(--yellow);
  color: #333;
}
.trump-btn.black {
  background: var(--black);
}

/* Modal — always above game UI; solid panel (not see-through) */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 1rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-content {
  background: #0c1222;
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 55%, #070b16 100%);
  border: 2px solid rgba(201, 162, 39, 0.55);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: min(400px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
  opacity: 1;
  color: #f5e6c8;
  position: relative;
  z-index: 20001;
}
#rulesModal.modal {
  align-items: center;
  justify-content: center;
  padding: 2vh 4vw;
}
#rulesModal .modal-content {
  width: min(96vw, 560px);
  max-width: 96vw;
  max-height: 96dvh;
  overflow: hidden;
  padding: 1.05rem 1.25rem 0.95rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#rulesModal .modal-content,
#rulesModal .rules-text {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 55%, #070b16 100%);
  opacity: 1;
}
#rulesModal .rules-text {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
#rulesModal .rules-text p,
#rulesModal .rules-text {
  color: #f5e6c8;
}

.modal-content h2 {
  margin-bottom: 1rem;
}

#rulesModal .modal-content h2 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}

.rules-text p {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
#rulesModal .rules-text p {
  margin: 0 0 0.5rem;
  font-size: clamp(0.82rem, 2.8vw, 0.95rem);
  line-height: 1.38;
}
#rulesModal .rules-bots {
  opacity: 0.8;
}
#rulesModal #closeRules {
  margin-top: 0.35rem;
  align-self: flex-start;
}

.rules-link {
  text-align: center;
  margin-top: 1.5rem;
}

.version-tag {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: #a89a80;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Responsive adjustments */
@media (max-width: 400px) {
  .card-face.small {
    width: 38px;
    height: 56px;
  }
  .table-felt {
    border-radius: 50%;
    box-shadow:
      inset 0 0 30px rgba(0, 0, 0, 0.35),
      0 0 0 8px var(--wood),
      0 0 0 11px var(--wood-light),
      0 0 0 13px #3d2410,
      0 10px 22px rgba(0, 0, 0, 0.5);
  }
}

/* ===== Landscape / horizontal phone layout ===== */
/* Short landscape (phones) — even tighter */
.bot-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.bot-controls .btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* ===== Feature UI: toolbar, badges, modals, themes ===== */
.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}
.toolbar {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.icon-btn {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--text);
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
}
.icon-btn:active {
  transform: scale(0.95);
}
.target-label {
  opacity: 0.75;
  font-size: 0.85em;
}

.share-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.share-row .btn {
  flex: 0 1 auto;
  min-width: 5.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
}

.qr-box {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 !important;
  padding: 1.1rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  transform: none !important;
  left: 0 !important;
  background: #fff !important;
  border-radius: 0 !important;
  color: #000;
  box-sizing: border-box;
  overflow: auto;
}
.qr-box.hidden {
  display: none !important;
}
.qr-box .option-hint,
.qr-box #qrHint,
.qr-box #joinLinkLine,
.qr-box a,
.qr-box .join-site-link {
  color: #000 !important;
  opacity: 1;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  max-width: 22rem;
}
.qr-box #qrImg,
.qr-box .qr-img {
  width: min(78vw, 78vh, 420px) !important;
  height: min(78vw, 78vh, 420px) !important;
  max-width: 92vw;
  background: #fff;
  display: block;
  margin: 0 auto;
}
.qr-box .qr-close-btn {
  position: absolute;
  top: max(0.45rem, env(safe-area-inset-top, 0px));
  right: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  color: #111;
  border: 0;
  font-size: 1.45rem !important;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
#waiting {
  align-items: stretch;
}
.qr-box canvas {
  display: block;
  margin: 0 auto 0.35rem;
}

.select-input {
  background: #1a120b;
  color: var(--text);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  margin-left: 0.35rem;
  font-size: 0.95rem;
}
.option-block {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.felt-badges {
  position: absolute;
  /* Centered under top seat / above the trick */
  top: 20%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.35rem;
  pointer-events: none;
  max-width: 70%;
  width: max-content;
}
.felt-badge {
  background: rgba(0, 0, 0, 0.72);
  color: #ffe9a8;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.felt-badge.trump-green {
  border-color: #81c784;
  color: #c8e6c9;
}
.felt-badge.trump-red {
  border-color: #ef9a9a;
  color: #ffcdd2;
}
.felt-badge.trump-yellow {
  border-color: #ffe082;
  color: #fff9c4;
}
.felt-badge.trump-black {
  border-color: #bdbdbd;
  color: #eee;
}
.felt-badge.led {
  opacity: 0.95;
}

.bot-thinking {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #b3e5fc;
  font-style: italic;
  text-shadow: 0 1px 3px #000;
}

.bid-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.bid-value {
  font-size: 1.55rem;
  font-weight: 800;
  min-width: 3.2rem;
  text-align: center;
  color: #ffd54f;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.bid-value.is-moon {
  font-size: 0.92rem;
  line-height: 1.15;
  min-width: 0;
  max-width: 10.5rem;
  white-space: normal;
  letter-spacing: 0;
}
.bid-stepper .btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.9rem;
  min-width: 2.5rem;
  border-radius: 10px;
  font-weight: 800;
}
.action-panel .bid-buttons {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
  gap: 0.35rem;
}
.action-panel .bid-buttons .btn {
  min-width: 5.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
}
.action-panel .bid-buttons .btn.primary {
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.35);
}
.action-panel.bid-panel,
#actionPanel.bid-panel,
#actionPanel.lt-floating-panel.bid-panel {
  animation: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 300px !important;
  max-width: 92vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.action-panel.bid-panel .bid-meta {
  font-size: 0.62rem;
  line-height: 1.1;
  opacity: 0.8;
  margin: 0 0 3px;
}
.action-panel.bid-panel h3 {
  margin: 0 0 4px !important;
  font-size: 1.02rem !important;
  line-height: 1.1 !important;
}
.action-panel.bid-panel .bid-stepper {
  gap: 6px !important;
}
.action-panel.bid-panel .bid-value {
  font-size: 1.58rem !important;
  min-width: 3.3rem !important;
  line-height: 1 !important;
}
.action-panel.bid-panel .bid-stepper .btn,
.action-panel.bid-panel .bid-buttons .btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 15px !important;
  font-size: 1.17rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
.action-panel.bid-panel .bid-buttons {
  margin: 4px 0 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
@keyframes bidPanelIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
body.reduce-motion .action-panel.bid-panel {
  animation: none;
}

.trick-card-wrap.winner {
  z-index: 6;
}
.trick-card-wrap.winner .card-face {
  outline: 2px solid #69f0ae;
  box-shadow:
    0 0 0 3px rgba(105, 240, 174, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.45);
}
.trick-card-wrap.winner .trick-player-label {
  color: #69f0ae;
}

.win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.win-banner {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border: 2px solid #c9a227;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 360px;
  width: 100%;
}
.win-banner h1 {
  color: #ffd54f;
  margin-bottom: 0.5rem;
}
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  animation: fall 2.2s linear forwards;
  opacity: 0.9;
}
@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0.2;
  }
}

/* Themes */
body.theme-felt {
  --bg: #0a2e1a;
  --felt: #0e7a3a;
  --felt-dark: #065c2a;
}
body.theme-night {
  --bg: #0b1020;
  --card-bg: #121a2e;
  --wood: #2a3555;
  --wood-light: #3d4f7a;
  --text: #e3e8f5;
  --primary: #7eb6ff;
}

/* Waiting room host options — keep usable on mobile */
.host-options {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.variant-hint {
  margin-top: 0.35rem !important;
  text-align: left !important;
  max-height: 3.2em;
  overflow: hidden;
  font-size: 0.78rem !important;
  line-height: 1.3;
}
.bot-count-row {
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bot-count-row .select-input {
  min-width: 5.5rem;
}

.rule-picker-block {
  flex-direction: column;
  align-items: stretch !important;
  margin-top: 0.75rem;
  position: relative;
  z-index: 5;
}
.rule-variant-btn {
  width: 100%;
  text-align: left;
  font-size: 0.9rem !important;
  padding: 0.65rem 0.75rem !important;
  background: #1a120b !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  color: var(--text) !important;
}
.rule-variant-menu {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  background: #1a120b;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  padding: 0.35rem;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 20;
  position: relative;
}
.rule-variant-menu.hidden {
  display: none !important;
}
.rule-variant-menu button {
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
}
.rule-variant-menu button:active,
.rule-variant-menu button:hover {
  background: rgba(201, 162, 39, 0.2);
}

/* ===== Waiting / options screen — fit phone without clipping ===== */
#waiting.screen {
  position: relative;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 0.35rem 0.55rem 0 !important;
  padding-bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.2rem;
  justify-content: flex-start;
  min-height: 100dvh;
  height: 100dvh !important;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#waiting .header {
  position: relative !important;
  margin-bottom: 0.35rem !important;
  flex-shrink: 0;
  display: block !important;
  text-align: left !important;
  padding: 0.05rem 0.2rem 0.05rem 3.6rem !important;
  overflow: visible !important;
  width: 100%;
  box-sizing: border-box;
}
#waiting .waiting-crest {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  max-width: 3.2rem !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
}
#waiting .header h1 {
  font-size: 1.15rem !important;
  margin-bottom: 0;
}
#waiting .header p {
  font-size: 0.72rem;
  margin: 0;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#waiting .share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
}
#waiting .share-row .btn {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%) !important;
  color: #f0e0a8 !important;
  border: 1px solid rgba(212, 175, 55, 0.7) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#waiting .qr-box canvas {
  width: min(78vw, 78vh, 420px) !important;
  height: min(78vw, 78vh, 420px) !important;
}
#waiting .players-list {
  padding: 0.4rem 0.55rem !important;
  margin-bottom: 0.35rem !important;
  flex-shrink: 0;
}
#waiting .player-item {
  padding: 0.4rem 0.5rem !important;
  font-size: 0.9rem;
}
#waiting .status {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem;
  min-height: 1.1rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}
#waiting > .option-hint {
  flex-shrink: 0;
}
#waiting .host-options {
  padding: 0.55rem 0.65rem !important;
  margin-bottom: 0.4rem !important;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 38vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
}
#waiting .option-block {
  margin-top: 0.4rem !important;
}
#waiting .option-hint {
  font-size: 0.72rem !important;
  margin: 0.15rem 0 !important;
  line-height: 1.25;
}
#waiting .option-label {
  font-size: 0.9rem !important;
  gap: 0.4rem;
  margin-top: 0.35rem !important;
}
#waiting .select-input {
  font-size: 0.85rem !important;
  padding: 0.3rem 0.4rem !important;
}
#waiting .rule-variant-btn {
  padding: 0.45rem 0.6rem !important;
  font-size: 0.82rem !important;
}
#waiting .rule-variant-menu {
  max-height: 32vh;
  font-size: 0.82rem;
}
#waiting .rule-variant-menu button {
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
}
#waiting .variant-hint {
  max-height: 2.6em;
  font-size: 0.7rem !important;
}
#waiting #startBtn,
#waiting #leaveBtn,
#waiting .waiting-actions .host-options-open-btn {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0.55rem 0.7rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0;
  border-radius: 12px !important;
  min-height: 42px;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  overflow: visible;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#waiting #startBtn.btn.primary {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%) !important;
  color: #f0e0a8 !important;
  opacity: 1 !important;
  border: 1px solid rgba(212, 175, 55, 0.7) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#waiting #startBtn .start-btn-sub {
  display: block;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.82;
  line-height: 1.15;
  margin-top: 0.12rem;
}
#waiting #startBtn.table-waiting {
  background: linear-gradient(180deg, #2a3348 0%, #161d2c 100%) !important;
  color: #d7c48a !important;
  border: 1px dashed rgba(212, 175, 55, 0.45) !important;
  box-shadow: none !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#waiting #startBtn.table-ready {
  background: #ffe000 !important;
  background-image: none !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow:
    0 0 0 2px #ffe000,
    0 8px 20px rgba(0, 0, 0, 0.35) !important;
  animation: startReadyPulse 1.5s ease-in-out infinite;
  min-height: 54px !important;
  font-size: 1.12rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0.7rem 0.8rem !important;
}
#waiting #startBtn.table-ready .start-btn-sub {
  color: #000 !important;
  opacity: 1 !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72em;
  font-weight: 800;
}
@keyframes startReadyPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px) scale(1.015);
    filter: brightness(1.08);
  }
}
#waiting.table-full .waiting-felt {
  box-shadow:
    0 0 0 2px rgba(240, 213, 106, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.35);
}
body.gfx-brassUI #waiting #startBtn.table-ready {
  background: #ffe000 !important;
  background-image: none !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
@media (prefers-reduced-motion: reduce) {
  #waiting #startBtn.table-ready {
    animation: none;
  }
}

#waiting #leaveBtn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%) !important;
  color: #f0e0a8 !important;
  border: 1px solid rgba(212, 175, 55, 0.65) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
body.gfx-brassUI #waiting #leaveBtn,
body.gfx-brassUI #waiting #shareBtn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%) !important;
  color: #f0e0a8 !important;
  border: 1px solid rgba(212, 175, 55, 0.7) !important;
}
#waiting #startBtn:disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.2);
}
#waiting #startBtn.hidden,
#waiting #leaveBtn.hidden {
  display: none !important;
}
#waiting #restartPracticeBtn {
  display: none !important; /* practice restart is in-game only */
}
/* Pin Start / Leave to bottom of waiting screen so they never scroll away */
#waiting .waiting-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  flex-shrink: 0;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(26, 18, 8, 0.98) 70%, rgba(26, 18, 8, 0.85));
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50 !important;
  box-sizing: border-box;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}
#waiting .hint {
  margin-top: 0.25rem !important;
  font-size: 0.7rem !important;
  padding-bottom: 0.25rem;
  flex-shrink: 0;
}

@media (max-height: 700px) {
  #waiting .header h1 {
    font-size: 1.2rem !important;
  }
  #waiting .players-list {
    padding: 0.3rem 0.45rem !important;
  }
  #waiting .player-item {
    padding: 0.3rem 0.4rem !important;
  }
  #waiting .host-options {
    padding: 0.4rem 0.5rem !important;
  }
  #waiting .share-row .btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.8rem !important;
  }
}

/* Rule set bottom-sheet modal */
.rule-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.rule-overlay.hidden,
#ruleVariantOverlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.rule-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-bottom: none;
  padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rule-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}
.rule-sheet-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #ffe9a8;
}
.rule-sheet-header .btn {
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}
.rule-sheet-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
}
.rule-sheet-list button {
  background: #1a120b;
  border: 1px solid rgba(201, 162, 39, 0.25);
  color: var(--text);
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.rule-sheet-list button:active,
.rule-sheet-list button:hover {
  background: rgba(201, 162, 39, 0.22);
  border-color: rgba(201, 162, 39, 0.55);
}
body.modal-open {
  overflow: hidden;
}

/* Bot difficulty more readable */
#botDifficulty {
  min-width: 6.5rem;
  font-weight: 600;
}

/* Center trick — tight real-life stack (top card clear, lower cards peek under) */
.trick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 108px;
  height: auto;
  max-height: none;
  overflow: visible;
  gap: 0.2rem;
  padding: 0.15rem;
  box-sizing: border-box;
}
.trick-stack,
.trick-scatter {
  position: relative;
  width: 72px;
  height: 96px;
  margin: 0 auto;
  flex-shrink: 0;
}
.trick-stack .trick-card-wrap,
.trick-scatter .trick-card-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Center a ~56×80 card */
  margin-left: -28px;
  margin-top: -40px;
  display: block;
  transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg));
  transition: transform 0.16s ease-out;
  pointer-events: none;
  will-change: transform, opacity;
}
.trick-stack .trick-card-wrap .card-face,
.trick-scatter .trick-card-wrap .card-face {
  width: 56px !important;
  height: 80px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.32);
}
/* All live trick cards stay fully opaque. Depth is communicated by stacking/shadow, never dimming. */
.trick-stack .trick-card-wrap .card-face,
.trick-scatter .trick-card-wrap .card-face {
  opacity: 1;
  filter: none;
}
.trick-stack .trick-card-wrap.latest .card-face,
.trick-scatter .trick-card-wrap.latest .card-face {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.38);
}
.trick-stack .trick-card-wrap.winner .card-face,
.trick-scatter .trick-card-wrap.winner .card-face {
  outline: 2px solid #ffd54f;
  box-shadow:
    0 0 0 3px rgba(255, 213, 79, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4);
  filter: none;
}
.trick-caption,
.trick-count {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe9a8;
  text-shadow: 0 1px 3px #000;
  opacity: 0.95;
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.trick-player-label {
  display: none; /* labels moved to single caption under the stack */
}
/* Hide per-seat played cards — only the center stack shows plays */
.player-slot .played-card {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Side seats: don't stretch to full grid-cell height (avoids giant highlight) */
.player-slot.left,
.player-slot.right {
  align-self: center;
  height: auto;
  max-height: fit-content;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}

/* First hand: no turn/bid glow on seats (win over plaque/high-contrast rules) */
body.hor-first-hand .player-slot.is-turn .name,
body.hor-first-hand #slot-me.is-turn .name,
body.hor-first-hand .player-slot.is-turn .name[data-plaque-team],
body.hor-first-hand #slot-me.is-turn .name[data-plaque-team],
body.high-contrast.hor-first-hand .player-slot.is-turn .name {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}
body.hor-first-hand .player-slot.is-turn::after,
body.hor-first-hand #slot-me.is-turn::after,
body.hor-first-hand .seat-lead-tag,
body.hor-first-hand .lt-bid-turn,
body.hor-first-hand .lt-bid-high {
  display: none !important;
}
body.hor-first-hand .player-slot.is-turn .seat-avatar,
body.hor-first-hand .player-slot.is-turn .seat-avatar-img,
body.hor-first-hand .bid-badge.bid-high,
body.hor-first-hand .lt-bid-seat.to-act,
body.hor-first-hand .lt-bid-seat.high {
  animation: none !important;
  box-shadow: none !important;
}
body.hor-first-hand .lt-bid-seat.to-act,
body.hor-first-hand .lt-bid-seat.high {
  outline: none !important;
  background: transparent !important;
}

/* Highlight player whose turn it is — tight pill around name/count only */
.player-slot.is-turn {
  background: transparent !important;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  animation: none;
  border-radius: 0;
}
/* Glow wraps the name as a compact chip */
.player-slot.is-turn .name {
  color: #fff8e1 !important;
  font-weight: 800;
  font-size: inherit;
  background: rgba(255, 193, 7, 0.28);
  box-shadow:
    0 0 0 1.5px rgba(255, 213, 79, 0.95),
    0 0 10px rgba(255, 213, 79, 0.35);
  border-radius: 8px;
  padding: 0.12rem 0.35rem;
  margin-bottom: 0.1rem;
}
.player-slot.is-turn .cards-count {
  color: #ffe082;
  opacity: 1;
}
/* Small turn dot under the chip — not a full-width bar */
.player-slot.is-turn::after {
  content: '●';
  display: block;
  font-size: 0.45rem;
  font-weight: 800;
  color: #ffd54f;
  text-align: center;
  margin-top: 0.05rem;
  line-height: 1;
  letter-spacing: 0;
  width: auto;
  align-self: center;
}
.player-slot.left.is-turn .name,
.player-slot.right.is-turn .name {
  padding: 0.1rem 0.28rem;
  border-radius: 7px;
  box-shadow:
    0 0 0 1.5px rgba(255, 213, 79, 0.9),
    0 0 8px rgba(255, 213, 79, 0.3);
}
.player-slot.left.is-turn::after,
.player-slot.right.is-turn::after {
  content: '●';
  font-size: 0.4rem;
}

.score-modal-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.score-modal-actions .btn {
  padding: 0.4rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  min-width: 0;
  flex: 1 1 22%;
  max-width: 48%;
  overflow: hidden;
}

/* Scoreboard fits viewport — no internal scroll */
#scoreModal.modal {
  padding: 0.4rem;
  align-items: center;
}
#scoreModal .modal-content.scoreboard-modal {
  max-width: min(380px, 96vw);
  max-height: min(96dvh, 96vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.7rem 0.6rem;
  border-radius: 12px;
}
.scoreboard-modal h2 {
  text-align: center;
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  flex-shrink: 0;
}
#scoreModalBody {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.scoreboard {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 0;
}
.scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.scoreboard-team {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 10px;
  padding: 0.35rem 0.35rem;
  text-align: center;
}
.scoreboard-team.leading {
  border-color: #ffd54f;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.22);
}
.sb-label {
  font-size: 0.7rem;
  opacity: 0.85;
  font-weight: 700;
}
.sb-total {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffe9a8;
  line-height: 1.05;
}
.sb-delta {
  font-size: 0.7rem;
  margin-top: 0.1rem;
  opacity: 0.9;
}
.scoreboard-vs {
  font-weight: 800;
  opacity: 0.5;
  font-size: 0.85rem;
}
.scoreboard-goal {
  text-align: center;
  font-size: 0.75rem;
  margin: 0;
  opacity: 0.85;
  flex-shrink: 0;
}
.scoreboard-detail {
  font-size: 0.75rem;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  flex-shrink: 0;
}
.scoreboard-detail div {
  margin: 0.08rem 0;
}

/* ===== Exciting room decor ===== */
.game-room {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201, 162, 39, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(80, 40, 10, 0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(80, 40, 10, 0.35) 0%, transparent 40%),
    linear-gradient(180deg, #3a2414 0%, #1f140c 45%, #120c08 100%) !important;
}

.room-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.game-room > .top-bar,
.game-room > .table-wrap,
.game-room > .hand-area,
.game-room > .action-panel,
.game-room .host-tools {
  position: relative;
  z-index: 2;
}

/* Wall sconces with warm glow */
.sconce {
  position: absolute;
  top: 18%;
  width: 18px;
  height: 36px;
  background: linear-gradient(180deg, #c9a227 0%, #8b6914 40%, #5c4010 100%);
  border-radius: 4px 4px 8px 8px;
  box-shadow: 0 0 24px 8px rgba(255, 180, 60, 0.35);
}
.sconce-left {
  left: 4%;
}
.sconce-right {
  right: 4%;
}
.sconce .flame {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 14px;
  background: radial-gradient(
    ellipse at 50% 80%,
    #fff8e1 0%,
    #ffb300 40%,
    #ff6f00 70%,
    transparent 100%
  );
  border-radius: 50% 50% 40% 40%;
  animation: flicker 1.8s ease-in-out infinite alternate;
  filter: blur(0.5px);
}
@keyframes flicker {
  0% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Framed wall art */
.wall-frame {
  position: absolute;
  top: 12%;
  width: 42px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: linear-gradient(145deg, #4a3020, #2a1a10);
  border: 3px solid #c9a227;
  border-radius: 4px;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
  color: #ffe9a8;
  opacity: 0.85;
}
.wall-frame-left {
  left: 8%;
  transform: rotate(-4deg);
}
.wall-frame-right {
  right: 8%;
  transform: rotate(3deg);
  font-size: 0.85rem;
  letter-spacing: -1px;
}

/* Soft chandelier sparkle */
.chandelier {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  color: #ffe082;
  text-shadow:
    0 0 12px rgba(255, 224, 130, 0.8),
    0 0 24px rgba(201, 162, 39, 0.5);
  opacity: 0.7;
  animation: sparkle 3s ease-in-out infinite;
}
@keyframes sparkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
}

/* Corner flourishes */
.corner-ornament {
  position: absolute;
  font-size: 1.4rem;
  color: rgba(201, 162, 39, 0.35);
  line-height: 1;
}
.corner-ornament.tl {
  top: 6px;
  left: 6px;
}
.corner-ornament.tr {
  top: 6px;
  right: 6px;
  transform: scaleX(-1);
}
.corner-ornament.bl {
  bottom: 6px;
  left: 6px;
  transform: scaleY(-1);
}
.corner-ornament.br {
  bottom: 6px;
  right: 6px;
  transform: scale(-1);
}

/* Oval felt only — wood rim follows a true ellipse; no pinched sides */
.table-felt {
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.4),
    inset 0 0 12px rgba(255, 255, 255, 0.1),
    0 0 0 6px #6b4423,
    0 0 0 9px #c9a227,
    0 0 0 12px #8b5a2b,
    0 0 0 15px #3d2410,
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(13, 92, 46, 0.25) !important;
}
/* Remove dashed rectangular/oval inlay ring */
.felt-inlay {
  display: none !important;
}
/* Griffin house watermark on the felt */
.table-felt::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: url('assets/images/griffin-icon.png?v=631') center / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35)) brightness(1.15) contrast(1.05);
  mix-blend-mode: normal;
}

/* Top bar — plaque style */
.game-room .top-bar {
  background: linear-gradient(180deg, rgba(90, 60, 28, 0.98), rgba(45, 28, 14, 0.95)) !important;
  border: 1px solid rgba(201, 162, 39, 0.5) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 230, 150, 0.15) !important;
}

/* Hand rail — polished wood */
.hand-rail {
  background: linear-gradient(
    180deg,
    #a67c3d 0%,
    #6b4423 35%,
    #4a2f18 70%,
    #3d2410 100%
  ) !important;
  border-top: 2px solid rgba(255, 220, 150, 0.35) !important;
  box-shadow:
    0 -2px 8px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.08);
}

@media (max-width: 400px), (max-height: 600px) {
  .wall-frame {
    display: none;
  }
  .sconce {
    width: 12px;
    height: 24px;
    top: 14%;
  }
  .corner-ornament {
    font-size: 1rem;
    opacity: 0.5;
  }
}

/* Top bar options hide / show */
.top-bar-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem 0.25rem;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 0;
  padding-top: 0;
}
.top-opts-toggle {
  margin-left: 0.15rem !important;
  flex-shrink: 0;
  width: 1.05rem !important;
  height: 1.05rem !important;
  font-size: 0.55rem !important;
}
.top-bar .toolbar {
  width: 100%;
  margin-top: 0.15rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
}
.top-bar.opts-collapsed .toolbar {
  display: none !important;
}
.top-bar.opts-collapsed {
  padding-bottom: 0.08rem;
}
/* Never show practice / spectator titles in the score strip */
.top-bar > .practice-badge,
.top-bar > .spectator-badge {
  display: none !important;
}
/* Trump is on the felt — hide duplicate in the top strip */

/* Compact bid progress: Bid · Made · Need */
.bid-progress {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe082;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 213, 79, 0.35);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.bid-progress.hidden {
  display: none !important;
}
.bid-progress.made {
  color: #69f0ae;
  border-color: rgba(105, 240, 174, 0.45);
}
.bid-progress.short {
  color: #ffab91;
  border-color: rgba(255, 171, 145, 0.4);
}

.turn-timer-bar {
  margin: 0.25rem 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 10px;
  flex-shrink: 0;
}
.turn-timer-bar.hidden {
  display: none !important;
}
.turn-timer-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffe9a8;
  text-align: center;
  margin-bottom: 0.25rem;
}
.turn-timer-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.turn-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #43a047, #c9a227);
  border-radius: 4px;
  transition: width 0.25s linear;
}
.turn-timer-bar.urgent .turn-timer-fill {
  background: linear-gradient(90deg, #e53935, #ff8a65);
}
.turn-timer-bar.urgent .turn-timer-label {
  color: #ff8a65;
}
.in-game-leave {
  position: absolute;
  right: 0.4rem;
  /* Sit above the hand so the arrow is not on the cards */
  bottom: max(7.2rem, calc(24dvh + env(safe-area-inset-bottom, 0px)));
  z-index: 45;
  text-align: right;
  padding: 0;
  flex-shrink: 0;
  pointer-events: none;
}
.leave-exit-btn,
.leave-replace-btn {
  pointer-events: auto;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 !important;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(80, 20, 20, 0.85);
  color: #ffcdd2;
  font-size: 1rem !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0.9;
}
.leave-exit-btn:active,
.leave-replace-btn:active {
  opacity: 1;
  transform: scale(0.95);
}
.pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 6, 2, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pause-overlay.hidden {
  display: none !important;
}
.pause-card {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 100%);
  border: 2px solid rgba(201, 162, 39, 0.55);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  text-align: center;
  max-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.pause-icon {
  font-size: 2.5rem;
  margin-bottom: 0.35rem;
}
.pause-card h2 {
  margin: 0 0 0.35rem;
  color: #ffe9a8;
  font-size: 1.35rem;
}
.pause-card p {
  margin: 0 0 1rem;
  opacity: 0.85;
  font-size: 0.9rem;
}

/* Kitty preview — brief flash then fades */
.kitty-preview,
.discard-kitty {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.45rem;
  margin-bottom: 0.5rem;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  text-align: center;
}
.kitty-preview.kitty-fade-out {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.kitty-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffe9a8;
  margin-bottom: 0.3rem;
}
.kitty-hint {
  font-size: 0.7rem;
  color: #c9a227;
  margin-top: 0.25rem;
  opacity: 0.9;
}
.kitty-cards {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0.3rem;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.1rem;
  box-sizing: border-box;
}
.kitty-cards .card-face {
  width: min(14vw, 48px) !important;
  height: min(20vw, 70px) !important;
  flex: 0 0 auto;
}
.confirm-row {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
}
.confirm-row .btn {
  min-width: 12rem;
}

/* Full-screen discard picker — color groups */
.discard-overlay {
  touch-action: manipulation;
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(8, 6, 4, 0.92);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top, 8px) 8px env(safe-area-inset-bottom, 8px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.discard-overlay.hidden {
  display: none !important;
}
.discard-sheet {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0.25rem 0.25rem;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.discard-title {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  color: #ffe9a8;
  flex-shrink: 0;
}
.discard-sub {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: #c9a227;
  font-weight: 700;
  flex-shrink: 0;
}
.discard-groups {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.discard-color-row {
  background: rgba(30, 22, 14, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 10px;
  padding: 0.3rem 0.4rem 0.35rem;
  flex-shrink: 0;
}
.discard-color-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  opacity: 0.9;
}
.discard-color-green .discard-color-label {
  color: #81c784;
}
.discard-color-red .discard-color-label {
  color: #ef9a9a;
}
.discard-color-yellow .discard-color-label {
  color: #ffd54f;
}
.discard-color-black .discard-color-label {
  color: #b0bec5;
}
.discard-color-rook .discard-color-label,
.discard-color-special .discard-color-label {
  color: #c9a227;
}
.discard-color-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  align-items: flex-end;
}
.discard-overlay .discard-pick {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  width: var(--discard-card-w, 44px) !important;
  height: var(--discard-card-h, 64px) !important;
  flex: 0 0 var(--discard-card-w, 44px);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
  overflow: hidden;
  box-sizing: border-box !important;
}
.discard-overlay .discard-pick.selected {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 2px #c9a227,
    0 6px 16px rgba(0, 0, 0, 0.45);
}
.discard-overlay .discard-pick .c-rank {
  font-size: calc(var(--discard-card-w, 44px) * 0.22);
}
.discard-overlay .discard-pick .c-suit {
  font-size: calc(var(--discard-card-w, 44px) * 0.16);
}
.discard-overlay .discard-pick .c-center {
  font-size: calc(var(--discard-card-w, 44px) * 0.36);
}
.discard-overlay .discard-pick .c-stack {
  inset: 3px 2px !important;
  gap: 0 !important;
}
.discard-overlay .discard-pick .c-num {
  font-size: calc(var(--discard-card-h, 64px) * 0.34) !important;
  line-height: 0.92 !important;
}
.discard-overlay .discard-pick .c-color {
  font-size: calc(var(--discard-card-h, 64px) * 0.11) !important;
  line-height: 1 !important;
}
.discard-overlay .discard-pick .rook-bird-img,
.discard-overlay .discard-pick .red2-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.discard-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  background: rgba(8, 6, 4, 0.98);
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  pointer-events: none; /* only the button receives clicks */
}
.discard-actions .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  min-width: 0;
  width: auto;
  max-width: 90%;
  min-height: 0;
  height: auto;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.nest-badge {
  border-color: #a1887f;
  color: #d7ccc8;
}

/* Score made/set banners */
.score-banner {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.banner-made {
  background: rgba(67, 160, 71, 0.35);
  color: #c8e6c9;
}
.banner-set {
  background: rgba(229, 57, 53, 0.35);
  color: #ffcdd2;
  animation: setShake 0.5s ease;
}
@keyframes setShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.scoreboard.made-hand .sb-total {
  color: #a5d6a7;
}
.scoreboard.set-hand .sb-total {
  color: #ef9a9a;
}

.seat-avatar {
  font-size: 1rem;
}

/* ---------- Fancy stats page ---------- */
#statsModal .modal-content {
  width: min(96vw, 640px);
  max-width: 96vw;
  max-height: 90dvh;
}
.stats-fancy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.stats-hero {
  text-align: center;
  padding: 0.7rem 0.5rem 0.9rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
.stats-hero-title {
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f3d886 0%, #c9a227 55%, #8a6a15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.stats-hero-sub {
  font-size: 0.82rem;
  color: rgba(245, 230, 200, 0.7);
  margin-top: 0.2rem;
}

/* Team comparison */
.team-compare {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(201, 162, 39, 0.12) 0%,
    rgba(0, 0, 0, 0.25) 70%
  );
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
}
.team-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.92rem;
  margin-top: 0.4rem;
}
.team-compare-row:first-child {
  margin-top: 0;
}
.team-compare-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.team-a-text {
  color: #e9c65a;
}
.team-b-text {
  color: #7fb2ff;
}
.team-compare-score {
  font-weight: 800;
  font-size: 1.05rem;
  color: #f5e6c8;
}
.team-compare-bar {
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 0.25rem;
}
.team-compare-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.team-compare-fill.fill-a {
  background: linear-gradient(90deg, #8a6a15, #e9c65a);
}
.team-compare-fill.fill-b {
  background: linear-gradient(90deg, #1c3a6e, #7fb2ff);
}
.team-compare-meta {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: rgba(245, 230, 200, 0.65);
  text-align: center;
}

/* Player cards */
.stat-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.7rem;
}
.stat-player-card {
  position: relative;
  border-radius: 14px;
  padding: 0.7rem 0.8rem 0.6rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.stat-player-card.team-a {
  border-left-color: #c9a227;
}
.stat-player-card.team-b {
  border-left-color: #3d6fc9;
}
.stat-player-card.is-leader {
  border-color: rgba(201, 162, 39, 0.6);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.35),
    0 6px 18px rgba(201, 162, 39, 0.15);
}
.stat-crown {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 1.05rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.stat-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.stat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stat-player-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f5e6c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-role-tag {
  font-size: 0.72rem;
  color: rgba(245, 230, 200, 0.6);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.stat-team-pill {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
}
.stat-metric-row {
  display: flex;
  justify-content: space-around;
  margin: 0.55rem 0 0.45rem;
  text-align: center;
}
.stat-metric-num {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f3d886;
  line-height: 1.1;
}
.stat-metric-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(245, 230, 200, 0.55);
}
.stat-bid-line {
  margin-top: 0.2rem;
}
.stat-bidbar-label {
  font-size: 0.72rem;
  color: rgba(245, 230, 200, 0.75);
  margin-bottom: 0.2rem;
}
.stat-bidbar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.stat-bidbar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4caf50, #8bd68f);
}
.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.stat-chip {
  font-size: 0.68rem;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.chip-rook {
  background: rgba(201, 162, 39, 0.18);
  border-color: rgba(201, 162, 39, 0.35);
}
.chip-red2 {
  background: rgba(255, 23, 68, 0.16);
  border-color: rgba(255, 23, 68, 0.35);
}
.chip-big {
  background: rgba(255, 152, 0, 0.16);
  border-color: rgba(255, 152, 0, 0.35);
}
.chip-nest {
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.35);
}
.chip-moon {
  background: rgba(126, 178, 255, 0.16);
  border-color: rgba(126, 178, 255, 0.35);
}
.chip-bag {
  background: rgba(180, 180, 180, 0.14);
  border-color: rgba(180, 180, 180, 0.3);
}

/* All-time leaders */
.stats-alltime-toggle {
  text-align: center;
}
.stats-alltime {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
}
.stats-empty {
  font-size: 0.82rem;
  color: rgba(245, 230, 200, 0.65);
  text-align: center;
  padding: 0.4rem;
}
.alltime-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.alltime-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.25rem 0.1rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.alltime-row:last-child {
  border-bottom: none;
}
.alltime-rank {
  font-weight: 700;
  text-align: center;
}
.alltime-name {
  color: #f5e6c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alltime-bot-tag {
  font-style: normal;
  font-size: 0.65rem;
  color: rgba(245, 230, 200, 0.55);
}
.alltime-pts {
  font-weight: 700;
  color: #f3d886;
}
.alltime-games {
  color: rgba(245, 230, 200, 0.6);
  font-size: 0.75rem;
}

/* Accessibility */
body.high-contrast .card-face {
  outline: 2px solid #fff;
  filter: contrast(1.15);
}
body.high-contrast .player-slot.is-turn .name {
  box-shadow:
    0 0 0 2px #fff,
    0 0 8px rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}
body.high-contrast .hand > .card-face {
  /* Prefer readable size but never force overflow; JS fitHandToScreen controls width */
  min-width: 0;
  outline: 2px solid #fff;
}
body.reduce-motion * {
  animation: none !important;
  transition: none !important;
}
/* Larger tap targets */
body.high-contrast .icon-btn,
body.high-contrast .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Landscape tablets only: optional side hand. Phones always keep hand at bottom. */
/* Nest cards in score modal — compact so scoreboard fits without scroll */
.nest-reveal-block {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  text-align: center;
  flex-shrink: 1;
  min-height: 0;
}
.nest-reveal-block .nest-label {
  font-size: 0.7rem;
  color: #c9a227;
  margin-bottom: 0.2rem;
  font-weight: 700;
}
.nest-reveal-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Scale so every nest card fits on one row */
  --nest-count: 6;
  --nest-card-w: min(42px, calc((100% - (var(--nest-count) - 1) * 3px) / var(--nest-count)));
}
.nest-reveal-cards .card-face {
  width: var(--nest-card-w) !important;
  height: calc(var(--nest-card-w) * 1.4) !important;
  min-width: 0 !important;
  flex: 0 0 var(--nest-card-w);
  border-width: 1px !important;
  border-radius: 4px !important;
}
.nest-reveal-cards .card-face .c-num {
  font-size: clamp(0.45rem, 2.4vw, 0.75rem) !important;
}
.nest-reveal-cards .card-face .c-color {
  font-size: clamp(0.28rem, 1.4vw, 0.4rem) !important;
}
.nest-reveal-cards .card-face .rook-bird,
.nest-reveal-cards .card-face .c-center {
  font-size: clamp(0.45rem, 2.4vw, 0.75rem) !important;
}

/* Very short screens: tighten scoreboard further */
@media (max-height: 560px) {
  #scoreModal .modal-content.scoreboard-modal {
    padding: 0.4rem 0.5rem 0.45rem;
  }
  .scoreboard-modal h2 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
  }
  .sb-total {
    font-size: 1.3rem;
  }
  .score-banner {
    font-size: 0.85rem;
    padding: 0.18rem 0.3rem;
  }
  .scoreboard-detail {
    font-size: 0.68rem;
    padding: 0.25rem 0.4rem;
  }
}
@media (max-height: 420px) {
  .nest-reveal-block .nest-label {
    display: none;
  }
  .scoreboard-goal {
    display: none;
  }
}

/* Landscape */

/* Spectator badge */
.spectator-badge {
  display: inline-block;
  background: #546e7a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.disconnect-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15000;
  background: rgba(80, 20, 20, 0.95);
  border: 1px solid #ef9a9a;
  color: #ffcdd2;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  max-width: 92vw;
  text-align: center;
  pointer-events: none;
}
.disconnect-banner.hidden {
  display: none;
}

/* Landscape: larger hand (#17) */
/* Offline practice badge */
.practice-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: #e8f5e9;
  border: 1px solid #81c784;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin-right: 0.4rem;
  white-space: nowrap;
}
#restartPracticeBtn {
  background: #2e7d32;
  color: #fff;
  border: none;
}

/* Bid / pass badges on seats */

.bid-badge {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bid-badge.hidden {
  display: none !important;
}
.bid-badge.bid-pass {
  background: #546e7a;
  color: #eceff1;
  border: 1px solid #90a4ae;
}
.bid-badge.bid-value-badge {
  background: #1565c0;
  color: #e3f2fd;
  border: 1px solid #64b5f6;
}
.bid-badge.bid-high {
  background: linear-gradient(135deg, #f9a825, #ef6c00);
  color: #1a120b;
  border: 1px solid #ffe082;
  box-shadow: 0 0 10px rgba(249, 168, 37, 0.55);
}
.bid-badge.bid-moon {
  letter-spacing: 0.01em;
  font-size: 0.72rem;
}
#slot-me .bid-badge {
  margin-bottom: 0.25rem;
}

/* Passed bidder — greyed out for the rest of the auction */
.player-slot.is-passed,
#slot-me.is-passed {
  opacity: 0.42;
  filter: grayscale(0.85);
  pointer-events: none;
}
.player-slot.is-passed .bid-badge.bid-pass,
#slot-me.is-passed .bid-badge.bid-pass {
  opacity: 1;
  filter: none;
}

/* Center message — readable, does not bury the trick */
.center-area {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.center-area .trick {
  position: relative;
  z-index: 2;
}
/* Game info strip — centered just above the hand, full text visible */
.message.message-above-hand,
.message.message-beside-me,
#messageArea.message {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  min-width: 0;
  max-width: min(94vw, 22rem);
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 0.28rem 0.65rem;
  margin: 0.15rem auto 0.1rem;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
  background: rgba(20, 12, 6, 0.88);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  overflow: visible;
  text-overflow: unset;
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  color: #f5e6c8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#messageArea.message:empty {
  display: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  border: none;
  box-shadow: none;
}
.game-room > #messageArea.message {
  order: 50;
}

/* Seat text stacking — avoid bid badge covering name / cards */
.player-slot {
  min-width: 0;
  max-width: 100%;
  gap: 0.1rem;
}
.player-slot .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.15;
  padding: 0 0.15rem;
}
.player-slot .cards-count {
  font-size: 0.7rem;
  opacity: 0.85;
}
.player-slot .played-card {
  display: none !important;
  min-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 0;
}
.player-slot .bid-badge {
  position: relative;
  z-index: 2;
  margin-top: 0.1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Top bar — scores / phase / badges never collide */
.game-room .top-bar {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.top-bar-main {
  min-width: 0;
}
.top-bar .scores {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem 0.25rem;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 50%;
  font-size: 0.52rem;
  order: 1;
}
.top-bar .scores span {
  white-space: nowrap;
  margin-right: 0;
}
.top-bar .top-opts-toggle {
  margin-left: 0.1rem !important;
  order: 4;
  align-self: center;
}
/* Phase on same compact row — ~50% smaller top strip */
.top-bar .phase {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-top: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  font-size: 0.5rem;
  padding: 0 0.15rem;
  text-align: right;
  line-height: 1.05;
}
.top-bar .bid-progress {
  order: 3;
  font-size: 0.48rem;
  padding: 0.02rem 0.2rem;
  flex: 0 0 auto;
  margin-left: 0.1rem;
  margin-top: 0;
}
.practice-badge,
.spectator-badge {
  display: none !important;
}

/* Hand layering */
.hand-area {
  position: relative;
  z-index: 35 !important;
  flex-shrink: 0;
}

.action-panel {
  position: relative;
  z-index: 36;
  flex-shrink: 0;
  max-height: none;
  height: auto;
  overflow: visible;
}
.turn-timer-bar {
  position: relative;
  z-index: 34;
  flex-shrink: 0;
}
.in-game-leave {
  position: absolute !important;
  right: 0.4rem;
  bottom: max(7.2rem, calc(24dvh + env(safe-area-inset-bottom, 0px)));
  z-index: 45;
  flex-shrink: 0;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

/* Room decor stays behind UI chrome */
.room-decor {
  z-index: 0 !important;
  pointer-events: none !important;
}
.corner-ornament.bl,
.corner-ornament.br {
  /* don't sit on hand */
  bottom: auto;
  top: 55%;
  opacity: 0.25;
}

/* Table fills remaining height; hand stays reserved below */
.game-room > .table-wrap {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.game-room > .hand-area {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-height: min(26dvh, 170px);
  min-height: 72px;
  padding: 0.35rem 0.2rem 0.45rem;
  /* Must allow horizontal scroll so 9–16 cards never clip */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 6;
}
/* Bid / trump panel — float over mid-table so it does NOT cover the hand cards */
.game-room > .action-panel {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  /* Sit above the hand rail (hand ~22–26dvh); keep clear of cards */
  bottom: max(7.2rem, calc(24dvh + env(safe-area-inset-bottom, 0px)));
  top: auto;
  width: max-content;
  max-width: 96vw;
  max-height: none;
  height: auto;
  overflow: hidden;
  margin: 0 !important;
  z-index: 40 !important;
  flex: none !important;
  /* no layout impact on table-wrap */
}
.game-room > .action-panel.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* Bottom seat — no horizontal shift that clips into the wood rim */
#slot-me.player-slot.bottom {
  transform: none;
}

/* Host options / waiting — long lists scroll, labels wrap */
#waiting .host-options {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: none;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#waiting .option-label,
#waiting .option-hint {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}
#waiting .option-block {
  min-width: 0;
}
#waiting .select-input {
  max-width: 100%;
}

/* Rule variant menu — full readable text */
.rule-variant-menu button {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
  overflow: visible;
}

/* Landscape: tighter stacking, hand always above */
/* Portrait small phones */
@media (max-width: 380px) {
  .top-bar .scores span {
    margin-right: 0.35rem;
    font-size: 0.8rem;
  }
  .top-bar .phase {
    font-size: 0.8rem;
  }
  .player-slot .name {
    font-size: 0.75rem;
  }
}

/* Keep hand and leave controls in document flow */
.game-room > .game-room > .in-game-leave {
  order: 60;
}

/* Waiting room: compact options bar + popup sheet */
#waiting .host-options.host-options-bar {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.45rem 0.55rem !important;
  margin-bottom: 0.35rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
#waiting .host-options-bar .bot-count-row {
  margin-top: 0 !important;
}
#waiting .waiting-actions .host-options-open-btn {
  width: 100%;
  max-width: 320px;
  margin: 0.1rem auto !important;
  padding: 0.55rem 0.8rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  min-height: 42px;
}
#waiting .host-options-bar .variant-hint {
  max-height: none;
  text-align: center !important;
  margin: 0.1rem 0 0 !important;
  font-size: 0.72rem !important;
}

@media (min-width: 520px) {
}

/* Waiting room: empty seats + fill bots */
#waiting .player-item.seat-empty {
  opacity: 0.55;
  border-style: dashed;
  font-style: italic;
}
#waiting .fill-seats-help {
  display: none !important;
}
#waiting .fill-seats-help-unused {
  text-align: center !important;
  margin: 0.15rem 0 0.25rem !important;
  font-size: 0.78rem !important;
  line-height: 1.35;
  color: #ffe082;
}
#waiting .fill-seats-btn {
  width: 100%;
  max-width: 320px;
  margin: 0.1rem auto !important;
  padding: 0.45rem 0.7rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  border: 1px solid rgba(212, 175, 55, 0.7);
  color: #f0e0a8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#waiting .fill-seats-btn:disabled {
  opacity: 0.45;
}
#waitingStatus {
  text-align: center;
  line-height: 1.4;
  padding: 0.35rem 0.5rem;
}

/* === Stable table during play (no jumping) === */
.game-room {
  /* Lock vertical stack so children can't shove each other around */
  justify-content: flex-start;
}
.table-felt .table {
  contain: layout;
}
/* Turn highlight must not change slot box size */
.player-slot.is-turn .name {
  /* keep padding but compensate so layout width/height stay similar */
  box-sizing: border-box;
}
.player-slot .bid-badge {
  /* Reserve a line so badges appearing don't push the grid */
  min-height: 1.05em;
}
.player-slot .cards-count {
  min-height: 1em;
}
/* Winner highlight is on the card face; keep stack transform from inline style */
.trick-stack .trick-card-wrap.winner .card-face,
.trick-scatter .trick-card-wrap.winner .card-face {
  outline: 2px solid #ffd54f;
  box-shadow:
    0 0 0 3px rgba(255, 213, 79, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4);
}
@media (max-height: 700px) {
  .table-felt {
    max-width: min(300px, 86vw);
    aspect-ratio: 3 / 4;
  }
  .game-room > .hand-area {
    max-height: min(24dvh, 150px);
  }
  .trick {
    min-height: 96px;
  }
}
@media (max-height: 560px) {
  .table-felt {
    max-width: min(260px, 84vw);
    aspect-ratio: 3 / 4;
    padding: 0.4rem 0.35rem;
  }
  .trick {
    min-height: 84px;
    height: auto;
  }
  .trick-stack,
  .trick-scatter {
    width: 54px;
    height: 74px;
  }
  .trick-stack .trick-card-wrap,
  .trick-scatter .trick-card-wrap {
    margin-left: -20px;
    margin-top: -29px;
  }
  .trick-stack .trick-card-wrap .card-face,
  .trick-scatter .trick-card-wrap .card-face {
    width: 40px !important;
    height: 58px !important;
  }
  #slot-me.player-slot.bottom {
    transform: none;
  }
  .game-room > .hand-area {
    max-height: min(28dvh, 140px);
  }
}

/* Keep overlay bid panel above hand on short screens */
@media (max-height: 600px) {
  .game-room > .action-panel {
    bottom: max(7.5rem, calc(26dvh + env(safe-area-inset-bottom, 0px))) !important;
    width: max-content;
    max-width: 96vw;
    padding: 4px 8px !important;
    max-height: none;
    height: auto;
  }
}

.player-slot.took-this-trick .name {
  box-shadow:
    0 0 0 2px #ffe082,
    0 0 16px rgba(255, 213, 79, 0.55);
  animation: youTookPulse 0.7s ease-out;
}
@keyframes youTookPulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.you-took-chip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.18rem);
  transform: translateX(-50%) scale(0.86);
  z-index: 8;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a5214, #2a1a08);
  border: 1.5px solid #ffe082;
  color: #fff4c7;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(255, 213, 79, 0.35);
  pointer-events: none;
}
.you-took-chip.pop {
  animation: youTookChipIn 0.45s ease-out both;
}
@keyframes youTookChipIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.trick-stack.trick-taken-fade {
  opacity: 0;
  transition: opacity 0.28s ease-out;
}

/* ===== Landscape theater — full-screen, no clipping ===== */
.landscape-theater {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-width: 100vw;
  max-height: 100svh;
  z-index: 99999;
  background: radial-gradient(ellipse at 50% 35%, #1b5e30 0%, #0d3d1f 50%, #0a1a10 100%);
  color: #f5e6c8;
  overflow: hidden;
  box-sizing: border-box;
  padding: max(0.3rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px))
    max(0.3rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
}
.lt-decor.lt-corner {
  position: absolute;
  font-size: clamp(0.9rem, 2.5vh, 1.4rem);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.lt-tl {
  top: 0.2rem;
  left: 0.35rem;
}
.lt-tr {
  top: 0.2rem;
  right: 0.35rem;
  transform: scaleX(-1);
}

.lt-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  /* header + meta + plays (flex) + footer + hand — all fit in 100% height */
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto
    auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    'header'
    'meta'
    'plays'
    'footer'
    'hand';
  gap: 0.25rem;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.lt-header {
  grid-area: header;
  text-align: center;
  flex-shrink: 0;
  padding: 0.05rem 0.25rem;
  min-width: 0;
}
.lt-title {
  display: block;
  font-size: clamp(0.85rem, 2.8vh, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffe9a8;
  text-shadow: 0 1px 3px #000;
  line-height: 1.2;
}
.lt-sub {
  display: block;
  font-size: clamp(0.55rem, 1.8vh, 0.72rem);
  opacity: 0.7;
  margin-top: 0.05rem;
  line-height: 1.25;
}

.lt-meta {
  grid-area: meta;
  font-size: clamp(0.58rem, 2vh, 0.78rem);
  font-weight: 700;
  color: #c8e6c9;
  text-align: center;
  line-height: 1.3;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.25);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.lt-plays {
  grid-area: plays;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(0.35rem, 1.5vw, 1.2rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
}

.lt-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: 22%;
  position: relative;
  z-index: 1;
  padding: 0.15rem 0.1rem;
  box-sizing: border-box;
}
.lt-order {
  font-size: clamp(0.48rem, 1.5vh, 0.6rem);
  opacity: 0.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
/* Trick cards scale to available viewport */
.lt-play .card-face {
  width: min(14vw, 22vh, 72px) !important;
  height: min(20vw, 32vh, 104px) !important;
  flex-shrink: 0;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 6px 14px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(201, 162, 39, 0.25);
  transform: none !important;
  position: relative;
  z-index: 1;
}
.lt-play.latest .card-face {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.25),
    0 6px 14px rgba(0, 0, 0, 0.4);
}
.lt-name {
  font-size: clamp(0.58rem, 1.9vh, 0.78rem);
  font-weight: 800;
  color: #ffe9a8;
  text-shadow: 0 1px 3px #000;
  width: 100%;
  max-width: 100%;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 2;
}
.lt-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  justify-content: center;
  min-height: 1em;
  position: relative;
  z-index: 2;
  width: 100%;
}
.lt-badge {
  font-size: clamp(0.45rem, 1.4vh, 0.55rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.05rem 0.22rem;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}
.lt-badge.lt-partner {
  background: #0288d1;
  color: #e1f5fe;
}
.lt-badge.lt-you {
  background: #8e24aa;
  color: #f3e5f5;
}
.lt-badge.lt-leading {
  background: #f9a825;
  color: #1a120b;
  animation: ltLeadPulse 1s ease-in-out infinite;
}
.lt-badge.lt-wins {
  background: #2e7d32;
  color: #c8e6c9;
}
@keyframes ltLeadPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
}

.lt-play.leading .card-face {
  outline: 3px solid #ffd54f !important;
  box-shadow:
    0 0 0 3px rgba(255, 213, 79, 0.45),
    0 0 16px rgba(255, 213, 79, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  z-index: 3;
}
.lt-play.winner .card-face {
  outline: 3px solid #69f0ae !important;
  box-shadow:
    0 0 0 3px rgba(105, 240, 174, 0.4),
    0 0 16px rgba(105, 240, 174, 0.65),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  z-index: 3;
}
.lt-play.partner .card-face {
  box-shadow:
    0 0 0 2px #4fc3f7,
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.lt-play.you .card-face {
  box-shadow:
    0 0 0 2px #ce93d8,
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.lt-play.partner .lt-name {
  color: #81d4fa;
}
.lt-play.you .lt-name {
  color: #e1bee7;
}
.lt-play.leading .lt-name {
  color: #ffe082;
}
.lt-play.winner .lt-name {
  color: #b9f6ca;
}

.lt-empty {
  font-size: clamp(0.7rem, 2.2vh, 0.9rem);
  opacity: 0.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border: 1px dashed rgba(201, 162, 39, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  margin: auto;
}

.lt-footer {
  grid-area: footer;
  font-size: clamp(0.6rem, 2vh, 0.8rem);
  font-weight: 700;
  color: #ffe082;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 3px #000;
  padding: 0.25rem 0.5rem;
  min-height: 1.2em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 4;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.lt-hand-wrap {
  grid-area: hand;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.25rem 0.2rem 0.2rem;
  box-sizing: border-box;
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  position: relative;
  z-index: 5;
  overflow: visible;
}
.lt-hand-label {
  font-size: clamp(0.52rem, 1.6vh, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 0.15rem;
  color: #ffe9a8;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}
.lt-hand {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.1rem, 0.6vw, 0.35rem);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding: 0.2rem 0.15rem 0.25rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.lt-hand .card-face {
  width: min(9.6vw, 18vh, 68px) !important;
  height: min(14.2vw, 26vh, 98px) !important;
  flex: 0 0 auto;
  font-size: 0.5rem;
  cursor: default;
  transform: none !important;
  position: relative;
  z-index: 1;
  border-width: 1.25px !important;
  box-sizing: border-box;
}
.lt-hand .card-face::before {
  inset: 2px !important;
  border-width: 1px !important;
  border-radius: 3px !important;
}
.lt-hand .card-face .c-bar {
  height: 3px !important;
}
.lt-hand .card-face .c-num {
  font-size: 1.55rem !important;
}
.lt-hand .card-face .c-color {
  font-size: 0.42rem !important;
}
.lt-hand .card-face.playable {
  cursor: pointer;
  box-shadow:
    0 0 0 2px #ffd54f,
    0 0 10px rgba(255, 213, 79, 0.6) !important;
}
.lt-hand .card-face.playable:active {
  opacity: 0.9;
}
.lt-hand .card-face.disabled {
  opacity: 0.36;
  filter: grayscale(0.4);
  pointer-events: auto;
  touch-action: manipulation;
}
.lt-hand .card-face.lt-waiting {
  opacity: 0.88;
}

/* Lobby/waiting room must remain the normal portrait-style UI.
   Landscape theater is an in-game surface only.  Do not hide #app merely
   because a phone happens to be held sideways while on the lobby screen. */
@media (orientation: landscape) {
  body:not(.in-game) .landscape-theater {
    display: none !important;
  }
  body:not(.in-game) #app {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Very short landscape (phones) — keep everything on-screen */
@media (orientation: landscape) and (max-height: 400px) {
  .lt-inner {
    gap: 0.12rem;
  }
  .lt-sub {
    display: none;
  }
  .lt-play .card-face {
    width: min(12vw, 20vh, 56px) !important;
    height: min(17vw, 28vh, 80px) !important;
  }
  .lt-hand .card-face {
    width: min(8.2vw, 15vh, 56px) !important;
    height: min(12vw, 22vh, 80px) !important;
    border-width: 1px !important;
  }
  .lt-meta,
  .lt-footer {
    padding: 0.12rem 0.35rem;
  }
}
@media (orientation: landscape) and (max-height: 320px) {
  .lt-title {
    font-size: 0.75rem;
  }
  .lt-hand-label {
    font-size: 0.5rem;
    margin-bottom: 0.05rem;
  }
}

/* Flash your name when it is your turn to play — strong, visible pulse */
@keyframes turnNameFlash {
  0%,
  100% {
    color: #1a120b !important;
    background: #ffd54f !important;
    box-shadow:
      0 0 0 3px #fff59d,
      0 0 18px rgba(255, 213, 79, 0.95) !important;
    transform: scale(1);
  }
  50% {
    color: #fffde7 !important;
    background: #e65100 !important;
    box-shadow:
      0 0 0 4px #ffcc80,
      0 0 28px rgba(255, 145, 0, 1) !important;
    transform: scale(1.18);
  }
}
#slot-me.turn-flash-seat .name,
.player-slot.bottom.turn-flash-seat .name,
#slot-me .name.turn-name-flash,
.player-slot.bottom .name.turn-name-flash {
  animation: turnNameFlash 0.4s ease-in-out 5 !important;
  z-index: 20 !important;
  position: relative !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  padding: 0.15rem 0.45rem !important;
}
@keyframes turnMsgFlash {
  0%,
  100% {
    background: rgba(20, 12, 6, 0.88);
    border-color: rgba(201, 162, 39, 0.4);
  }
  50% {
    background: rgba(255, 193, 7, 0.35);
    border-color: #ffd54f;
  }
}
#messageArea.message.turn-msg-flash,
.message.turn-msg-flash {
  animation: turnMsgFlash 0.4s ease-in-out 5 !important;
}

/* Table center polish — seats + trick visually balanced */
.table-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-felt {
  margin-left: auto;
  margin-right: auto;
}
.center-area {
  width: 100%;
  height: 100%;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}
.center-area .trick {
  margin: 0 auto;
}
.trick-caption,
.trick-count {
  text-align: center;
  width: 100%;
  max-width: 11rem;
  margin: 0.15rem auto 0;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffe9a8;
  text-shadow: 0 1px 3px #000;
  line-height: 1.25;
}
.player-slot {
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.player-slot .name {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.player-slot.bottom {
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
#slot-me.player-slot.bottom {
  align-items: center;
  justify-content: center;
}
.felt-badge {
  text-align: center;
}

/* ===== Last 5 tricks button (compact, no clip) ===== */
.last-tricks-btn {
  flex: 0 0 auto;
  order: 3;
  margin-left: 0.15rem;
  padding: 0.12rem 0.4rem !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #ffe9a8 !important;
  white-space: nowrap;
  cursor: pointer;
  max-width: 4.5rem;
  box-shadow: none;
}
.last-tricks-btn:active {
  background: rgba(255, 213, 79, 0.25) !important;
}
.top-bar .top-opts-toggle {
  order: 4;
}

/* ===== Full-page last 5 tricks ===== */
.trick-history-page {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: radial-gradient(ellipse at 50% 20%, #1b5e30 0%, #0d3d1f 40%, #0a1a10 100%);
  color: #f5e6c8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.6rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-left));
}
.trick-history-page.hidden {
  display: none !important;
}
.th-top {
  flex: 0 0 auto;
  text-align: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}
.th-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(0, 0, 0, 0.45);
  color: #ffe9a8;
  cursor: pointer;
}
.th-back:active {
  background: rgba(255, 213, 79, 0.2);
}
.th-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffe9a8;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px #000;
}
.th-hint {
  margin: 0.15rem 0 0;
  font-size: 0.65rem;
  opacity: 0.65;
}
.th-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 0.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.th-empty {
  margin: 2rem auto;
  text-align: center;
  opacity: 0.55;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.25rem;
  border: 1px dashed rgba(201, 162, 39, 0.35);
  border-radius: 12px;
  max-width: 16rem;
}
.th-trick {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 14px;
  padding: 0.55rem 0.5rem 0.65rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.th-trick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0 0.15rem;
}
.th-trick-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffe082;
  letter-spacing: 0.04em;
}
.th-trick-winner {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b9f6ca;
}
.th-trick-meta {
  width: 100%;
  font-size: 0.6rem;
  opacity: 0.75;
  color: #c8e6c9;
}
.th-plays {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.15rem 0;
}
.th-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3.6rem;
  flex: 1 1 0;
  max-width: 5.5rem;
}
.th-play .card-face {
  width: 48px !important;
  height: 70px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.th-play.winner .card-face {
  outline: 2px solid #69f0ae;
  box-shadow:
    0 0 0 3px rgba(105, 240, 174, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
.th-play-name {
  font-size: 0.62rem;
  font-weight: 800;
  color: #ffe9a8;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  max-width: 100%;
}
.th-play-ord {
  font-size: 0.5rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.th-play.winner .th-play-name {
  color: #b9f6ca;
}
@media (max-width: 380px) {
  .th-play .card-face {
    width: 40px !important;
    height: 58px !important;
  }
  .last-tricks-btn {
    font-size: 0.5rem !important;
    padding: 0.1rem 0.32rem !important;
  }
}

/* Landscape: This trick / Last 5 tabs */
.lt-tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}
.lt-tab {
  padding: 0.22rem 0.75rem;
  font-size: clamp(0.6rem, 1.8vh, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #c8e6c9;
  cursor: pointer;
}
.lt-tab.active {
  background: rgba(255, 213, 79, 0.28);
  color: #ffe9a8;
  border-color: rgba(255, 213, 79, 0.7);
}
.lt-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  gap: 0.2rem;
  overflow: hidden;
}
.lt-view.hidden {
  display: none !important;
}
.lt-view-last5 {
  justify-content: flex-start;
  overflow: hidden;
}
.lt-last5-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.55rem;
  padding: 0.25rem 0.15rem 0.35rem;
  box-sizing: border-box;
  align-items: stretch;
}
.lt-last5-empty {
  margin: auto;
  text-align: center;
  opacity: 0.55;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border: 1px dashed rgba(201, 162, 39, 0.35);
  border-radius: 10px;
}
.lt-th-card {
  flex: 0 0 auto;
  width: min(42vw, 220px);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 12px;
  padding: 0.4rem 0.35rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-sizing: border-box;
}
.lt-th-head {
  text-align: center;
  font-size: clamp(0.55rem, 1.6vh, 0.68rem);
  font-weight: 800;
  color: #ffe082;
  line-height: 1.25;
}
.lt-th-win {
  color: #b9f6ca;
  font-weight: 700;
}
.lt-th-meta {
  font-size: 0.52rem;
  opacity: 0.7;
  color: #c8e6c9;
  font-weight: 600;
}
.lt-th-plays {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 0.2rem;
  flex: 1 1 auto;
  align-items: flex-start;
}
.lt-th-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 0;
}
.lt-th-play .card-face {
  width: min(9vw, 14vh, 44px) !important;
  height: min(13vw, 20vh, 64px) !important;
}
.lt-th-play.winner .card-face {
  outline: 2px solid #69f0ae;
  box-shadow: 0 0 0 2px rgba(105, 240, 174, 0.35);
}
.lt-th-name {
  font-size: clamp(0.45rem, 1.3vh, 0.55rem);
  font-weight: 800;
  color: #ffe9a8;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
  max-width: 100%;
}
.lt-th-play.winner .lt-th-name {
  color: #b9f6ca;
}

/* Grid: header, view (trick or last5), hand */

#ltViewTrick,
#ltViewLast5 {
  grid-area: view;
}
.lt-hand-wrap {
  grid-area: hand !important;
}
.lt-header {
  grid-area: header !important;
}

/* Hide portrait-only last5 button styles if residual */
.top-bar .last-tricks-btn {
  display: none !important;
}
.trick-history-page {
  display: none !important;
}

/* Trump marker — gold star inside bottom of card */
.card-face .c-trump-tag {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #ffd54f;
  text-shadow:
    0 0 4px rgba(255, 193, 7, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  font-weight: 900;
}
.card-face.small .c-trump-tag {
  font-size: 0.55rem;
  bottom: 3px;
}
.card-face.is-trump {
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 213, 79, 0.3);
}

/* Kitty-only flash — hand not shown */
.discard-sheet-kitty-only {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 1.5rem 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.discard-sheet-kitty-only .discard-kitty {
  width: 100%;
  max-width: 100%;
}
.discard-kitty.kitty-flashing {
  animation: kittyPulse 0.7s ease-in-out 3;
  text-align: center;
}
.discard-kitty.kitty-flashing .kitty-cards {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.15rem, 1.2vw, 0.45rem);
  width: 100%;
  max-width: min(96vw, 420px);
  margin: 0 auto;
  overflow-x: visible;
}
.discard-kitty.kitty-flashing .kitty-flash-card,
.discard-kitty.kitty-flashing .kitty-cards .card-face {
  animation: kittyCardGlow 0.7s ease-in-out 3;
  /* Six cards in one row: scale to viewport */
  width: min(13.5vw, 52px) !important;
  height: min(19.5vw, 76px) !important;
  flex: 0 0 auto;
  max-width: none;
}
@keyframes kittyPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
@keyframes kittyCardGlow {
  0%,
  100% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 213, 79, 0.85),
      0 0 18px rgba(255, 213, 79, 0.55);
  }
}
/* Never animate bottom hand playable during discard */
body:has(#discardOverlay:not(.hidden)) .hand-area .card-face.playable,
body:has(#discardOverlay:not(.hidden)) #myHand .card-face {
  animation: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.lt-th-role {
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.04rem 0.2rem;
  border-radius: 999px;
  line-height: 1.15;
  margin-top: 0.05rem;
}
.lt-th-partner {
  background: #0288d1;
  color: #e1f5fe;
}
.lt-th-me {
  background: #8e24aa;
  color: #f3e5f5;
}
.lt-th-play.partner .lt-th-name {
  color: #81d4fa;
}
.lt-th-play.you .lt-th-name {
  color: #e1bee7;
}
.lt-th-play.partner .card-face {
  box-shadow: 0 0 0 2px #4fc3f7 !important;
}

.target-score-custom-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.45rem;
  width: 100%;
}
.target-score-custom-wrap.hidden {
  display: none !important;
}
.target-score-custom {
  margin-top: 0;
  width: 100%;
  max-width: 12rem;
  display: block;
  font-size: 16px !important; /* keep mobile keyboard stable */
  padding: 0.65rem 0.75rem !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
#targetScoreCustom:disabled {
  opacity: 1;
}

/* Trick won — cards swipe/pull into the winner's seat.
   Ancestors normally use overflow:hidden (game-room, table-wrap, table-felt),
   which clips the downward "swipe-me" animation into the hand. While a trick
   is resolving we force the whole chain visible so bottom-player wins animate. */
.trick,
.center-area,
.table-felt,
.table-wrap,
#trickArea {
  overflow: visible !important;
}
.game-room.trick-resolving,
.game-room.trick-resolving .table-wrap,
.game-room.trick-resolving .table-felt {
  overflow: visible !important;
}
.trick-stack.trick-swipe {
  overflow: visible !important;
  z-index: 60;
}
.trick-stack.trick-swipe .trick-card-wrap {
  animation-duration: 0.95s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--card-i, 0) * 0.06s);
  transition: none !important;
}

.trick-stack.swipe-top .trick-card-wrap {
  animation-name: trickSwipeTop;
}
.trick-stack.swipe-left .trick-card-wrap {
  animation-name: trickSwipeLeft;
}
.trick-stack.swipe-right .trick-card-wrap {
  animation-name: trickSwipeRight;
}
/* Bottom player (you): gather + pull down toward your seat — must stay visible over hand */
@keyframes trickSwipeMe {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg)) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(0, 8px) rotate(0deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(0, 130px) rotate(-8deg) scale(0.4);
  }
}
@keyframes trickSwipeTop {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg)) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(0, -8px) rotate(0deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(0, -120px) rotate(8deg) scale(0.4);
  }
}
@keyframes trickSwipeLeft {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg)) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(-10px, 0) rotate(-4deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-130px, 10px) rotate(-16deg) scale(0.4);
  }
}
@keyframes trickSwipeRight {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg)) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(10px, 0) rotate(4deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(130px, 10px) rotate(16deg) scale(0.4);
  }
}
.trick-stack.trick-swipe .trick-card-wrap.winner .card-face {
  outline: 2px solid #69f0ae;
  box-shadow:
    0 0 0 3px rgba(105, 240, 174, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.4);
}
.trick-stack.trick-swipe ~ .trick-caption {
  animation: captionWinPulse 0.95s ease-out;
  z-index: 61;
  position: relative;
}
@keyframes captionWinPulse {
  0% {
    opacity: 0.4;
    transform: scale(0.92);
  }
  40% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Hand stays below the swipe so bottom-player animation is visible */
.hand-area {
  z-index: 35;
}
#trickArea,
.trick {
  z-index: 55;
  position: relative;
}

/* Phase strip — no clip into scores or table */
.game-room .top-bar {
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.12rem !important;
  padding: 0.2rem 0.35rem 0.25rem !important;
  flex-shrink: 0;
  z-index: 50;
}
.top-bar-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.2rem 0.35rem !important;
  width: 100% !important;
  min-width: 0 !important;
}
.top-bar .scores {
  order: 1 !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  font-size: 0.7rem !important;
  gap: 0.35rem !important;
  color: #f5e6c8 !important;
}
.top-bar .scores span {
  margin-right: 0.15rem !important;
}
.top-bar .top-opts-toggle {
  order: 9 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
/* Blue/primary phase text on its own full-width chip — never overlaps scores */
.top-bar .phase-row {
  order: 5 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.15rem 0.45rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.45rem !important;
  box-sizing: border-box !important;
  color: #90caf9 !important;
  background: rgba(13, 71, 161, 0.35) !important;
  border: 1px solid rgba(144, 202, 249, 0.4) !important;
  border-radius: 8px !important;
  z-index: 2;
}
.top-bar .phase-row .phase {
  order: 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 6.5rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #90caf9 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.top-bar .phase-row .hor-connection-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #b9f6ca !important;
  font:
    700 0.62rem/1.1 system-ui,
    sans-serif !important;
  white-space: nowrap !important;
  pointer-events: none;
}
.top-bar .phase-row .hor-connection-badge.bad {
  color: #ffcc80 !important;
  background: transparent !important;
  border: 0 !important;
}
.top-bar .bid-progress {
  order: 6 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 0.65rem !important;
  justify-content: center;
  box-sizing: border-box !important;
}
.top-bar .trump {
  display: none !important;
}

/* Menu ☰ + exit arrow — clustered near bottom-right, above hand */
.game-room .in-game-leave {
  position: absolute !important;
  right: 0.45rem !important;
  left: auto !important;
  bottom: max(4.5rem, calc(18.4dvh + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 48 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  pointer-events: none !important;
  padding: 0 !important;
  width: auto !important;
}
.game-room .table-fs-btn {
  position: absolute !important;
  left: 0.45rem !important;
  right: auto !important;
  bottom: max(4.5rem, calc(18.4dvh + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 48 !important;
  pointer-events: auto !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  background: rgba(40, 28, 14, 0.9) !important;
  color: #ffe9a8 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.game-room .in-game-leave .leave-menu-btn,
.game-room .in-game-leave .top-opts-toggle {
  pointer-events: auto !important;
  order: 1;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  background: rgba(40, 28, 14, 0.9) !important;
  color: #ffe9a8 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
}
.game-room .in-game-leave .leave-exit-btn {
  pointer-events: auto !important;
  order: 2;
}
/* Top bar no longer hosts the hamburger */
.top-bar .top-opts-toggle {
  display: none !important;
}

/* Landscape theater ONLY while in an active game — never on lobby/waiting.
   Also suppressed while any text field is focused (keyboard open can
   make height < width and falsely match orientation:landscape). */
@media (orientation: landscape) {
  body.in-game:not(.input-focused) .landscape-theater {
    display: block !important;
  }
  body.in-game:not(.input-focused) .landscape-theater .lt-inner {
    display: grid;
  }
  body.in-game:not(.input-focused) #app {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Bid / claim panel must work over landscape theater.
     JS also moves #actionPanel to document.body while open. */
  body.in-game:not(.input-focused) #actionPanel:not(.hidden),
  body.in-game #actionPanel.lt-floating-panel:not(.hidden) {
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 50% !important;
    bottom: max(10vh, env(safe-area-inset-bottom, 0px) + 10px) !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 140000 !important;
    width: min(92vw, 22rem) !important;
    max-width: 92vw !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding-bottom: 0.2rem !important;
  }
}

/* Floating panel on body works in any orientation once re-parented */
#actionPanel.lt-floating-panel:not(.hidden) {
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 50% !important;
  bottom: max(10vh, env(safe-area-inset-bottom, 0px) + 10px) !important;
  transform: translateX(-50%) !important;
  z-index: 140000 !important;
  width: max-content !important;
  max-width: 96vw !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
#actionPanel.lt-floating-panel.bid-panel:not(.hidden),
#actionPanel.bid-panel:not(.hidden) {
  width: max-content !important;
  max-width: 96vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
}

/* Landscape-native bid bar — lives INSIDE the theater (z-index 99999) */
.lt-bid-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem auto 0.15rem;
  padding: 0.4rem 0.65rem 0.5rem;
  width: min(92vw, 22rem);
  max-width: 100%;
  box-sizing: border-box;
  background: linear-gradient(165deg, rgba(72, 48, 24, 0.98) 0%, rgba(32, 20, 10, 0.98) 100%);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  z-index: 20;
  position: relative;
}
.lt-bid-bar.hidden {
  display: none !important;
}
.lt-bid-title {
  font-size: clamp(0.65rem, 2vw, 0.8rem);
  font-weight: 700;
  color: #ffe9a8;
  text-align: center;
  letter-spacing: 0.03em;
}
.lt-bid-stepper {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.lt-bid-value {
  font-size: 1.45rem;
  font-weight: 800;
  min-width: 3rem;
  text-align: center;
  color: #ffd54f;
  font-variant-numeric: tabular-nums;
}
.lt-bid-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}
.lt-bid-actions .btn,
.lt-bid-stepper .btn {
  min-width: 2.6rem;
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  border-radius: 10px;
  pointer-events: auto;
  touch-action: manipulation;
}
/* Force theater off when typing or not in game */
body.input-focused .landscape-theater,
body:not(.in-game) .landscape-theater {
  display: none !important;
}
body.input-focused #app,
body:not(.in-game) #app {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ===== Shuffle + deal presentation ===== */
.shuffle-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.72);
  pointer-events: none;
}
@media (orientation: landscape) {
  .shuffle-overlay {
    z-index: 180000;
    background: rgba(6, 8, 5, 0.82);
  }
  .shuffle-overlay .shuffle-deck {
    width: 96px;
    height: 128px;
  }
  .shuffle-overlay .shuffle-card {
    width: 72px;
    height: 102px;
    margin: -51px 0 0 -36px;
  }
  .shuffle-overlay .shuffle-label {
    font-size: clamp(0.95rem, 3.4vh, 1.35rem);
  }
}
.shuffle-overlay.hidden {
  display: none !important;
}
.shuffle-stage {
  text-align: center;
}
.shuffle-deck {
  position: relative;
  width: 72px;
  height: 100px;
  margin: 0 auto 0.75rem;
}
.shuffle-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 80px;
  margin: -40px 0 0 -28px;
  border-radius: 6px;
  background-color: var(--card-back-bg, #0a0a0c);
  background-image: var(--card-back-image);
  background-size: var(--card-back-size, cover);
  background-position: var(--card-back-pos, center 28%);
  background-repeat: no-repeat;
  border: 2px solid var(--card-back-border, #c9a227);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.shuffle-card::after {
  content: none;
}
/* Shared face-down card back (nest, counts, shuffle, picker) */
.card-back,
.card-face.back {
  background-color: var(--card-back-bg, #0a0a0c) !important;
  background-image: var(--card-back-image) !important;
  background-size: var(--card-back-size, cover) !important;
  background-position: var(--card-back-pos, center 28%) !important;
  background-repeat: no-repeat !important;
  border-color: var(--card-back-border, #c9a227) !important;
  color: transparent !important;
}
.card-back::after,
.card-face.back::after {
  content: none;
}
.shuffle-overlay.shuffling .sc1 {
  animation: shuffleRiffle 0.45s ease-in-out infinite;
}
.shuffle-overlay.shuffling .sc2 {
  animation: shuffleRiffle 0.45s ease-in-out 0.05s infinite reverse;
}
.shuffle-overlay.shuffling .sc3 {
  animation: shuffleRiffle 0.5s ease-in-out 0.1s infinite;
}
.shuffle-overlay.shuffling .sc4 {
  animation: shuffleRiffle 0.42s ease-in-out 0.08s infinite reverse;
}
.shuffle-overlay.shuffling .sc5 {
  animation: shuffleRiffle 0.48s ease-in-out 0.12s infinite;
}
@keyframes shuffleRiffle {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-18px, -6px) rotate(-12deg);
  }
  50% {
    transform: translate(0, -2px) rotate(0deg);
  }
  75% {
    transform: translate(18px, -6px) rotate(12deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.shuffle-label {
  color: #ffe9a8;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Card dealing into hand — last card slides up */
#myHand .card-face.deal-in,
#ltHand .card-face.deal-in {
  animation: dealCardIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes dealCardIn {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.85) rotate(-6deg);
  }
  70% {
    opacity: 1;
    transform: translateY(4px) scale(1.04) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Custom play-to score confirmation */
.target-score-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.target-score-confirm {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.target-score-confirm:active {
  transform: translateY(1px);
}

/* Claim rest-of-tricks UI */
.trump-claim-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  overflow: visible !important;
  max-height: none !important;
  z-index: 220000 !important;
}
.trump-claim-panel .btn {
  margin: 0;
}
.trump-claim-panel span {
  font-weight: 600;
}

/* Lay-down animation: cards tossed onto the felt face-up */
.claim-laydown-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.claim-laydown-layer.fade-out {
  transition: opacity 0.8s ease;
  opacity: 0;
}
.claim-laydown-banner {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92vw, 38rem);
  max-width: 92vw;
  box-sizing: border-box;
  padding: 0.45rem 0.85rem;
  border-radius: 14px;
  background: rgba(12, 28, 18, 0.82);
  color: #e8f5e9;
  font-weight: 800;
  font-size: clamp(0.72rem, 2.8vw, 0.95rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  animation: claimBannerIn 0.35s ease-out both;
}
@keyframes claimBannerIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.claim-laid-card {
  position: absolute;
  width: 58px;
  height: 84px;
  left: 50%;
  top: 52%;
  margin-left: -29px;
  margin-top: -42px;
  opacity: 0;
  transform: translate(var(--fromX, 0px), var(--fromY, 100px)) rotate(var(--fromRot, 0deg))
    scale(0.55);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.4);
  animation: claimCardLay 0.72s cubic-bezier(0.2, 1.15, 0.35, 1) forwards;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes claimCardLay {
  0% {
    opacity: 0;
    transform: translate(var(--fromX, 0px), var(--fromY, 100px)) rotate(var(--fromRot, 0deg))
      scale(0.55);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(1);
  }
}

/* Keep legacy modal styles inert (modal is no longer shown for claims) */
.trump-showdown-modal {
  position: relative;
  z-index: 10001;
  max-width: 900px;
  width: min(94vw, 900px);
}
.trump-showdown-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 60vh;
  overflow: auto;
}
.showdown-team {
  padding: 0.65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.showdown-player-title {
  font-weight: 800;
  margin-bottom: 0.45rem;
}
.showdown-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}
.showdown-cards .card-face {
  transform: none;
  width: 58px;
  height: 82px;
  min-width: 58px;
}

/* Coach bid hints (landscape auction) — sit above the hand */
.gh-bid-hint {
  position: fixed;
  left: 50%;
  top: 8%;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(92vw, 28rem);
  width: max-content;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  background: rgba(16, 12, 8, 0.92);
  color: #f3e6c4;
  border: 1px solid rgba(201, 162, 39, 0.45);
  font-size: clamp(0.7rem, 2.6vw, 0.9rem);
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Nest last-trick capture animation */
.gh-nest-anim {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  padding: 0.75rem;
  box-sizing: border-box;
}
.gh-nest-anim.out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gh-nest-banner {
  color: #fff3c4;
  background: rgba(12, 28, 18, 0.92);
  border: 1px solid rgba(255, 213, 79, 0.7);
  border-radius: 12px;
  padding: 0.42rem 0.8rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  font-weight: 800;
  font-size: clamp(0.9rem, 3.5vw, 1.25rem);
  margin-bottom: 1rem;
  text-align: center;
  max-width: 92vw;
  white-space: normal;
  word-break: break-word;
  text-shadow: 0 2px 8px #000;
}
.gh-nest-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, 1vw, 10px);
  justify-content: center;
  align-items: flex-end;
  width: min(96vw, 640px);
  max-width: 96vw;
  overflow: visible;
  --nest-count: 6;
}
.gh-nest-card {
  flex: 0 0 auto;
  animation: ghNestIn 0.45s ease both;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.gh-nest-card .card-face {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 58 / 84;
}
.gh-nest-empty {
  color: #fff3c4;
  font-size: 0.85rem;
  opacity: 0.8;
}
@keyframes ghNestIn {
  from {
    transform: translateY(48px) scale(0.65);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Landscape bidding: auction board + coach highlight on hand */
.lt-bid-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: min(58vw, 26rem);
  max-width: 58vw;
  margin: 0 auto 0 1.2vw;
  justify-self: start;
}
.lt-bid-seat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.3rem 0.45rem;
  text-align: left;
}
.lt-bid-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
  background: #1a1208;
  border: 1px solid rgba(201, 162, 39, 0.45);
}
.lt-bid-copy {
  min-width: 0;
  flex: 1;
}
.lt-bid-turn {
  color: #1a1208;
  background: #ffd54f;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
}
.lt-bid-high {
  color: #ffd54f;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.lt-bid-seat.to-act {
  border-color: #ffd54f;
  box-shadow:
    0 0 0 2px rgba(255, 213, 79, 0.35),
    0 0 16px rgba(255, 213, 79, 0.25);
  animation: bidTurnPulse 1.1s ease-in-out infinite;
}
@keyframes bidTurnPulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 213, 79, 0.7),
      0 0 18px rgba(255, 213, 79, 0.35);
  }
}
.lt-bid-seat.partner {
  border-color: rgba(129, 212, 250, 0.55);
}
.lt-bid-seat.high {
  border-color: rgba(201, 162, 39, 0.75);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35);
}
.lt-bid-seat.passed {
  opacity: 0.55;
}
.lt-bid-seat.me {
  background: rgba(40, 70, 40, 0.35);
}
.lt-bid-name {
  font-size: clamp(0.55rem, 1.8vw, 0.72rem);
  font-weight: 700;
  color: #f5e6c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-bid-val {
  font-size: clamp(0.85rem, 2.6vw, 1.1rem);
  font-weight: 800;
  color: #ffe082;
  margin-top: 0.1rem;
}
.lt-hand .card-face.coach-highlight {
  /* Same gold system as legal plays */
}

/* Landscape discard picker: it must sit above the landscape theater and remain
   fully touchable after the bidder wins the auction. */
@media (orientation: landscape) {
  body.in-game .discard-overlay.landscape-discard-overlay {
    z-index: 120000 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-sheet {
    width: min(96vw, 900px);
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-actions {
    pointer-events: none;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-actions .btn {
    pointer-events: auto;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-pick {
    touch-action: manipulation;
  }
}

/* The claim message must never be clipped by a phone's narrow landscape
   viewport. */
@media (orientation: landscape) {
  .claim-laydown-banner {
    width: min(88vw, 42rem);
    max-width: 88vw;
    font-size: clamp(0.68rem, 2.25vw, 0.9rem);
    padding: 0.4rem 0.7rem;
  }
}

/* LANDSCAPE DISCARD PICKER
   Two-column color layout with a real card aspect ratio. Cards wrap and
   stay fully visible — never clip faces to force a no-scroll page. */
@media (orientation: landscape) {
  body.in-game .discard-overlay.landscape-discard-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: max(6px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-sheet {
    width: min(98vw, 900px) !important;
    max-width: 900px !important;
    max-height: none !important;
    min-height: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 4px 6px 6px !important;
    gap: 3px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-title {
    font-size: clamp(0.82rem, 2.7vh, 1.05rem) !important;
    line-height: 1.1 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-sub {
    font-size: clamp(0.68rem, 2.1vh, 0.82rem) !important;
    line-height: 1.05 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-groups {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: 4px !important;
    overflow: visible !important;
    padding: 2px 0 4px !important;
    flex: 0 0 auto !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-row {
    min-width: 0 !important;
    overflow: visible !important;
    padding: 3px 4px 4px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  /* A special-trump group gets the full width so Rook/Red 2/Red 1
     never get squeezed into a narrow half-column. */
  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-special {
    grid-column: 1 / -1 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-label {
    font-size: clamp(0.58rem, 1.7vh, 0.72rem) !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Fixed proportional footprint: 58:84.  Never stretch the card to fill
     a row; this is what keeps the entire face visible. */
  body.in-game .discard-overlay.landscape-discard-overlay .discard-pick {
    width: 50px !important;
    height: 72px !important;
    min-width: 50px !important;
    min-height: 72px !important;
    max-width: 50px !important;
    max-height: 72px !important;
    flex: 0 0 50px !important;
    box-sizing: border-box !important;
    transform-origin: center bottom !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-pick.selected {
    transform: translateY(-3px) !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-actions {
    padding: 3px 4px max(3px, env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-actions .btn {
    font-size: clamp(0.72rem, 2.1vh, 0.85rem) !important;
    padding: 4px 12px !important;
    min-height: 30px !important;
  }
}

/* Extra-short landscape phones: make the cards slightly smaller, but keep
   the exact card ratio and never clip them. */
@media (orientation: landscape) and (max-height: 360px) {
  body.in-game .discard-overlay.landscape-discard-overlay .discard-pick {
    width: 44px !important;
    height: 64px !important;
    min-width: 44px !important;
    min-height: 64px !important;
    max-width: 44px !important;
    max-height: 64px !important;
    flex-basis: 44px !important;
  }
}

/* FINAL LANDSCAPE BID + KITTY FIT
   Keep the bidder's complete hand visible. The kitty preview is a compact
   banner, never a full-screen card display, and the bid controls sit above
   the hand instead of covering it. */
@media (orientation: landscape) {
  /* Compact kitty preview shown after winning the bid. */
  body.in-game .discard-overlay.landscape-discard-overlay {
    background: rgba(8, 6, 4, 0.86) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-sheet {
    width: min(98vw, 900px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 3px 6px 6px !important;
    gap: 2px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(94vw, 720px) !important;
    max-width: min(94vw, 720px) !important;
    margin: 0 auto 6px !important;
    padding: 8px 10px 9px !important;
    overflow: visible !important;
    background: rgba(0, 0, 0, 0.38) !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-label {
    font-size: clamp(0.52rem, 1.55vh, 0.68rem) !important;
    line-height: 1 !important;
    margin: 0 0 1px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-cards {
    width: min(100%, 680px) !important;
    max-width: min(100%, 680px) !important;
    gap: clamp(3px, 0.7vw, 8px) !important;
    padding: 0 !important;
    margin: 2px auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-flash-card,
  body.in-game
    .discard-overlay.landscape-discard-overlay
    .landscape-kitty-banner
    .kitty-cards
    .card-face {
    width: clamp(44px, calc((100% - 40px) / 6), 78px) !important;
    height: auto !important;
    aspect-ratio: 58 / 84 !important;
    max-width: 78px !important;
    max-height: 116px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-hint {
    font-size: clamp(0.45rem, 1.25vh, 0.58rem) !important;
    line-height: 1 !important;
    margin: 1px 0 0 !important;
  }

  /* The discard picker begins immediately below the compact kitty banner. */
  body.in-game .discard-overlay.landscape-discard-overlay .discard-title {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }

  /* Keep the landscape bid controls clear of the hand at the bottom. */
  body.in-game #actionPanel:not(.hidden),
  body.in-game #actionPanel.lt-floating-panel:not(.hidden) {
    bottom: max(18vh, calc(env(safe-area-inset-bottom, 0px) + 68px)) !important;
    width: 300px !important;
    max-width: 92vw !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
  }

  body.in-game .lt-bid-bar {
    width: min(84vw, 20rem) !important;
    padding: 2px 5px 3px !important;
    gap: 2px !important;
    border-radius: 9px !important;
  }

  body.in-game .lt-bid-bar .lt-bid-title {
    font-size: clamp(0.5rem, 1.65vh, 0.68rem) !important;
    line-height: 1 !important;
  }

  body.in-game .lt-bid-bar .lt-bid-value {
    font-size: clamp(1rem, 3vh, 1.25rem) !important;
  }

  body.in-game .lt-bid-bar .lt-bid-actions .btn,
  body.in-game .lt-bid-bar .lt-bid-stepper .btn {
    min-height: 26px !important;
    padding: 2px 8px !important;
    font-size: clamp(0.58rem, 1.7vh, 0.72rem) !important;
  }

  /* Give the actual hand a guaranteed bottom strip. */
  body.in-game .landscape-theater .lt-hand-wrap {
    min-height: 64px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}

@media (orientation: landscape) and (max-height: 360px) {
  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-flash-card,
  body.in-game
    .discard-overlay.landscape-discard-overlay
    .landscape-kitty-banner
    .kitty-cards
    .card-face {
    width: 34px !important;
    height: 49px !important;
    max-width: 34px !important;
    max-height: 49px !important;
  }

  body.in-game #actionPanel:not(.hidden),
  body.in-game #actionPanel.lt-floating-panel:not(.hidden) {
    bottom: max(17vh, calc(env(safe-area-inset-bottom, 0px) + 60px)) !important;
  }
}

/* ===== Landscape trump choice: one-page compact layout ===== */
.lt-trump-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: min(96vw, 34rem);
  max-width: 100%;
  margin: 0.15rem auto;
  padding: 0.25rem 0.4rem;
  box-sizing: border-box;
  background: rgba(18, 12, 7, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  position: relative;
  z-index: 25;
}
.lt-trump-bar.hidden {
  display: none !important;
}
.lt-trump-title {
  font-size: clamp(0.62rem, 2vh, 0.82rem);
  font-weight: 800;
  color: #ffe9a8;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lt-trump-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
}
.lt-trump-buttons .trump-btn {
  min-width: 0 !important;
  min-height: 30px !important;
  height: auto !important;
  padding: 0.25rem 0.35rem !important;
  font-size: clamp(0.62rem, 1.9vh, 0.78rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}
.lt-trump-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0.2rem 0.5rem;
  text-align: center;
  font-size: clamp(0.62rem, 1.9vh, 0.8rem);
  color: #ffe9a8;
  opacity: 0.9;
}

@media (orientation: landscape) {
  body.in-game .landscape-theater .lt-inner {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 0.12rem !important;
  }
  body.in-game .landscape-theater .lt-header {
    padding: 0 !important;
  }
  body.in-game .landscape-theater .lt-header .lt-tabs {
    margin-bottom: 0 !important;
  }
  body.in-game .landscape-theater .lt-view {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.in-game .landscape-theater .lt-meta {
    min-height: 0 !important;
    padding: 0.05rem 0.25rem !important;
    font-size: clamp(0.55rem, 1.7vh, 0.7rem) !important;
  }
  body.in-game .landscape-theater .lt-plays {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.in-game .landscape-theater .lt-hand-wrap {
    min-height: 58px !important;
    max-height: 28vh !important;
    padding: 1px 2px 2px !important;
  }
  body.in-game .landscape-theater .lt-hand-label {
    font-size: clamp(0.48rem, 1.35vh, 0.6rem) !important;
    margin-bottom: 0 !important;
  }
  body.in-game .landscape-theater .lt-hand {
    padding: 1px 2px 1px !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    justify-content: center !important;
  }
  body.in-game .landscape-theater .lt-hand .card-face {
    width: min(7.6vw, 13.5vh, 48px) !important;
    height: min(10.9vw, 18.5vh, 69px) !important;
  }
  body.in-game .landscape-theater .lt-trump-bar {
    margin: 0.05rem auto !important;
    padding: 0.18rem 0.3rem !important;
    gap: 0.15rem !important;
  }
}

@media (orientation: landscape) and (max-height: 400px) {
  body.in-game .landscape-theater .lt-trump-title {
    font-size: 0.56rem !important;
  }
  body.in-game .landscape-theater .lt-trump-buttons .trump-btn {
    min-height: 24px !important;
    padding: 2px 4px !important;
    font-size: 0.58rem !important;
  }
  body.in-game .landscape-theater .lt-hand-wrap {
    min-height: 52px !important;
    max-height: 25vh !important;
  }
  body.in-game .landscape-theater .lt-hand .card-face {
    width: min(7vw, 12vh, 42px) !important;
    height: min(10vw, 16.5vh, 61px) !important;
  }
}

@media (orientation: landscape) and (max-height: 320px) {
  body.in-game .landscape-theater .lt-trump-bar {
    padding: 1px 3px !important;
    gap: 1px !important;
  }
  body.in-game .landscape-theater .lt-trump-buttons .trump-btn {
    min-height: 21px !important;
    font-size: 0.52rem !important;
  }
  body.in-game .landscape-theater .lt-hand .card-face {
    width: min(6.7vw, 10.5vh, 36px) !important;
    height: min(9.6vw, 14.5vh, 52px) !important;
  }
}

/* ===== Portrait table cards: slightly larger, safely contained ===== */
@media (orientation: portrait) {
  /* The table stack has room for this small increase without touching the
     player labels or the table edge. Keep the wrapper large enough for
     rotated/scattered cards as well. */
  .trick-stack,
  .trick-scatter {
    width: 76px !important;
    height: 102px !important;
  }
  .trick-stack .trick-card-wrap,
  .trick-scatter .trick-card-wrap {
    margin-left: -30px !important;
    margin-top: -43px !important;
  }
  .trick-stack .trick-card-wrap .card-face,
  .trick-scatter .trick-card-wrap .card-face {
    width: 60px !important;
    height: 86px !important;
  }

  /* Larger lettering, but keep it inside the card's inner frame and clear
     of the top/bottom color graphics. */
  .trick-stack .trick-card-wrap .card-face .c-stack:not(.red2-stack):not(.rook-stack),
  .trick-scatter .trick-card-wrap .card-face .c-stack:not(.red2-stack):not(.rook-stack) {
    inset: 8px 4px !important;
    gap: 1px !important;
  }
  .trick-stack .trick-card-wrap .card-face .c-num,
  .trick-scatter .trick-card-wrap .card-face .c-num {
    font-size: 2.55rem !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
  }
  .trick-stack .trick-card-wrap .card-face .c-color,
  .trick-scatter .trick-card-wrap .card-face .c-color {
    font-size: 0.54rem !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
  }
  .trick-stack .trick-card-wrap .card-face.red1 .c-num,
  .trick-scatter .trick-card-wrap .card-face.red1 .c-num {
    font-size: 2.35rem !important;
  }
  .trick-stack .trick-card-wrap .card-face.red2 .c-stack.red2-stack,
  .trick-scatter .trick-card-wrap .card-face.red2 .c-stack.red2-stack {
    inset: 0 !important;
    padding: 0 !important;
  }
  .trick-stack .trick-card-wrap .card-face.red2 .red2-img,
  .trick-scatter .trick-card-wrap .card-face.red2 .red2-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center center !important;
  }
  .trick-stack .trick-card-wrap .card-face .rook-bird,
  .trick-scatter .trick-card-wrap .card-face .rook-bird {
    max-width: 82% !important;
    max-height: 82% !important;
    object-fit: contain !important;
  }
}

/* Landscape discard — keep every card face fully visible (APK + browser).
   Use the JS-computed --discard-card-* sizes. Allow wrap. Never clip. */
@media (orientation: landscape) {
  body.in-game .discard-overlay.landscape-discard-overlay,
  .discard-overlay.landscape-discard-overlay {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 120000 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-sheet,
  .discard-overlay.landscape-discard-overlay .discard-sheet {
    width: min(98vw, 920px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 4px 6px 8px !important;
    box-sizing: border-box !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-groups,
  .discard-overlay.landscape-discard-overlay .discard-groups {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 4px !important;
    padding: 2px 0 !important;
    align-content: start !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-row,
  .discard-overlay.landscape-discard-overlay .discard-color-row {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 4px 5px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-special,
  .discard-overlay.landscape-discard-overlay .discard-color-special {
    grid-column: 1 / -1 !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-color-cards,
  .discard-overlay.landscape-discard-overlay .discard-color-cards {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .discard-pick,
  .discard-overlay.landscape-discard-overlay .discard-pick {
    width: var(--discard-card-w, 46px) !important;
    height: var(--discard-card-h, 66px) !important;
    min-width: var(--discard-card-w, 46px) !important;
    min-height: var(--discard-card-h, 66px) !important;
    max-width: var(--discard-card-w, 46px) !important;
    max-height: var(--discard-card-h, 66px) !important;
    flex: 0 0 var(--discard-card-w, 46px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner,
  .discard-overlay.landscape-discard-overlay .landscape-kitty-banner {
    display: flex !important;
    flex-direction: column !important;
    width: min(96vw, 640px) !important;
    margin: 0 auto 4px !important;
    padding: 4px 8px 6px !important;
  }

  body.in-game .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-flash-card,
  body.in-game
    .discard-overlay.landscape-discard-overlay
    .landscape-kitty-banner
    .kitty-cards
    .card-face,
  .discard-overlay.landscape-discard-overlay .landscape-kitty-banner .kitty-cards .card-face {
    width: min(9.5vw, 44px) !important;
    height: min(13.8vw, 64px) !important;
    max-width: 44px !important;
    max-height: 64px !important;
    overflow: hidden !important;
  }
}

/* ===== NEST CAPTURE: keep every kitty card visible ===== */
/* Must render above .landscape-theater (z-index: 99999) or the theater's
   translucent background paints over the nest cards, washing them out. */
.gh-nest-anim {
  z-index: 100050 !important;
}
.gh-nest-row {
  width: min(94vw, 760px) !important;
  max-width: 94vw !important;
  min-height: 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.gh-nest-card,
.gh-nest-card .card-face {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.gh-nest-card .card-face {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
@media (orientation: landscape) {
  .gh-nest-anim {
    padding: 4px !important;
  }
  .gh-nest-banner {
    font-size: clamp(0.72rem, 2.4vh, 1rem) !important;
    margin-bottom: 0.3rem !important;
    max-width: 94vw !important;
  }
  .gh-nest-row {
    width: min(94vw, 700px) !important;
    gap: 3px !important;
  }
}

/* ===== FINAL SCOREBOARD: full-page presentation without clipping ===== */
#scoreModal.modal {
  box-sizing: border-box !important;
  padding: 2.5vh 2.5vw !important;
  align-items: center !important;
  overflow: hidden !important;
}
#scoreModal .modal-content.scoreboard-modal {
  box-sizing: border-box !important;
  width: min(94vw, 760px) !important;
  max-width: 94vw !important;
  height: auto !important;
  max-height: 92dvh !important;
  overflow: hidden !important;
  padding: clamp(0.45rem, 1.2vw, 0.8rem) clamp(0.55rem, 1.5vw, 1rem) !important;
  border-radius: 14px !important;
}
#scoreModalBody {
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
#scoreModal .scoreboard {
  box-sizing: border-box !important;
  width: 100% !important;
  gap: clamp(0.18rem, 0.7vh, 0.38rem) !important;
}
#scoreModal .scoreboard-row {
  gap: 0.4rem !important;
}
#scoreModal .scoreboard-team {
  padding: clamp(0.22rem, 0.7vh, 0.4rem) 0.3rem !important;
}
#scoreModal .sb-total {
  font-size: clamp(1.2rem, 4.2vw, 2rem) !important;
}
#scoreModal .scoreboard-detail {
  font-size: clamp(0.62rem, 1.7vw, 0.8rem) !important;
  line-height: 1.2 !important;
  padding: 0.28rem 0.45rem !important;
}

.scoreboard-nest {
  width: 100%;
  box-sizing: border-box;
  margin: 0.05rem 0;
  padding: 0.22rem 0.3rem 0.28rem;
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  border-bottom: 1px solid rgba(201, 162, 39, 0.18);
  text-align: center;
  flex-shrink: 0;
}
.scoreboard-nest-title {
  font-size: clamp(0.62rem, 1.8vw, 0.78rem);
  line-height: 1.15;
  font-weight: 800;
  color: #d9b84a;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoreboard-nest-cards {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, 0.45vw, 5px);
  overflow: visible !important;
  box-sizing: border-box;
}
.scoreboard-nest-card {
  --nest-w: min(74px, calc((100% - 25px) / 6));
  width: var(--nest-w) !important;
  min-width: 0 !important;
  max-width: var(--nest-w) !important;
  height: calc(var(--nest-w) * 1.448) !important;
  min-height: 0 !important;
  flex: 0 0 var(--nest-w) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 5px !important;
}
.scoreboard-nest-card .c-num {
  font-size: clamp(0.45rem, 2vw, 0.72rem) !important;
}
.scoreboard-nest-card .c-color {
  font-size: clamp(0.28rem, 1vw, 0.38rem) !important;
}
.scoreboard-nest-card .rook-bird,
.scoreboard-nest-card .c-center {
  font-size: clamp(0.48rem, 2vw, 0.78rem) !important;
}

@media (orientation: landscape) {
  #scoreModal.modal {
    padding: 2vh 2vw !important;
  }
  #scoreModal .modal-content.scoreboard-modal {
    width: min(94vw, 820px) !important;
    max-height: 92dvh !important;
  }
  #scoreModal .scoreboard-nest-card {
    --nest-w: min(76px, calc((100% - 25px) / 6));
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #scoreModal .modal-content.scoreboard-modal {
    max-height: 91dvh !important;
    padding: 0.3rem 0.5rem !important;
  }
  #scoreModal .scoreboard-modal h2 {
    font-size: 0.9rem !important;
    margin-bottom: 0.15rem !important;
  }
  #scoreModal .score-banner {
    font-size: 0.75rem !important;
    padding: 0.12rem 0.25rem !important;
  }
  #scoreModal .scoreboard-goal {
    font-size: 0.62rem !important;
  }
  #scoreModal .scoreboard-detail {
    font-size: 0.58rem !important;
    padding: 0.2rem 0.3rem !important;
  }
  #scoreModal .scoreboard-nest {
    padding: 0.12rem 0.2rem 0.16rem;
  }
  #scoreModal .scoreboard-nest-title {
    font-size: 0.58rem;
    margin-bottom: 0.12rem;
  }
  #scoreModal .scoreboard-nest-card {
    --nest-w: min(62px, calc((100% - 20px) / 6));
  }
  #scoreModal .score-modal-actions {
    margin-top: 0.18rem;
    gap: 0.25rem;
  }
  #scoreModal .score-modal-actions .btn {
    padding: 0.22rem 0.5rem;
    font-size: 0.68rem;
    min-height: 0;
  }
}

/* ===== DEFINITIVE NEST SCOREBOARD =====
   Deliberately uses a new class name. This avoids every previous nest-card rule. */
#scoreModal .scoreboard-nest-final {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0.2rem 0 !important;
  padding: 0.28rem 0.35rem 0.35rem !important;
  border: 1px solid rgba(201, 162, 39, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.16) !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#scoreModal .scoreboard-nest-final-title {
  display: block !important;
  color: #d9b84a !important;
  font-weight: 900 !important;
  font-size: clamp(0.65rem, 1.8vw, 0.82rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 0.22rem !important;
}
#scoreModal .scoreboard-nest-final-cards {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#scoreModal .nest-final-card {
  display: block !important;
  position: relative !important;
  flex: 0 1 auto !important;
  width: clamp(34px, 9vw, 58px) !important;
  height: calc(clamp(34px, 9vw, 58px) * 1.448) !important;
  min-width: 0 !important;
  max-width: 58px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#scoreModal .nest-final-card .card-face {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}
#scoreModal .nest-final-card .c-num {
  font-size: clamp(0.48rem, 2vw, 0.75rem) !important;
}
#scoreModal .nest-final-card .c-color {
  font-size: clamp(0.28rem, 1vw, 0.4rem) !important;
}
#scoreModal .nest-final-card .rook-bird,
#scoreModal .nest-final-card .c-center {
  font-size: clamp(0.48rem, 2vw, 0.8rem) !important;
}
#scoreModal .nest-final-empty {
  font-size: 0.7rem;
  opacity: 0.6;
  padding: 0.35rem;
}
@media (orientation: landscape) {
  #scoreModal .nest-final-card {
    width: clamp(30px, 7vh, 54px) !important;
    height: calc(clamp(30px, 7vh, 54px) * 1.448) !important;
  }
}

/* ===== Landscape score / end-game ===== */
@media (orientation: landscape) {
  /* Keep all important overlays above the landscape theater. */
  .capture-overlay,
  .win-overlay,
  .cele-page {
    z-index: 200000 !important;
  }

  .lt-scorebar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.35rem, 1.4vw, 1rem);
    min-height: 1.25rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid rgba(201, 162, 39, 0.32);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: #ffe9a8;
    font-size: clamp(0.58rem, 1.8vh, 0.78rem);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
  }
  .lt-scorebar b {
    color: #fff;
    font-size: 1.12em;
  }

  /* Full-page landscape hand-result/end-game screen. */
  .lt-endgame {
    position: absolute !important;
    inset: 0.35rem !important;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    overflow: auto;
  }
  .lt-endgame.hidden {
    display: none !important;
  }
  .lt-endgame-banner {
    width: min(92vw, 720px);
    max-width: 100%;
    max-height: calc(100dvh - 0.8rem);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: clamp(0.45rem, 1.5vh, 0.8rem) clamp(0.6rem, 2vw, 1rem);
    border: 2px solid rgba(201, 162, 39, 0.7);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(38, 26, 13, 0.97), rgba(10, 17, 11, 0.97));
    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.55),
      0 0 25px rgba(201, 162, 39, 0.12);
    text-align: center;
  }
  .lt-endgame-banner.set {
    border-color: rgba(239, 154, 154, 0.7);
  }
  .lt-endgame-banner.made {
    border-color: rgba(165, 214, 167, 0.7);
  }
  .lt-endgame-title {
    color: #ffd54f;
    font-weight: 900;
    font-size: clamp(0.9rem, 3.2vh, 1.35rem);
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-bottom: 0.35rem;
  }
  .lt-endgame-scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.35rem, 2vw, 1.1rem);
  }
  .lt-endgame-scores > div:not(.lt-endgame-vs) {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
  }
  .lt-endgame-scores span {
    color: #ffe9a8;
    font-size: clamp(0.65rem, 2vh, 0.85rem);
    font-weight: 800;
  }
  .lt-endgame-scores b {
    color: #fff;
    font-size: clamp(1.35rem, 6vh, 2.35rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .lt-endgame-scores small {
    opacity: 0.72;
    font-size: clamp(0.5rem, 1.55vh, 0.68rem);
  }
  .lt-endgame-vs {
    color: #c9a227;
    font-weight: 900;
    font-size: clamp(0.55rem, 1.8vh, 0.75rem);
  }
  .lt-endgame-detail {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    color: #d7ccc0;
    font-size: clamp(0.5rem, 1.65vh, 0.72rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lt-endgame-nest {
    margin-top: 0.35rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(201, 162, 39, 0.18);
  }
  .lt-endgame-nest > span {
    display: block;
    color: #d9b84a;
    font-size: clamp(0.5rem, 1.6vh, 0.7rem);
    font-weight: 800;
    margin-bottom: 0.18rem;
  }
  .lt-endgame-nest > div {
    display: flex;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
  }
  .lt-endgame-nest-card {
    width: clamp(27px, 5vh, 42px);
    height: calc(clamp(27px, 5vh, 42px) * 1.448);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 4px;
  }
  .lt-endgame-nest-card .card-face {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  .lt-endgame-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    color: #c8bfb5;
    font-size: clamp(0.5rem, 1.6vh, 0.7rem);
  }
  .lt-endgame-actions .btn {
    padding: 0.25rem 0.7rem;
    min-height: 0;
    font-size: clamp(0.55rem, 1.7vh, 0.72rem);
  }

  /* Make the actual final winner screen comfortable in landscape. */
  .win-overlay {
    padding: 1rem 2vw !important;
  }
  .win-banner {
    width: min(76vw, 500px) !important;
    max-width: 500px !important;
    padding: clamp(0.8rem, 3vh, 1.5rem) 1.25rem !important;
  }
  .win-banner h1 {
    font-size: clamp(1.35rem, 5vh, 2.4rem);
  }
}

/* Very short landscape phones: preserve the original landscape card sizing. */
/* Landscape capture celebrations sit above the theater and use its full
   available screen rather than being trapped behind the hidden app. */
@media (orientation: landscape) {
  .capture-overlay {
    align-items: center !important;
    justify-content: center !important;
  }
  .capture-card {
    width: min(72vw, 430px) !important;
    max-width: 86vw !important;
  }
}

/* ===== Portrait top score: running sandbag total ===== */
@media (orientation: portrait) {
}

/* Red 2 — one framed 2:3 asset for hand, table, portrait, landscape.
   Never inset/scale/offset the bitmap; the art already includes frame + both 2s. */
.card-face.red2,
.trick-stack .trick-card-wrap .card-face.red2,
.trick-scatter .trick-card-wrap .card-face.red2,
.hand > .card-face.red2,
.lt-play .card-face.red2,
.discard-pick.card-face.red2,
.kitty-cards .card-face.red2 {
  overflow: hidden !important;
  padding: 0 !important;
  background: #d31114 !important;
}
.card-face.red2 .c-stack.red2-stack,
.trick-stack .trick-card-wrap .card-face.red2 .c-stack.red2-stack,
.trick-scatter .trick-card-wrap .card-face.red2 .c-stack.red2-stack,
.hand > .card-face.red2 .c-stack.red2-stack,
.lt-play .card-face.red2 .c-stack.red2-stack {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.card-face.red2 .red2-img,
.trick-stack .trick-card-wrap .card-face.red2 .red2-img,
.trick-scatter .trick-card-wrap .card-face.red2 .red2-img,
.hand > .card-face.red2 .red2-img,
.lt-play .card-face.red2 .red2-img,
.discard-pick.card-face.red2 .red2-img,
.kitty-cards .card-face.red2 .red2-img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
}

/* Landscape theater: Rook + Red 2 art must fill the face, not sit in the
   numbered-card stack inset or stretch on short phone heights. */
@media (orientation: landscape) {
  .landscape-theater .card-face.rook,
  .landscape-theater .card-face.red2,
  .landscape-theater .card-face.red2-art {
    overflow: hidden !important;
    padding: 0 !important;
  }
  .landscape-theater .card-face.rook .c-stack,
  .landscape-theater .card-face.rook .c-stack.rook-stack,
  .landscape-theater .card-face.red2 .c-stack,
  .landscape-theater .card-face.red2 .c-stack.red2-stack,
  .landscape-theater .card-face.red2-art .c-stack {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
  }
  .landscape-theater .card-face.rook .rook-bird-img,
  .landscape-theater .card-face.red2 .red2-img,
  .landscape-theater .card-face.red2-art .red2-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    transform: none !important;
    border-radius: 0 !important;
    display: block !important;
  }
  .landscape-theater .card-face.rook .c-num,
  .landscape-theater .card-face.rook .c-color,
  .landscape-theater .card-face.rook .c-center,
  .landscape-theater .card-face.rook .c-bar,
  .landscape-theater .card-face.red2 .c-num,
  .landscape-theater .card-face.red2 .c-color,
  .landscape-theater .card-face.red2 .c-center,
  .landscape-theater .card-face.red2 .c-bar {
    display: none !important;
  }
}

/* ===== Full-page match celebration ===== */
.cele-page {
  position: fixed;
  inset: 0;
  z-index: 210000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(0.6rem, env(safe-area-inset-top)) 0.7rem max(0.7rem, env(safe-area-inset-bottom));
  overflow: auto;
  color: #fff8e7;
  background: #0b0704;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100svh;
}
.cele-page.hidden {
  display: none !important;
}
.cele-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 20% 90%, rgba(80, 20, 120, 0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(180, 40, 20, 0.22) 0%, transparent 42%),
    linear-gradient(180deg, #2a1608 0%, #120c08 55%, #070504 100%);
  animation: celeBgPulse 4.5s ease-in-out infinite;
}
@keyframes celeBgPulse {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.15) brightness(1.08);
  }
}
.cele-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cele-confetti span {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.92;
  animation: celeFall 2.8s linear forwards;
}
@keyframes celeFall {
  to {
    transform: translateY(110vh) rotate(420deg);
    opacity: 0.15;
  }
}
.cele-inner {
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-height: 100%;
}
.cele-head {
  text-align: center;
  width: 100%;
  animation: celeHeadIn 0.55s cubic-bezier(0.2, 1.15, 0.35, 1) both;
}
@keyframes celeHeadIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cele-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd54f;
  font-weight: 800;
  opacity: 0.9;
}
.cele-head h1 {
  font-size: clamp(1.55rem, 6.4vw, 2.35rem);
  color: #ffe082;
  text-shadow: 0 2px 16px rgba(255, 200, 0, 0.35);
  margin: 0.15rem 0 0.1rem;
  line-height: 1.1;
}
.cele-head p {
  color: #f3e0b8;
  font-size: clamp(0.82rem, 3.2vw, 0.98rem);
  opacity: 0.92;
}
.cele-stage {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.cele-trick {
  width: 100%;
  background: linear-gradient(165deg, rgba(50, 32, 16, 0.88), rgba(18, 10, 6, 0.94));
  border: 2px solid rgba(201, 162, 39, 0.7);
  border-radius: 16px;
  padding: 0.75rem 0.7rem 0.85rem;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 213, 79, 0.12);
  animation: celeTrickIn 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes celeTrickIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The biggest trick is the finale: start tiny and zoom smoothly to full size.
   This class is shared by the portrait and landscape celebration views. */
.cele-trick.highest-trick {
  animation: celeHighestTrickIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center center;
}
@keyframes celeHighestTrickIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.22);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1.045);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.cele-trick.out {
  animation: celeTrickOut 0.35s ease-in both;
}
@keyframes celeTrickOut {
  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
}
.cele-trick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.7rem;
  margin-bottom: 0.65rem;
}
.cele-trick-label {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd54f;
  font-size: 0.78rem;
}
.cele-trick-taker {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 800;
  color: #fff;
}
.cele-trick-taker em {
  font-style: normal;
  color: #ffe082;
}
.cele-trick-meta {
  width: 100%;
  font-size: 0.75rem;
  color: #d7c39a;
  opacity: 0.9;
}
.cele-plays {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: end;
}
.cele-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  opacity: 0;
  transform: translateY(28px) scale(0.82);
}
.cele-play.in {
  animation: celeCardIn 0.48s cubic-bezier(0.18, 1.2, 0.32, 1) both;
}
@keyframes celeCardIn {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(-8deg) scale(0.72);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) rotate(2deg) scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cele-play .card-face {
  width: min(18vw, 86px);
  height: calc(min(18vw, 86px) * 1.42);
  font-size: clamp(0.85rem, 3.4vw, 1.15rem);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.cele-play.winner .card-face {
  box-shadow:
    0 0 0 3px #ffd54f,
    0 0 22px rgba(255, 213, 79, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.45);
  animation: celeWinnerPulse 0.9s ease-in-out infinite;
  transform: translateY(-6px);
}
@keyframes celeWinnerPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}
.cele-play-name {
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cele-play.winner .cele-play-name {
  color: #c8f7c5;
}
.cele-crown {
  font-size: 1.05rem;
  line-height: 1;
  animation: celeCrownPop 0.45s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}
@keyframes celeCrownPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cele-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding-top: 0.15rem;
  animation: celeHeadIn 0.4s ease both;
}
.cele-actions.hidden {
  display: none !important;
}
.cele-actions .btn {
  min-width: 9.5rem;
  min-height: 2.6rem;
  font-size: 1rem;
}
.cele-empty {
  text-align: center;
  padding: 1.2rem 0.6rem;
  color: #f3e0b8;
}

@media (orientation: landscape) {
  .cele-page {
    padding: 0.4rem 0.8rem 0.45rem;
  }
  .cele-inner {
    width: min(860px, 100%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
  }
  .cele-head {
    width: 100%;
  }
  .cele-head h1 {
    font-size: clamp(1.2rem, 4.6vh, 1.9rem);
  }
  .cele-stage {
    width: min(640px, 100%);
    flex: 1 1 auto;
  }
  .cele-trick {
    padding: 0.5rem 0.7rem 0.6rem;
  }
  .cele-play .card-face {
    width: min(18vw, 26vh, 112px);
    height: calc(min(18vw, 26vh, 112px) * 1.4);
  }
  .cele-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cele-bg,
  .cele-head,
  .cele-trick,
  .cele-play,
  .cele-play.winner .card-face,
  .cele-crown,
  .cele-confetti span {
    animation: none !important;
  }
  .cele-play {
    opacity: 1;
    transform: none;
  }
}

/* Optional remaining-hand reveal on the after-hand scoreboard */
.claim-remaining-hands {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.08);
}
.claim-remaining-title {
  font-weight: 800;
  margin-bottom: 6px;
}
.claim-remaining-meta {
  font-size: 0.88rem;
  color: #f0e0a8;
  margin: 0 0 12px;
  line-height: 1.3;
}
.lt-remaining-meta {
  font-size: 0.82rem;
  color: #f0e0a8;
  margin: 0.15rem 0 0.45rem;
  text-align: center;
}
.claim-remaining-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.claim-remaining-player {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.claim-remaining-player-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.claim-remaining-player-title span {
  opacity: 0.72;
}
.claim-remaining-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.claim-remaining-card {
  width: 42px;
  height: 60px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 7px;
}
.claim-remaining-card .c-num {
  font-size: 1.7rem;
}
.claim-remaining-card .c-color {
  font-size: 0.4rem;
}
.claim-remaining-none {
  opacity: 0.65;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .claim-remaining-grid {
    grid-template-columns: 1fr;
  }
  .claim-remaining-card {
    width: 38px;
    height: 54px;
  }
  .claim-remaining-card .c-num {
    font-size: 1.5rem;
  }
}

/* ===== Card backs (default = current white rook photo, no wordmark) ===== */
body,
body.cardback-classic {
  --card-back-bg: #0a0a0c;
  --card-back-border: #c9a227;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-classic.jpg');
}
body.cardback-raven {
  --card-back-bg: #0a0c12;
  --card-back-border: #c9a227;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-raven.jpg');
}
body.cardback-griffin {
  --card-back-bg: #0e2418;
  --card-back-border: #d4b24a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-griffin.jpg');
}
body.cardback-felt {
  --card-back-bg: #12331f;
  --card-back-border: #d4b24a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-felt.jpg');
}
body.cardback-crimson {
  --card-back-bg: #4a0b12;
  --card-back-border: #e0bc3a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-crimson.jpg');
}
body.cardback-midnight {
  --card-back-bg: #12102a;
  --card-back-border: #c9a227;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-midnight.jpg');
}
body.cardback-faceoff {
  --card-back-bg: #0a0c12;
  --card-back-border: #d4b24a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-faceoff.jpg');
}
body.cardback-clash {
  --card-back-bg: #0a0c12;
  --card-back-border: #e0bc3a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-clash.jpg');
}
body.cardback-aerial {
  --card-back-bg: #0a0c12;
  --card-back-border: #c9a227;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-aerial.jpg');
}
body.cardback-dive {
  --card-back-bg: #0e2418;
  --card-back-border: #d4b24a;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-dive.jpg');
}
body.cardback-aftermath {
  --card-back-bg: #0a0c12;
  --card-back-border: #c9a227;
  --card-back-pos: center center;
  --card-back-size: cover;
  --card-back-image: url('assets/images/cardback-aftermath.jpg');
}

/* Remaining-hand reveal: keep Rook / Red 2 art visible on tiny scoreboard cards */
#scoreModal.showing-remaining .modal-content.scoreboard-modal,
#scoreModal.showing-remaining #scoreModalBody {
  overflow: auto;
}
body.remaining-open #landscapeTheater,
body.remaining-open .lt-table,
body.remaining-open .lt-felt,
body.remaining-open #ltEndGame {
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (orientation: landscape) {
  #scoreModal.showing-remaining.modal,
  #scoreModal.showing-remaining.score-modal-top {
    background: #07080c !important;
    z-index: 260000 !important;
    padding: 1.2vh 1.5vw !important;
  }
  #scoreModal.showing-remaining .modal-content.scoreboard-modal {
    width: min(96vw, 1100px) !important;
    max-width: 96vw !important;
    max-height: 96dvh !important;
    background: #16110c !important;
    overflow: hidden !important;
  }
  #scoreModal.showing-remaining #scoreModalBody {
    overflow: hidden !important;
    max-height: none !important;
  }
  #scoreModal.showing-remaining .claim-remaining-hands {
    background: transparent;
    padding: 4px 2px 0;
    margin-top: 4px;
  }
  #scoreModal.showing-remaining .claim-remaining-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px;
  }
  #scoreModal.showing-remaining .claim-remaining-player {
    overflow: visible;
  }
  #scoreModal.showing-remaining .claim-remaining-cards {
    flex-wrap: wrap;
  }
  #scoreModal.showing-remaining .claim-remaining-card {
    width: min(46px, 7.2vw);
    height: min(66px, 10.4vw);
    overflow: hidden;
  }
  #scoreModal.showing-remaining .claim-remaining-meta {
    margin-bottom: 6px;
  }
}
.claim-remaining-card {
  overflow: hidden;
  padding: 0;
}
.claim-remaining-card.rook,
.claim-remaining-card.red2,
.claim-remaining-card.red2-art {
  padding: 0 !important;
}
.claim-remaining-card .rook-stack,
.claim-remaining-card .red2-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.claim-remaining-card .rook-bird-img,
.claim-remaining-card .red2-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block !important;
}
.claim-remaining-card.red2 .red2-img,
.claim-remaining-card.red2-art .red2-img {
  object-fit: fill;
}
.claim-remaining-card.rook .c-num,
.claim-remaining-card.rook .c-color,
.claim-remaining-card.red2 .c-num,
.claim-remaining-card.red2 .c-color {
  display: none !important;
}

@media (max-width: 420px) {
}

/* Final sizing fixes: keep revealed cards and nest cards fully visible. */
#scoreModal.showing-remaining .modal-content.scoreboard-modal {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 1rem !important;
}
#scoreModal.showing-remaining #scoreModalBody {
  overflow: visible !important;
  padding-bottom: 0.5rem !important;
}
.claim-remaining-cards {
  overflow: visible !important;
  padding-bottom: 3px;
}
.claim-remaining-card {
  width: clamp(30px, 8vw, 40px) !important;
  height: auto !important;
  aspect-ratio: 58 / 84 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
.claim-remaining-card .rook-bird-img,
.claim-remaining-card .red2-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.claim-remaining-card.red2 .red2-img,
.claim-remaining-card.red2-art .red2-img {
  object-fit: fill !important;
}

/* Ensure the nest row itself always has enough width for every card. */
.gh-nest-row {
  box-sizing: border-box !important;
  padding: 0 2px !important;
  gap: 3px !important;
}
.gh-nest-card .card-face {
  box-sizing: border-box !important;
  aspect-ratio: 58 / 84 !important;
  height: auto !important;
}
@media (max-width: 420px) {
  .gh-nest-row {
    width: 98vw !important;
    max-width: 98vw !important;
    gap: 2px !important;
  }
  .gh-nest-card .card-face {
    min-width: 0 !important;
  }
}

/* ===== DEDICATED REMAINING-CARDS SCREEN ===== */
/* When opened, the scoreboard is replaced by this full-size view. Cards are
   allowed to wrap naturally instead of being compressed/squashed. */
#scoreModal.showing-remaining .modal-content.scoreboard-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(98vw, 1100px) !important;
  max-width: 1100px !important;
  height: min(94dvh, 900px) !important;
  max-height: 94dvh !important;
  overflow: hidden !important;
}
#scoreModal.showing-remaining #scoreModalBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.45rem !important;
}
#scoreModal.showing-remaining .score-modal-actions {
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  margin-top: 0.35rem !important;
  padding-top: 0.35rem !important;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
}
#scoreModal.showing-remaining .claim-remaining-hands {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
}
#scoreModal.showing-remaining .claim-remaining-title {
  flex: 0 0 auto !important;
  margin: 0 0 0.5rem !important;
  font-size: clamp(0.82rem, 2.8vw, 1.15rem) !important;
  text-align: center !important;
}
#scoreModal.showing-remaining .claim-remaining-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}
#scoreModal.showing-remaining .claim-remaining-player {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0.45rem !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}
#scoreModal.showing-remaining .claim-remaining-player-title {
  flex: 0 0 auto !important;
  margin-bottom: 0.35rem !important;
  font-size: clamp(0.68rem, 2vw, 0.9rem) !important;
}
#scoreModal.showing-remaining .claim-remaining-cards {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 2px !important;
}
#scoreModal.showing-remaining .claim-remaining-card {
  width: clamp(32px, 7vw, 48px) !important;
  height: auto !important;
  aspect-ratio: 58 / 84 !important;
  flex: 0 0 clamp(32px, 7vw, 48px) !important;
  max-width: 48px !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  #scoreModal.showing-remaining .modal-content.scoreboard-modal {
    width: 100vw !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
  }
  #scoreModal.showing-remaining .claim-remaining-grid {
    gap: 0.35rem !important;
  }
  #scoreModal.showing-remaining .claim-remaining-card {
    width: clamp(29px, 10vw, 40px) !important;
    flex-basis: clamp(29px, 10vw, 40px) !important;
  }
}

/* ===== NEST CAPTURE: calculate card size from the actual number of cards ===== */
.gh-nest-row {
  width: min(94vw, 760px) !important;
  max-width: 94vw !important;
  gap: clamp(2px, 0.55vw, 6px) !important;
}
.gh-nest-card .card-face {
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .gh-nest-row {
    width: 96vw !important;
    max-width: 96vw !important;
    gap: 2px !important;
  }
}

/* Final remaining-card screen: scoreboard is replaced, not shown underneath. */

/* Remaining cards is a true replacement view; never show the scoreboard behind it. */
#scoreModal.showing-remaining .scoreboard {
  display: none !important;
}
#scoreModal.showing-remaining #scoreModalBody {
  overflow: auto !important;
}
#scoreModal.showing-remaining .claim-remaining-hands {
  display: flex !important;
}

/* Score / remaining-card modal must sit above the landscape theater. */
#scoreModal.score-modal-top,
#scoreModal.modal.score-modal-top {
  z-index: 130000 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#scoreModal.showing-remaining #scoreModalNext,
#scoreModal.showing-remaining #scoreModalRevealHands,
#scoreModal.showing-remaining #scoreModalLast3,
#scoreModal.showing-remaining .score-modal-actions {
  display: flex !important;
}
#scoreModal.showing-remaining #scoreModalLast3 {
  display: inline-flex !important;
}
#scoreModal.showing-remaining #scoreModalNext,
#scoreModal.showing-remaining #scoreModalRevealHands {
  display: inline-flex !important;
}

/* Lay-down animation on the landscape theater (portrait felt is hidden). */
.landscape-theater .claim-laydown-layer,
.claim-laydown-layer.lt-claim-layer {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.landscape-theater .claim-laid-card {
  width: min(48px, 10vw);
  height: min(70px, 14.5vw);
  margin-left: calc(min(48px, 10vw) / -2);
  margin-top: calc(min(70px, 14.5vw) / -2);
}

.lt-remaining-banner {
  max-height: 72vh;
  overflow: auto;
}
.lt-remaining-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin: 0.35rem 0;
  text-align: left;
}
.lt-remaining-player {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
}
.lt-remaining-name {
  font-size: 0.68rem;
  color: #ffe9a8;
  margin-bottom: 0.2rem;
}
.lt-remaining-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.lt-remaining-cards .claim-remaining-card {
  width: 32px !important;
  height: 46px !important;
}
.lt-endgame-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.35rem;
}

/* Remaining-card faces: scale the rank to the card box so art is not clipped. */
.claim-remaining-card {
  width: var(--remain-card-w, 44px) !important;
  height: var(--remain-card-h, 64px) !important;
  flex: 0 0 var(--remain-card-w, 44px) !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
.claim-remaining-card .c-stack {
  inset: 3px 2px !important;
  gap: 0 !important;
}
.claim-remaining-card .c-num {
  font-size: calc(var(--remain-card-h, 64px) * 0.34) !important;
  line-height: 0.92 !important;
}
.claim-remaining-card .c-color {
  font-size: calc(var(--remain-card-h, 64px) * 0.11) !important;
  line-height: 1 !important;
}
.claim-remaining-card .rook-bird-img,
.claim-remaining-card .red2-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (orientation: landscape) {
  #scoreModal.showing-remaining .claim-remaining-hands,
  #scoreModal.showing-remaining .claim-remaining-grid,
  #scoreModal.showing-remaining .claim-remaining-player,
  #scoreModal.showing-remaining .claim-remaining-cards {
    overflow: hidden !important;
  }
  #scoreModal.showing-remaining .claim-remaining-cards {
    overflow: hidden !important;
    flex-wrap: wrap !important;
  }
  #scoreModal.showing-remaining .claim-remaining-card,
  .lt-remaining-cards .claim-remaining-card {
    width: var(--remain-card-w, 36px) !important;
    height: var(--remain-card-h, 52px) !important;
    flex-basis: var(--remain-card-w, 36px) !important;
  }
  .lt-remaining-grid {
    overflow: auto;
    max-height: 52vh;
  }
  .lt-remaining-cards {
    overflow: visible !important;
  }
}

.claim-laydown-layer.lt-claim-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150000 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* Laydown cards inherit a shared table-plane transform in portrait. */
.claim-plane-wrapper {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 88px;
  height: 126px;
  margin-left: -44px;
  margin-top: -63px;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.claim-plane-wrapper .claim-laid-card {
  left: 0 !important;
  top: 0 !important;
  width: 88px !important;
  height: 126px !important;
  margin: 0 !important;
}
@media (orientation: portrait) {
  .claim-plane-wrapper {
    transform: scale(var(--claim-plane-scale, 1))
      matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.00115, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@media (orientation: landscape) {
  .claim-plane-wrapper {
    transform: none;
  }
}

.overlay-top {
  z-index: 210000 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lt-claim-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem auto;
  padding: 0.35rem 0.6rem;
  width: min(92vw, 22rem);
  background: linear-gradient(165deg, rgba(72, 48, 24, 0.98) 0%, rgba(32, 20, 10, 0.98) 100%);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 12px;
  z-index: 30;
  position: relative;
  pointer-events: auto;
}
.lt-claim-bar.hidden {
  display: none !important;
}
.lt-claim-title {
  font-size: clamp(0.62rem, 2vh, 0.82rem);
  font-weight: 800;
  color: #ffe9a8;
}
.lt-claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

@keyframes ltHandWinnerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 213, 79, 0);
    background: rgba(255, 213, 79, 0.08);
  }
  50% {
    box-shadow: 0 0 16px 2px rgba(255, 213, 79, 0.55);
    background: rgba(255, 213, 79, 0.28);
  }
}
.lt-hand-winner {
  animation: ltHandWinnerPulse 0.7s ease-in-out 6;
  border-radius: 10px;
  padding: 0.15rem 0.35rem;
}
.lt-hand-winner-banner {
  margin-top: 0.25rem;
  font-size: clamp(0.68rem, 2.1vh, 0.9rem);
  font-weight: 800;
  color: #ffd54f;
  text-align: center;
  animation: ltHandWinnerPulse 0.7s ease-in-out 6;
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
}

@keyframes ltTurnGlow {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow:
      0 0 0 2px #ffd54f,
      0 0 16px rgba(255, 213, 79, 0.65);
  }
}
.lt-hand.lt-turn-flash .card-face.playable {
  animation: ltTurnGlow 0.4s ease-in-out 5;
}
.lt-hand-label.lt-turn-flash-label {
  color: #ffd54f !important;
  animation: ltTurnGlow 0.4s ease-in-out 5;
}

.win-overlay.overlay-top,
.cele-page.overlay-top {
  z-index: 220000 !important;
}

/* Original Griffin table avatars */
.seat-avatar {
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  vertical-align: middle;
  margin-right: 0.2rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.seat-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.avatar-choice {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  border-radius: 10px;
  padding: 0.28rem 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  cursor: pointer;
  min-width: 0;
}
.avatar-choice img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.avatar-choice span {
  font-size: 0.58rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.avatar-choice.selected {
  border-color: #d8b24c;
  box-shadow:
    0 0 0 2px rgba(216, 178, 76, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
@media (max-width: 420px) {
  .avatar-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
  }
  .avatar-choice img {
    width: 38px;
    height: 38px;
  }
  .avatar-choice span {
    font-size: 0.5rem;
  }
}

/* Dynamic trick capture: the bottom player's seat is the actual animation target. */
@keyframes trickSwipeMe {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--srot, 0deg)) scale(1);
  }
  24% {
    opacity: 1;
    transform: translate(0, 8px) rotate(0deg) scale(1.08);
  }
  58% {
    opacity: 1;
    transform: translate(calc(var(--winner-tx, 0px) * 0.58), calc(var(--winner-ty, 130px) * 0.58))
      rotate(-5deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate(var(--winner-tx, 0px), var(--winner-ty, 130px)) rotate(-10deg) scale(0.48);
  }
}
.trick-stack.swipe-me .trick-card-wrap {
  animation-name: trickSwipeMe;
}
.trick-stack.trick-swipe .trick-card-wrap.winner .card-face {
  outline: 2px solid #69f0ae;
  box-shadow:
    0 0 0 3px rgba(105, 240, 174, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.45);
}

/* Griffin table polish — selected improvements */
.seat-avatar {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(255, 213, 79, 0.35);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
}
.player-slot.bottom .seat-avatar {
  width: 2rem;
  height: 2rem;
}
.player-slot.is-turn .seat-avatar {
  animation: avatarTurnPulse 0.65s ease-in-out infinite alternate;
}
@keyframes avatarTurnPulse {
  from {
    transform: scale(1);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
  }
  to {
    transform: scale(1.08);
    box-shadow:
      0 0 0 3px rgba(255, 213, 79, 0.28),
      0 3px 12px rgba(0, 0, 0, 0.5);
  }
}

/* High-value trick impact: felt reacts without covering the cards. */
.game-room.big-trick-impact .table-felt {
  animation: bigTrickPulse 0.72s ease-out;
}
@keyframes bigTrickPulse {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.012);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.game-room.rook-capture-impact .table-felt {
  animation: rookTablePulse 0.7s ease-out;
}
@keyframes rookTablePulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 213, 79, 0);
  }
  35% {
    box-shadow: 0 0 28px rgba(255, 213, 79, 0.28);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 213, 79, 0);
  }
}

/* Realistic card landing: tiny rotation/offsets are preserved, but remain readable. */
.trick-stack .trick-card-wrap {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trick-stack .trick-card-wrap:nth-child(1) {
  --srot: -5deg;
  --sx: -6px;
  --sy: 3px;
}
.trick-stack .trick-card-wrap:nth-child(2) {
  --srot: 4deg;
  --sx: 5px;
  --sy: -2px;
}
.trick-stack .trick-card-wrap:nth-child(3) {
  --srot: -2deg;
  --sx: -3px;
  --sy: 4px;
}
.trick-stack .trick-card-wrap:nth-child(4) {
  --srot: 6deg;
  --sx: 4px;
  --sy: -1px;
}
.trick-capture-flight-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8999;
  overflow: visible !important;
}
.trick-flight-card {
  transform-origin: center !important;
  pointer-events: none !important;
  position: fixed !important;
  margin: 0 !important;
}
.trick-capture-flight-layer .trick-flight-card {
  overflow: visible !important;
  contain: layout style paint;
}
.trick-capture-flight-layer .trick-flight-card,
.trick-capture-flight-layer .trick-flight-card * {
  animation: none !important;
}
.trick-capture-flight-layer .trick-flight-card .card-face {
  width: 100% !important;
  height: 100% !important;
}
.trick-flight-card .card-face {
  width: 100% !important;
  height: 100% !important;
}

/* Bid pressure makes the auction feel more alive without exposing hidden info. */
.bid-progress.bid-pressure {
  animation: bidPressure 0.5s ease-out;
}
@keyframes bidPressure {
  0% {
    transform: scale(0.96);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.bid-badge.bid-high {
  animation: highBidPulse 0.8s ease-in-out infinite alternate;
}
@keyframes highBidPulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.045);
  }
}

/* Score resolution */
.scoreboard .sb-delta {
  animation: scoreDeltaIn 0.55s ease-out both;
}
@keyframes scoreDeltaIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.scoreboard .sb-total {
  animation: scoreTotalIn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes scoreTotalIn {
  from {
    opacity: 0.4;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .player-slot .seat-avatar {
    width: 1.7rem;
    height: 1.7rem;
  }
  .player-slot.bottom .seat-avatar {
    width: 2rem;
    height: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .player-slot.is-turn .seat-avatar,
  .bid-badge.bid-high {
    animation: none;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .player-slot.top .seat-avatar,
  .player-slot.left .seat-avatar,
  .player-slot.right .seat-avatar {
    width: 1.75rem;
    height: 1.75rem;
  }
  .player-slot.bottom .name {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    white-space: nowrap;
  }
}

/* ===== House polish ===== */
/* Lobby stays usable in landscape — no full-screen decorative photo. */
.lobby-land-art {
  display: none !important;
}
#lobby.screen {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0.4rem 0.7rem 0.3rem;
  gap: 0.28rem;
  justify-content: flex-start;
  box-sizing: border-box;
}
#lobby .lobby-header {
  margin-bottom: 0.35rem;
  flex: 0 0 auto;
}
#lobby .lobby-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
#lobby .lobby-header h1 {
  font-size: 1.35rem;
}
#lobby .subtitle {
  font-size: 0.8rem;
  margin: 0;
}
#lobby .lobby-card {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.55rem 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#lobby.joining .lobby-actions,
#lobby.joining .rules-link,
#lobby.joining .legal-footer,
#lobby.joining #friendsPanel {
  display: none !important;
}
#lobby.joining .lobby-card {
  flex: 1 1 auto;
}
#lobby .lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
#lobby .lobby-card .lobby-main {
  width: 100%;
  margin-top: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  line-height: 1.1;
  padding: 0.38rem 0.6rem;
}
.lobby-stats-card {
  width: 100%;
  margin-top: 0.5rem;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.85);
  background: linear-gradient(180deg, #2a3757 0%, #141e35 100%);
  color: #f6edd6;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 14px rgba(0, 0, 0, 0.24);
}
.lobby-stats-card:active {
  transform: translateY(1px);
}
.lobby-stats-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.18);
  font-size: 1.15rem;
}
.lobby-stats-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.lobby-stats-copy strong {
  font-size: 0.84rem;
  letter-spacing: 0.035em;
}
.lobby-stats-copy span {
  font-size: 0.68rem;
  line-height: 1.2;
  opacity: 0.8;
}
.lobby-stats-arrow {
  flex: 0 0 auto;
  font-size: 1.65rem;
  line-height: 1;
  color: #f0d783;
}
#lobby .lobby-btn-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.78;
  text-transform: none;
}
#lobby .lobby-quiet {
  display: none;
}
#lobby .lobby-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--room-felt-hi, var(--room-felt)) 28%, #120e0a) 0%,
    rgba(10, 8, 6, 0.94) 100%
  );
  border: 1px solid color-mix(in srgb, var(--room-rail) 45%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#lobby .lobby-hero {
  flex: 1 1 auto;
  min-height: 120px;
  height: auto;
  max-height: none;
  margin-top: 0.4rem;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-color: #0a0c12;
  background-image: none;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid color-mix(in srgb, var(--room-rail) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
#lobby .lobby-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  display: block;
}
#lobby .join-form #joinConfirmBtn {
  background: linear-gradient(180deg, #f3d58a 0%, #c9a227 55%, #b08a1c 100%);
  color: #1a1408;
  border: 1px solid #e8c96a;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 236, 180, 0.4) inset,
    0 6px 14px rgba(0, 0, 0, 0.28);
}
#lobby .join-form #spectateBtn,
#lobby .join-form #joinCancelBtn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#lobby .lobby-card .lobby-main.btn.primary {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#lobby .lobby-card .lobby-main.btn.primary .lobby-btn-sub {
  color: rgba(240, 224, 168, 0.72);
}
#lobby .lobby-card .lobby-main.btn:not(.primary) {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#lobby .lobby-card .lobby-main.btn:not(.primary) .lobby-btn-sub {
  color: rgba(240, 224, 168, 0.72);
}
.lobby-stats-card {
  flex: 0 0 auto;
}
#lobby .rules-link {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.1rem 0 0.15rem;
  position: relative;
  z-index: 2;
  background: transparent;
}
#lobby .rules-link .btn {
  flex: none;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0.4rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.7);
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f6edd6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#lobby .rules-link .version-tag {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 0;
  padding-right: 0.15rem;
}
#lobby .legal-footer {
  display: none;
  padding-top: 0.35rem;
  font-size: 0.62rem;
  line-height: 1.35;
  opacity: 0.55;
  position: relative;
  z-index: 1;
}

/* Must beat `#lobby .lobby-hero img { display:block }` or the wide
   banner paints on top of the portrait fight and crops "HOUSE OF ROOKS"
   into stray letters (F ROOKS / ABLE). */
#lobby .lobby-hero-land {
  display: none !important;
}
@media (orientation: landscape) {
  #lobby.screen:not(.hidden) .lobby-header {
    display: none !important;
  }
  #lobby.screen:not(.hidden) .lobby-hero-portrait {
    display: none !important;
  }
  #lobby.screen:not(.hidden) .lobby-hero-land {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  #lobby.screen:not(.hidden) .lobby-hero {
    order: -1;
    flex: 0 0 auto;
    height: 28vh;
    min-height: 120px;
    max-height: 200px;
  }
}
@media (orientation: landscape) {
  body:not(.in-game) #app {
    max-width: none;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
  }
  #lobby.screen:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.28rem;
    padding: 0.28rem 0.7rem 0.28rem;
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
  }
  #lobby.screen:not(.hidden) .lobby-header {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    margin: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.55rem;
  }
  #lobby.screen:not(.hidden) .lobby-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
  #lobby.screen:not(.hidden) .lobby-header h1 {
    font-size: 1.25rem;
    margin: 0;
  }
  #lobby.screen:not(.hidden) .subtitle {
    display: none;
  }
  #lobby.screen:not(.hidden) .lobby-card {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.65rem 0.35rem;
    max-height: none;
    overflow: hidden;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  #lobby.screen:not(.hidden) .lobby-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.35rem;
    margin-top: 0.2rem;
  }
  #lobby.screen:not(.hidden) #installAppBtn {
    display: none;
  }
  #lobby.screen:not(.hidden) .lobby-card .lobby-main {
    width: 100%;
    min-height: 38px;
    margin-top: 0;
    padding: 0.32rem 0.4rem;
    font-size: 0.9rem;
  }
  #lobby.screen:not(.hidden) .lobby-btn-sub {
    font-size: 0.62rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-card {
    min-height: 46px;
    margin-top: 0.3rem;
    padding: 0.38rem 0.55rem;
    gap: 0.45rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-icon {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-copy strong {
    font-size: 0.72rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-copy span {
    font-size: 0.58rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-arrow {
    font-size: 1.3rem;
  }
  #lobby.screen:not(.hidden) .lobby-quiet {
    display: none;
  }
  #lobby.screen:not(.hidden) #hor-player-name {
    margin-bottom: 0.25rem;
    padding: 0.45rem 0.7rem;
  }
  #lobby.screen:not(.hidden) .join-form {
    margin-top: 0.25rem;
  }
  #lobby.screen:not(.hidden) .lobby-hero {
    flex: 1 1 auto;
    min-height: 72px;
    height: auto;
    max-height: none;
    margin-top: 0.3rem;
  }
  #lobby.screen:not(.hidden) .rules-link {
    flex: 0 0 auto;
    position: static;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.28rem;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #lobby.screen:not(.hidden) .rules-link .btn {
    min-height: 38px;
    padding: 0.28rem 0.2rem;
    font-size: 0.68rem;
  }
  #lobby.screen:not(.hidden) .rules-link .version-tag {
    grid-column: 1 / -1;
    justify-self: end;
    position: static;
  }
  #lobby.screen:not(.hidden) .legal-footer {
    display: none;
  }
}
@media (orientation: portrait) and (max-height: 720px) {
  #lobby.screen {
    padding: 0.4rem 0.7rem 0.3rem;
    gap: 0.2rem;
  }
  #lobby .lobby-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  #lobby .lobby-header h1 {
    font-size: 1.3rem;
  }
  #lobby .subtitle {
    display: none;
  }
  #lobby .lobby-card {
    padding: 0.55rem 0.7rem;
  }
  #lobby .lobby-card .lobby-main {
    min-height: 42px;
    padding: 0.4rem 0.55rem;
    font-size: 0.98rem;
  }
  #lobby .lobby-btn-sub {
    font-size: 0.66rem;
  }
  #lobby .lobby-stats-card {
    min-height: 48px;
    margin-top: 0.3rem;
    padding: 0.4rem 0.55rem;
  }
  #lobby .lobby-stats-copy strong {
    font-size: 0.74rem;
  }
  #lobby .lobby-stats-copy span {
    font-size: 0.6rem;
  }
  #lobby .legal-footer {
    display: none;
  }
  #lobby .lobby-hero {
    min-height: 100px;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
  }
}
@media (orientation: landscape) and (max-height: 400px) {
  #lobby.screen:not(.hidden) {
    gap: 0.65rem;
    padding: 0.35rem 0.7rem;
  }
  #lobby.screen:not(.hidden) .lobby-mark {
    width: min(22vh, 72px);
    height: min(22vh, 72px);
  }
  #lobby.screen:not(.hidden) .lobby-header h1 {
    font-size: 1.15rem;
  }
  #lobby.screen:not(.hidden) .subtitle {
    display: none;
  }
  #lobby.screen:not(.hidden) .lobby-card {
    padding: 0.45rem 0.7rem;
  }
  #lobby.screen:not(.hidden) .lobby-card .lobby-main {
    min-height: 34px;
    margin-top: 0.22rem;
    font-size: 0.9rem;
  }
  #lobby.screen:not(.hidden) .rules-link {
    display: none;
  }
}
.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.35rem 0 0.55rem;
  align-items: center;
  position: relative;
  z-index: 6;
  background: inherit;
}
.join-form.hidden {
  display: none !important;
}
.join-form input[type='text'] {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 48px;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}
.join-form #joinConfirmBtn,
.join-form #spectateBtn {
  flex: 1 1 42%;
  min-height: 44px;
}
.join-form #joinCancelBtn {
  flex: 1 1 100%;
  min-height: 36px;
}
.qr-img {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0.4rem auto 0;
  background: #fff;
  border-radius: 8px;
}
.qr-img.hidden {
  display: none !important;
}
.lobby-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  text-align: left;
  margin-bottom: 1rem;
}
.lobby-mark {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 0;
  display: block;
  margin: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.lobby-header-copy {
  min-width: 0;
}
.lobby-header h1 {
  margin-bottom: 0.1rem;
}
.lobby-card .lobby-main {
  width: 100%;
  margin-top: 0.55rem;
  min-height: 48px;
  font-size: 1.05rem;
}
.lobby-quiet {
  margin: 0.3rem 0 0;
  opacity: 0.7;
}
.friends-panel {
  margin-top: 0.6rem;
}
.nearby-btn {
  width: 100%;
  margin-top: 0.45rem;
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: #fff;
  border: none;
}
.lobby-rejoin {
  margin: 0.4rem 0 0.2rem;
}
.legal-footer {
  text-align: center;
  font-size: 0.72rem;
  opacity: 0.55;
  margin: 1.1rem 0.6rem 1.4rem;
  line-height: 1.35;
}
.legal-footer a {
  color: #c9a227;
}
.preset-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.preset-btn {
  flex: 1;
  min-width: 6.2rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  border-radius: 10px;
  padding: 0.45rem 0.3rem;
  font-weight: 700;
}
.preset-btn.active {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f3ead6;
  border-color: #e8c96a;
  box-shadow: 0 0 0 1px rgba(232, 201, 106, 0.35);
}
.opt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}
.opt-tab {
  flex: 1 1 18%;
  min-width: 4.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 0.4rem;
}
.opt-tab.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: #c9a227;
}
.opt-pane.hidden {
  display: none;
}
.team-name-row {
  display: flex;
  gap: 0.4rem;
  margin: 0.45rem 0;
}
.team-name-row input {
  width: 100%;
  margin-top: 0.15rem;
}
.turn-banner {
  position: relative;
  z-index: 5;
  margin: 0.15rem 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
  background: rgba(20, 14, 8, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.turn-banner.mine {
  background: #c9a227;
  color: #1a120b;
  border-color: #e6c35a;
}
.felt-badge.nest-dest {
  opacity: 0.95;
}
body.is-spectator .action-panel {
  display: none !important;
}
.top-bar.opts-collapsed .toolbar .icon-btn:not(#btnMute) {
  display: none;
}
.trump-showdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.trump-tile {
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
}
.trump-tile.green {
  background: #00c853;
  color: #07331a;
}
.trump-tile.red {
  background: #ff1744;
  color: #fff;
}
.trump-tile.yellow {
  background: #c9a227;
  color: #1a120b;
}
.trump-tile.black {
  background: #111;
  color: #f5e6c8;
}
.tutorial-overlay {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20000;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.6rem 0.7rem 0.85rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  pointer-events: none;
  color-scheme: dark;
}
.tutorial-overlay.lobby-placed {
  inset: 0;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  padding: 0 0.7rem;
  pointer-events: none;
}
.tutorial-overlay.lobby-placed .tutorial-card {
  margin-left: auto;
  margin-right: auto;
}
.tutorial-overlay.hidden {
  display: none !important;
}
.tutorial-card {
  pointer-events: auto;
  width: min(94vw, 400px);
  background: #070504;
  border: 1px solid #5c4a22;
  border-radius: 14px;
  padding: 0.85rem 0.9rem 0.75rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
  color: #e8dcc4;
}
.tutorial-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8943a;
}
.tutorial-title {
  margin: 0.15rem 0 0.4rem;
  font-size: 1.05rem;
  color: #f3ead6;
  font-weight: 700;
}
#tutorialText {
  font-size: 0.9rem;
  line-height: 1.42;
  color: #d9ccb3;
}
#tutorialText p {
  margin: 0 0 0.5rem;
}
#tutorialText p:last-child {
  margin-bottom: 0;
}
#tutorialText b {
  color: #f0d27a;
}
.tutorial-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0.55rem 0 0.45rem;
}
.tutorial-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a2c18;
}
.tutorial-dot.on {
  background: #c9a227;
}
.tutorial-dot.done {
  background: #6d5624;
}
.tutorial-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tutorial-actions .btn {
  min-height: 2.15rem;
  background: #1a140c;
  color: #e8dcc4;
  border-color: #5c4a22;
}
.tutorial-actions .btn.primary {
  background: #3a2c12;
  color: #f3ead6;
  border-color: #8a6d2e;
}
.new-player-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.new-player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: #10182c;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  color: #f0e6d0;
}
.new-player-row > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.new-player-row .btn {
  min-height: 2.2rem;
  font-size: 0.78rem;
  flex: 0 0 auto;
  width: auto;
  max-width: 46%;
  padding: 0.35rem 0.55rem;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}
.new-player-actions {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.new-player-actions .btn {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.45rem 0.4rem;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  overflow: hidden;
}
.new-player-actions .btn.primary {
  grid-column: 1 / -1;
}
.illegal-why {
  position: fixed;
  z-index: 21000;
  background: #1a120b;
  color: #f5e6c8;
  border: 1px solid #c9a227;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
}
.illegal-why.hidden {
  display: none !important;
}
.score-teach {
  margin: 0.4rem 0 0.7rem;
  line-height: 1.35;
}
.cele-recap {
  margin: 0.6rem 0 1rem;
}
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.recap-grid div {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
}
.recap-grid span {
  display: block;
  font-size: 0.68rem;
  opacity: 0.7;
}
body.reduce-motion .capture-overlay,
body.reduce-motion .cele-confetti,
body.reduce-motion .confetti,
body.reduce-motion .flame,
body.reduce-motion .chandelier,
body.reduce-motion .shuffle-overlay,
body.reduce-motion .nest-beat {
  animation: none !important;
  transition: none !important;
}
.btnUndo.disabled,
#btnUndo.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.felt-badge.bid-need {
  font-weight: 800;
}
.felt-badge.bid-need.short {
  color: #ffccbc;
}
.felt-badge.bid-need.made {
  color: #b9f6ca;
}
.top-bar .bid-progress {
  white-space: normal;
  line-height: 1.25;
  max-width: 100%;
}

.claim-remaining-player.is-hand-winner,
.lt-remaining-player.is-hand-winner {
  background: rgba(255, 213, 79, 0.16);
  box-shadow: inset 0 0 0 2px rgba(255, 213, 79, 0.55);
}
.claim-remaining-player.is-laid-winner,
.lt-remaining-player.is-laid-winner {
  background: linear-gradient(180deg, rgba(255, 213, 79, 0.34), rgba(201, 162, 39, 0.18));
  box-shadow:
    0 0 0 3px #ffd54f,
    0 10px 28px rgba(255, 213, 79, 0.35);
}
.claim-remaining-player.is-laid-winner .claim-remaining-cards .card-face,
.lt-remaining-player.is-laid-winner .lt-remaining-cards .card-face,
.claim-remaining-player.is-laid-winner .claim-remaining-card {
  box-shadow:
    0 0 0 2px #fff59d,
    0 0 12px rgba(255, 213, 79, 0.65);
}
.winner-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: #ffd54f;
  color: #1a120b;
  font-style: normal;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
#scoreModal.showing-remaining .claim-remaining-player-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
}
#scoreModal.showing-remaining .cr-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}
#scoreModal.showing-remaining .claim-remaining-grid {
  overflow: visible !important;
  padding: 6px;
}
#scoreModal.showing-remaining #scoreModalBody,
#scoreModal.showing-remaining .claim-remaining-hands {
  overflow: visible !important;
}
#scoreModal.showing-remaining .claim-remaining-player.is-laid-winner {
  margin: 3px;
}
@media (orientation: landscape) {
  #scoreModal.showing-remaining .modal-content.scoreboard-modal {
    overflow: hidden !important;
  }
  #scoreModal.showing-remaining #scoreModalTitle,
  #scoreModal.showing-remaining h2 {
    display: none !important;
  }
  #scoreModal.showing-remaining .claim-remaining-title {
    font-size: 0.8rem !important;
    margin: 0 0 0.15rem !important;
    line-height: 1.2 !important;
  }
  #scoreModal.showing-remaining .claim-remaining-meta {
    margin: 0 0 0.3rem !important;
    font-size: 0.82rem !important;
  }
  #scoreModal.showing-remaining .claim-remaining-hands {
    padding: 0.2rem 0.35rem 0.15rem !important;
  }
  #scoreModal.showing-remaining .claim-remaining-grid {
    grid-template-rows: auto auto !important;
    gap: 0.45rem 0.7rem !important;
    overflow: visible !important;
  }
  #scoreModal.showing-remaining .claim-remaining-player {
    min-height: auto !important;
  }
  #scoreModal.showing-remaining .winner-tag {
    font-size: 0.58rem;
    padding: 0.04rem 0.32rem;
  }
  #scoreModal.showing-remaining .score-modal-actions {
    margin-top: 0.2rem !important;
    padding-top: 0.2rem !important;
  }
}
.player-slot.is-hand-winner {
  box-shadow:
    0 0 0 3px #ffd54f,
    0 0 22px rgba(255, 213, 79, 0.55);
  background: rgba(255, 213, 79, 0.16);
}

.waiting-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  text-align: left;
}
.waiting-crest {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  object-position: center;
  display: block;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.waiting-header-copy {
  min-width: 0;
}
.waiting-header h1 {
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}
.waiting-table-wrap {
  padding: 0.55rem 0.5rem 0.2rem;
  flex: 0 0 auto;
}
.waiting-nearby-hint {
  margin: 0.15rem 0 0;
  opacity: 0.75;
  font-size: 0.72rem;
  text-align: center;
}
.waiting-felt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: auto minmax(5.5rem, 1fr) auto;
  gap: 0.4rem;
  min-height: 260px;
  overflow: visible;
  padding: 0.7rem;
  border-radius: 28px;
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(62, 110, 58, 0.55),
    rgba(18, 42, 22, 0.96) 70%
  );
  border: 3px solid rgba(201, 162, 39, 0.45);
  box-shadow:
    inset 0 0 0 6px rgba(0, 0, 0, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.35);
}
.wait-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 72px;
  z-index: 2;
  min-width: 0;
  border-radius: 18px;
  border: 2px dashed rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.22);
  color: #f4ead0;
  cursor: pointer;
  position: relative;
  padding: 0.35rem 0.4rem;
}
.wait-seat.top {
  grid-column: 2;
  grid-row: 1;
}
.wait-seat.left {
  grid-column: 1;
  grid-row: 2;
}
.wait-seat.right {
  grid-column: 3;
  grid-row: 2;
}
.wait-seat.bottom {
  grid-column: 2;
  grid-row: 3;
}
.waiting-center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem;
}
.waiting-center-mark {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: #c9a227;
  opacity: 0.85;
}
.waiting-center-status {
  font-size: 0.8rem;
  margin: 0.2rem 0 0;
  line-height: 1.3;
  overflow: visible;
  max-height: none;
}
.wait-props {
  display: none !important;
}
.wait-seat.occupied {
  border-style: solid;
  border-color: #c9a227;
  background: rgba(20, 14, 8, 0.72);
}
.wait-seat.is-me {
  box-shadow: 0 0 0 2px #ffe082;
}
.wait-seat.is-bot {
  border-color: #90caf9;
}
.wait-seat-name {
  font-weight: 800;
  font-size: 0.95rem;
}
.wait-seat-tag {
  font-size: 0.68rem;
  opacity: 0.8;
}
#waiting .seat-glass {
  display: none !important;
}
.seat-beer,
.seat-glass {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  font-size: 1.15rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 3;
  transition: transform 0.55s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.player-slot {
  position: relative;
}
.waiting-felt.toasting .wait-seat.top .seat-glass {
  transform: translateY(78px) scale(1.45) rotate(-12deg);
}
.waiting-felt.toasting .wait-seat.bottom .seat-glass {
  transform: translateY(-78px) scale(1.45) rotate(12deg);
}
.waiting-felt.toasting .wait-seat.left .seat-glass {
  transform: translateX(78px) scale(1.45) rotate(8deg);
}
.waiting-felt.toasting .wait-seat.right .seat-glass {
  transform: translateX(-78px) scale(1.45) rotate(-8deg);
}
.table-felt.toasting .player-slot.top .seat-glass {
  transform: translateY(70px) scale(1.4) rotate(-10deg);
}
.table-felt.toasting .player-slot.bottom .seat-glass {
  transform: translateY(-62px) scale(1.4) rotate(10deg);
}
.table-felt.toasting .player-slot.left .seat-glass {
  transform: translateX(70px) scale(1.4) rotate(8deg);
}
.table-felt.toasting .player-slot.right .seat-glass {
  transform: translateX(-70px) scale(1.4) rotate(-8deg);
}

@media (max-width: 420px) {
  .waiting-felt {
    min-height: 250px;
    padding: 0.5rem;
  }
  .wait-seat {
    min-height: 64px;
  }
}

.wait-seat-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.6);
}
.bot-picker-sheet {
  max-width: 420px;
}
.bot-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  max-height: 55vh;
  overflow: auto;
  margin: 0.55rem 0 0.7rem;
}
.bot-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  cursor: pointer;
}
.bot-pick img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.bot-pick b {
  font-size: 0.95rem;
}
.bot-pick span {
  font-size: 0.72rem;
  opacity: 0.78;
  line-height: 1.25;
}
.bot-pick:hover {
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.16);
}

.bot-style-btn {
  display: none !important;
}
.player-slot .name[data-botname],
.wait-seat-name[data-botname] {
  cursor: default;
}
.bot-style-tip {
  position: fixed;
  z-index: 80;
  max-width: 220px;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: #1a2418;
  color: #f4ead0;
  border: 1px solid #c9a227;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  font-size: 0.82rem;
  line-height: 1.3;
}
.bot-style-tip b {
  display: inline;
}
.bot-style-tip span {
  display: block;
  margin-top: 0.25rem;
  opacity: 0.9;
}
.bot-pick i {
  font-style: normal;
  font-size: 0.68rem;
  color: #c9a227;
}
.wait-seat-name {
  display: inline-flex;
  align-items: center;
}

.seat-glass.fade-out {
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
  transform: scale(0.7);
}

body.room-theme-midnight,
body.room-theme-midnight #lobby,
body.room-theme-midnight #waiting,
body.room-theme-midnight .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #1a2744 0%, #0b1020 55%, #07090f 100%) !important;
}
body.room-theme-midnight .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #2a4a86 0%, #16325f 45%, #0c1a33 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    0 0 0 6px #8ea0b8,
    0 0 0 9px #d7e3f0,
    0 0 0 12px #4a5564,
    0 0 0 15px #1b2230,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-midnight .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(50, 80, 140, 0.55),
    rgba(10, 16, 32, 0.96) 70%
  ) !important;
  border-color: rgba(190, 210, 240, 0.45) !important;
}
body.room-theme-midnight {
  --room-felt: #16325f;
  --room-felt-hi: #2a4a86;
  --room-rail: #d7e3f0;
  --room-bg-top: #1a2744;
}
body.room-theme-house {
  --room-felt: #0d5c2e;
  --room-felt-hi: #128a42;
  --room-rail: #c9a227;
  --room-bg-top: #1a2a14;
}

/* Lobby chrome stays midnight navy even if the table theme is House green. */
#lobby,
#lobby .header,
#lobby .lobby-card {
  --room-felt: #16325f;
  --room-felt-hi: #2a4a86;
  --room-rail: #d7e3f0;
  --room-bg-top: #1a2744;
}
#lobby.screen {
  background: radial-gradient(120% 80% at 50% 0%, #1a2744 0%, #0b1020 55%, #07090f 100%) !important;
}
#lobby .lobby-card .lobby-main.btn,
#lobby .rules-link .btn,
#lobby .join-form .btn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%) !important;
  color: #f0e0a8 !important;
  border: 1px solid rgba(212, 175, 55, 0.7) !important;
}
body.room-theme-riverboat {
  --room-felt: #8b1e1e;
  --room-felt-hi: #c0392b;
  --room-rail: #e6c35c;
  --room-bg-top: #5a1d24;
}
body.room-theme-cabin {
  --room-felt: #2f4a24;
  --room-felt-hi: #4f7a3a;
  --room-rail: #c4a574;
  --room-bg-top: #3d4a28;
}
body.room-theme-speakeasy {
  --room-felt: #141414;
  --room-felt-hi: #2a2a2a;
  --room-rail: #e0b85a;
  --room-bg-top: #5a3a14;
}
body.room-theme-slate {
  --room-felt: #3a4552;
  --room-felt-hi: #5b6774;
  --room-rail: #d5dbe2;
  --room-bg-top: #3a424c;
}
body.room-theme-burgundy {
  --room-felt: #5c1c2e;
  --room-felt-hi: #8b2f45;
  --room-rail: #e0a070;
  --room-bg-top: #4a1c28;
}
body.room-theme-ember {
  --room-felt: #221c18;
  --room-felt-hi: #3a322c;
  --room-rail: #e08948;
  --room-bg-top: #4a2a18;
}
body.room-theme-harbor {
  --room-felt: #185552;
  --room-felt-hi: #2a7a78;
  --room-rail: #d4b46a;
  --room-bg-top: #1a3a40;
}
body.room-theme-sandbar {
  --room-felt: #8a6a3e;
  --room-felt-hi: #c4a06a;
  --room-rail: #f0e4c8;
  --room-bg-top: #5a4630;
}
body.room-theme-ivy {
  --room-felt: #1c4428;
  --room-felt-hi: #2f6b3c;
  --room-rail: #d4b45a;
  --room-bg-top: #244028;
}
body.room-theme-frost {
  --room-felt: #3a546c;
  --room-felt-hi: #6a8aaa;
  --room-rail: #e8f0f6;
  --room-bg-top: #2a3a48;
}
body.room-theme-cocoa {
  --room-felt: #422616;
  --room-felt-hi: #6b3e28;
  --room-rail: #c9a06a;
  --room-bg-top: #3a2418;
}
body.room-theme-plum {
  --room-felt: #422246;
  --room-felt-hi: #6a3a6e;
  --room-rail: #e6d08a;
  --room-bg-top: #3a2040;
}
body.room-theme-ink {
  --room-felt: #141c34;
  --room-felt-hi: #243056;
  --room-rail: #b8c2cc;
  --room-bg-top: #1a2438;
}

body.room-theme-riverboat,
body.room-theme-riverboat #lobby,
body.room-theme-riverboat #waiting,
body.room-theme-riverboat .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #5a1d24 0%, #2a0d12 55%, #14080a 100%) !important;
}
body.room-theme-riverboat .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #c0392b 0%, #8b1e1e 45%, #4a1010 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.45),
    0 0 0 6px #8a6a1f,
    0 0 0 9px #e6c35c,
    0 0 0 12px #6b4e14,
    0 0 0 15px #2b1c08,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-riverboat .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(160, 40, 40, 0.55),
    rgba(40, 10, 12, 0.96) 70%
  ) !important;
  border-color: rgba(230, 195, 92, 0.5) !important;
}

body.room-theme-cabin,
body.room-theme-cabin #lobby,
body.room-theme-cabin #waiting,
body.room-theme-cabin .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #3d4a28 0%, #1c2414 55%, #0e120a 100%) !important;
}
body.room-theme-cabin .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #4f7a3a 0%, #2f4a24 45%, #1a2a14 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.45),
    0 0 0 6px #6b4a2b,
    0 0 0 9px #c4a574,
    0 0 0 12px #4a321c,
    0 0 0 15px #24180e,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-cabin .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(70, 100, 50, 0.55),
    rgba(20, 28, 14, 0.96) 70%
  ) !important;
  border-color: rgba(196, 165, 116, 0.5) !important;
}

body.room-theme-speakeasy,
body.room-theme-speakeasy #lobby,
body.room-theme-speakeasy #waiting,
body.room-theme-speakeasy .game-room {
  background: radial-gradient(120% 70% at 50% 0%, #5a3a14 0%, #1a120c 50%, #080604 100%) !important;
}
body.room-theme-speakeasy .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #2a2a2a 0%, #141414 50%, #070707 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(80, 50, 10, 0.35),
    0 0 0 6px #8a6a2b,
    0 0 0 9px #e0b85a,
    0 0 0 12px #5a4316,
    0 0 0 15px #1c1408,
    0 0 40px rgba(224, 184, 90, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.7) !important;
}
body.room-theme-speakeasy .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(50, 40, 20, 0.7),
    rgba(10, 8, 6, 0.97) 70%
  ) !important;
  border-color: rgba(224, 184, 90, 0.5) !important;
}

body.room-theme-slate,
body.room-theme-slate #lobby,
body.room-theme-slate #waiting,
body.room-theme-slate .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #3a424c 0%, #171b20 55%, #0b0d10 100%) !important;
}
body.room-theme-slate .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #5b6774 0%, #3a4552 45%, #1c232b 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    0 0 0 6px #7d8793,
    0 0 0 9px #d5dbe2,
    0 0 0 12px #4a525c,
    0 0 0 15px #1a1e24,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-slate .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(90, 100, 112, 0.5),
    rgba(16, 18, 22, 0.96) 70%
  ) !important;
  border-color: rgba(213, 219, 226, 0.45) !important;
}

body.room-theme-burgundy,
body.room-theme-burgundy #lobby,
body.room-theme-burgundy #waiting,
body.room-theme-burgundy .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #4a1c28 0%, #1c0c12 55%, #0c0608 100%) !important;
}
body.room-theme-burgundy .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #8b2f45 0%, #5c1c2e 45%, #2a1018 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.48),
    0 0 0 6px #8a4a2a,
    0 0 0 9px #e0a070,
    0 0 0 12px #5a3018,
    0 0 0 15px #24140c,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-burgundy .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(120, 40, 60, 0.5),
    rgba(24, 10, 14, 0.96) 70%
  ) !important;
  border-color: rgba(224, 160, 112, 0.5) !important;
}

body.room-theme-ember,
body.room-theme-ember #lobby,
body.room-theme-ember #waiting,
body.room-theme-ember .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #4a2a18 0%, #1a100c 55%, #0a0705 100%) !important;
}
body.room-theme-ember .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #3a322c 0%, #221c18 50%, #0e0c0a 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(180, 70, 20, 0.22),
    0 0 0 6px #8a4a22,
    0 0 0 9px #e08948,
    0 0 0 12px #5a2e14,
    0 0 0 15px #1c1008,
    0 0 36px rgba(224, 137, 72, 0.16),
    0 14px 36px rgba(0, 0, 0, 0.65) !important;
}
body.room-theme-ember .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(90, 45, 20, 0.55),
    rgba(16, 10, 8, 0.97) 70%
  ) !important;
  border-color: rgba(224, 137, 72, 0.5) !important;
}

body.room-theme-harbor,
body.room-theme-harbor #lobby,
body.room-theme-harbor #waiting,
body.room-theme-harbor .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #1a3a40 0%, #0c1c20 55%, #070e10 100%) !important;
}
body.room-theme-harbor .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #2a7a78 0%, #185552 45%, #0c2c2a 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.48),
    0 0 0 6px #7a6230,
    0 0 0 9px #d4b46a,
    0 0 0 12px #4a3a18,
    0 0 0 15px #1c160a,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-harbor .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(30, 90, 88, 0.5),
    rgba(10, 22, 24, 0.96) 70%
  ) !important;
  border-color: rgba(212, 180, 106, 0.5) !important;
}

body.room-theme-sandbar,
body.room-theme-sandbar #lobby,
body.room-theme-sandbar #waiting,
body.room-theme-sandbar .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #5a4630 0%, #2a2016 55%, #120e0a 100%) !important;
}
body.room-theme-sandbar .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #c4a06a 0%, #8a6a3e 45%, #4a381c 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.4),
    0 0 0 6px #8a7a60,
    0 0 0 9px #f0e4c8,
    0 0 0 12px #5a4c38,
    0 0 0 15px #241c14,
    0 14px 36px rgba(0, 0, 0, 0.55) !important;
}
body.room-theme-sandbar .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(160, 120, 70, 0.45),
    rgba(28, 20, 14, 0.96) 70%
  ) !important;
  border-color: rgba(240, 228, 200, 0.5) !important;
}

body.room-theme-ivy,
body.room-theme-ivy #lobby,
body.room-theme-ivy #waiting,
body.room-theme-ivy .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #244028 0%, #101810 55%, #080a08 100%) !important;
}
body.room-theme-ivy .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #2f6b3c 0%, #1c4428 45%, #0e2416 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.48),
    0 0 0 6px #7a5c22,
    0 0 0 9px #d4b45a,
    0 0 0 12px #4a3814,
    0 0 0 15px #1c1608,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-ivy .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(40, 90, 50, 0.5),
    rgba(12, 20, 14, 0.96) 70%
  ) !important;
  border-color: rgba(212, 180, 90, 0.5) !important;
}

body.room-theme-frost,
body.room-theme-frost #lobby,
body.room-theme-frost #waiting,
body.room-theme-frost .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #2a3a48 0%, #121820 55%, #080a0c 100%) !important;
}
body.room-theme-frost .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #6a8aaa 0%, #3a546c 45%, #1a2834 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.42),
    0 0 0 6px #8a98a4,
    0 0 0 9px #e8f0f6,
    0 0 0 12px #4a545c,
    0 0 0 15px #1a2024,
    0 14px 36px rgba(0, 0, 0, 0.58) !important;
}
body.room-theme-frost .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(80, 110, 140, 0.48),
    rgba(14, 18, 24, 0.96) 70%
  ) !important;
  border-color: rgba(232, 240, 246, 0.5) !important;
}

body.room-theme-cocoa,
body.room-theme-cocoa #lobby,
body.room-theme-cocoa #waiting,
body.room-theme-cocoa .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #3a2418 0%, #1a100c 55%, #0c0806 100%) !important;
}
body.room-theme-cocoa .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #6b3e28 0%, #422616 45%, #24140c 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.48),
    0 0 0 6px #7a5a30,
    0 0 0 9px #c9a06a,
    0 0 0 12px #4a3418,
    0 0 0 15px #1c140a,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-cocoa .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(90, 50, 30, 0.5),
    rgba(18, 12, 8, 0.96) 70%
  ) !important;
  border-color: rgba(201, 160, 106, 0.5) !important;
}

body.room-theme-plum,
body.room-theme-plum #lobby,
body.room-theme-plum #waiting,
body.room-theme-plum .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #3a2040 0%, #180c1c 55%, #0a060c 100%) !important;
}
body.room-theme-plum .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #6a3a6e 0%, #422246 45%, #221226 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.48),
    0 0 0 6px #7a6230,
    0 0 0 9px #e6d08a,
    0 0 0 12px #4a3a18,
    0 0 0 15px #1c160a,
    0 14px 36px rgba(0, 0, 0, 0.6) !important;
}
body.room-theme-plum .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(90, 40, 100, 0.48),
    rgba(16, 10, 20, 0.96) 70%
  ) !important;
  border-color: rgba(230, 208, 138, 0.5) !important;
}

body.room-theme-ink,
body.room-theme-ink #lobby,
body.room-theme-ink #waiting,
body.room-theme-ink .game-room {
  background: radial-gradient(120% 80% at 50% 0%, #1a2438 0%, #0c1018 55%, #06080c 100%) !important;
}
body.room-theme-ink .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #243056 0%, #141c34 45%, #0a101c 100%) !important;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.55),
    0 0 0 6px #5a646e,
    0 0 0 9px #b8c2cc,
    0 0 0 12px #343a42,
    0 0 0 15px #14181c,
    0 14px 36px rgba(0, 0, 0, 0.65) !important;
}
body.room-theme-ink .waiting-felt {
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(40, 50, 80, 0.5),
    rgba(10, 12, 18, 0.97) 70%
  ) !important;
  border-color: rgba(184, 194, 204, 0.45) !important;
}

.lt-play.winner {
  transform: scale(1.08);
  z-index: 6;
}
.lt-win-stamp {
  position: absolute;
  top: -0.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: #c9a227;
  color: #1a1408;
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.lt-play.winner .card-face {
  outline: 3px solid #ffe082 !important;
  box-shadow:
    0 0 0 3px rgba(255, 224, 130, 0.55),
    0 0 22px rgba(201, 162, 39, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
.lt-play.lt-win-burst .card-face {
  animation: ltWinPulse 0.7s ease-out;
}
@keyframes ltWinPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
.lt-plays.lt-capturing .lt-play:not(.winner) {
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.lt-plays.lt-capturing .lt-play:not(.winner) .card-face {
  filter: saturate(0.7);
}

.gfx-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: 50vh;
  overflow: auto;
}
.gfx-toggle {
  font-size: 0.88rem;
}

/* 1 felt */
body.gfx-feltTexture .table-felt::before {
  opacity: 0.7;
}
body.gfx-feltTexture .waiting-felt {
  background-image:
    radial-gradient(120% 80% at 50% 40%, rgba(80, 140, 70, 0.35), rgba(18, 42, 22, 0.55) 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

/* 2 wood rail */
body.gfx-woodRail .table-felt {
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.4),
    0 0 0 5px #5a3a1c,
    0 0 0 7px #d7b56a,
    0 0 0 12px #8b5a2b,
    0 0 0 15px #3d2410,
    0 16px 36px rgba(0, 0, 0, 0.62) !important;
}

/* 3 room backdrop */
body.gfx-roomBackdrop #lobby,
body.gfx-roomBackdrop #waiting,
body.gfx-roomBackdrop .game-room {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 12px,
      rgba(0, 0, 0, 0.05) 12px 24px
    );
}

/* 4 richer faces */
body.gfx-richFaces .card-face {
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
body.gfx-richFaces .card-face .rank,
body.gfx-richFaces .card-face .c-rank {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 6 deal arc */
body.gfx-dealArc #myHand .card-face.deal-in,
body.gfx-dealArc #ltHand .card-face.deal-in {
  animation: gfxDealArc 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes gfxDealArc {
  from {
    transform: translate3d(0, -42vh, 0) rotate(-18deg) scale(0.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* 7 play fly */
body.gfx-playFly .trick-card-wrap.latest,
body.gfx-playFly .lt-play.latest .card-face {
  animation: gfxPlayLand 0.32s ease-out;
}
@keyframes gfxPlayLand {
  from {
    transform: translateY(28px) scale(0.7);
    opacity: 0.2;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* 9 winner burst */
body.gfx-winnerBurst .trick-card-wrap.winner .card-face,
body.gfx-winnerBurst .lt-play.winner .card-face {
  box-shadow:
    0 0 0 3px #ffe082,
    0 0 24px rgba(255, 220, 90, 0.9) !important;
}
body.gfx-winnerBurst .lt-play.winner::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  box-shadow: 0 0 24px 6px rgba(201, 162, 39, 0.35);
  pointer-events: none;
}

/* 10 trump banner */
.trump-banner {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 8;
  margin: 0 0 0.2rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: #1b3d1e;
  color: #e8f5e9;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 2px solid #c9a227;
  pointer-events: none;
  align-self: center;
}
.landscape-theater .trump-banner {
  margin: 0 auto 0.15rem;
  flex: 0 0 auto;
}
.trump-banner.hidden {
  display: none;
}
.trump-banner.trump-red {
  background: #7b1c1c;
}
.trump-banner.trump-green {
  background: #1b5e20;
}
.trump-banner.trump-yellow {
  background: #7a5b00;
  color: #fff8e1;
}
.trump-banner.trump-black {
  background: #212121;
}

/* Rubber-stamp slam-down when a bot (or anyone) declares trump */
.trump-banner {
  will-change: transform, opacity;
}
.trump-banner.trump-stamp-anim {
  animation: trumpStampSlam 1.15s cubic-bezier(0.16, 0.9, 0.2, 1.05) both;
}
@keyframes trumpStampSlam {
  0% {
    transform: scale(3.4) rotate(-16deg) translateY(-16px);
    opacity: 0;
    filter: blur(2px);
  }
  38% {
    transform: scale(0.88) rotate(3deg) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
  52% {
    transform: scale(1.18) rotate(-2deg);
  }
  68% {
    transform: scale(0.95) rotate(0.8deg);
  }
  82% {
    transform: scale(1.05) rotate(-0.3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.trump-stamp-burst {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  opacity: 0.9;
  animation: trumpStampBurst 1s ease-out forwards;
}
@keyframes trumpStampBurst {
  0% {
    transform: scale(0.55);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* 11 plaques */
body.gfx-seatPlaques .player-slot .name,
body.gfx-seatPlaques .wait-seat-name {
  background: linear-gradient(#6b4a24, #3d2a14);
  border: 1px solid #c9a227;
  border-radius: 8px;
  padding: 0.12rem 0.4rem;
}

/* 12 painted avatars */
body.gfx-paintedAvatars .seat-avatar-img,
body.gfx-paintedAvatars .wait-seat-av {
  box-shadow:
    0 0 0 2px #c9a227,
    0 3px 8px rgba(0, 0, 0, 0.45);
  filter: contrast(1.08) saturate(1.15);
}

/* 13 tavern score */
body.gfx-tavernScore #scoreBar,
body.gfx-tavernScore .lt-scorebar,
body.gfx-tavernScore #scoreModal .modal-content {
  background: #2a2114 !important;
  border: 2px solid #c9a227 !important;
  color: #f3e2b0;
}

/* 14 bid chips */
body.gfx-bidChips .lt-bid-val,
body.gfx-bidChips #bidValue,
body.gfx-bidChips .lt-bid-value {
  background: radial-gradient(circle at 30% 30%, #eee, #b71c1c 60%, #7f1010);
  color: #fff;
  border-radius: 50%;
  min-width: 2.1rem;
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 3px #ffcdd2,
    0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 15 nest seal */
body.gfx-nestSeal #nestDiscardBadge,
body.gfx-nestSeal #nestGoesBadge {
  background: #6b1d1d;
  border: 2px solid #e6c35c;
  border-radius: 50%;
  min-width: 3.2rem;
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 16 laydown slam */
body.gfx-laydownSlam .claim-remaining-card,
body.gfx-laydownSlam .lt-claim-layer .card-face {
  animation: gfxSlam 0.28s ease-out;
}
@keyframes gfxSlam {
  from {
    transform: translateY(-24px) scale(1.15);
  }
  to {
    transform: none;
  }
}

/* 17 hand banner */
.hand-win-banner {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  z-index: 9;
  padding: 0.4rem 1rem;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.hand-win-banner.made {
  background: #1b5e20;
  color: #c8e6c9;
}
.hand-win-banner.set {
  background: #7f1010;
  color: #ffcdd2;
}
.hand-win-banner.hidden {
  display: none;
}

/* 18 trophy */
body.gfx-matchTrophy #winOverlay .modal-content,
body.gfx-matchTrophy #winOverlay {
  background: radial-gradient(circle at 50% 20%, #5a430f, #1a1408 70%);
}
body.gfx-matchTrophy #winTitle {
  color: #ffe082;
  text-shadow: 0 0 16px rgba(255, 220, 90, 0.5);
}

/* 19 brass UI */
body.gfx-brassUI .btn,
body.gfx-brassUI .icon-btn {
  background: linear-gradient(#7a5a28, #3d2a12);
  border: 1px solid #e0b85a;
  color: #f8e7b0;
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.35);
}
body.gfx-brassUI .btn.primary {
  background: linear-gradient(#c9a227, #7a5a14);
  color: #1a1408;
}
body.gfx-brassUI #lobby .lobby-card .lobby-main.btn.primary {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
}
body.gfx-brassUI #lobby .join-form #joinConfirmBtn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
}
body.gfx-brassUI #lobby .lobby-card .lobby-main.btn:not(.primary),
body.gfx-brassUI #lobby .join-form #spectateBtn,
body.gfx-brassUI #lobby .join-form #joinCancelBtn {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.7);
  text-decoration: none;
}

/* 20 waiting props */
.wait-props {
  display: none;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 1.1rem;
}
body.gfx-waitingProps .wait-props {
  display: flex;
  justify-content: center;
}

/* 21 heavier audio is JS; tiny visual tick */
body.gfx-hapticsHeavy .trick-card-wrap.latest .card-face {
  filter: contrast(1.05);
}

/* 22 light / high contrast */
body.gfx-lightContrast,
body.gfx-lightContrast #lobby,
body.gfx-lightContrast #waiting,
body.gfx-lightContrast .game-room {
  background: #e8e0c8 !important;
  color: #1a1408;
}
body.gfx-lightContrast .table-felt {
  background: radial-gradient(ellipse at 50% 40%, #3cb36a, #1e7a3e 70%) !important;
}
body.gfx-lightContrast .card-face {
  outline: 1px solid #222;
}
body.gfx-lightContrast .btn {
  color: #1a1408;
}

.trick-card-name {
  display: none;
}
body.gfx-trickFan .trick-stack.trick-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 7.2rem;
}
body.gfx-trickFan .trick-stack.trick-fan .trick-card-wrap {
  position: relative !important;
  transform: rotate(calc((var(--card-i, 0) - 1.5) * 7deg)) translateY(calc(var(--card-i, 0) * 2px)) !important;
  left: auto !important;
  top: auto !important;
}
body.gfx-trickFan .trick-stack.trick-fan .trick-card-name {
  display: block;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #ffe9a8;
  text-shadow: 0 1px 2px #000;
  margin-top: 0.15rem;
  max-width: 4.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.gfx-themeBacks .card-back,
body.gfx-themeBacks .hand-card.back {
  filter: saturate(1.15) contrast(1.05);
}

.seat-bank,
.wait-seat-bank,
.lt-bank,
.lt-hand-bank {
  font-size: 0.68rem;
  font-weight: 800;
  color: #c8f7c5;
  text-shadow: 0 1px 2px #000;
  line-height: 1.1;
}
.seat-bank.is-mine,
.wait-seat-bank.is-mine,
.lt-bank.is-mine,
.lt-hand-bank.is-mine {
  cursor: pointer;
  color: #ffe082;
  border-bottom: none;
}
.table-msg-popup {
  position: fixed;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  z-index: 2147483600;
  pointer-events: none;
}
.table-msg-popup.hidden {
  display: none;
}
.table-msg-box {
  background: #1a1408;
  color: #f6edd0;
  border: 3px solid #c9a227;
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  min-width: 220px;
  max-width: min(86vw, 420px);
  box-shadow: 0 12px 32px #000;
  opacity: 1;
}
.table-msg-popup.fade .table-msg-box {
  opacity: 0;
  transition: opacity 0.8s linear;
}
.table-msg-from {
  font-size: 0.72rem;
  font-weight: 800;
  color: #c9a227;
  margin-bottom: 0.25rem;
}
.table-msg-body {
  font-size: 1rem;
  font-weight: 700;
}
#tableMsgModal .modal-content {
  background: #1a1408;
}

.table-msg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: 1px solid #c9a227;
  background: linear-gradient(180deg, #5a3a14 0%, #2a1608 100%);
  color: #ffe082;
  border-radius: 999px;
  padding: 0.12rem 0.38rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  align-self: center;
  margin: 0 0 0.12rem;
  z-index: 9;
}
.table-msg-btn-top {
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  padding: 0.16rem 0.48rem !important;
  font-size: 0.6rem !important;
  white-space: nowrap;
  align-self: center;
}
.top-bar .scores {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  gap: 0.35rem !important;
}
.top-bar .scores #btnTableMsg {
  display: inline-flex !important;
  margin-left: auto !important;
}
.lt-scorebar .table-msg-btn {
  margin-left: auto;
  padding: 0.12rem 0.4rem;
  font-size: 0.58rem;
}
.table-msg-btn-inline {
  margin: 0 auto 0.1rem;
}
@media (orientation: landscape) {
  #btnTableMsg {
    display: none !important;
  }
}

/* Hide the five felt info chips (trump / led / nest dest / bid need / nest count) */
.felt-badges {
  display: none !important;
}

/* Hide "Your play — follow color" bar */
#turnBanner,
.turn-banner {
  display: none !important;
}

/* Offline: no connection markers */
body.offline-play .hor-connection-badge,
body.offline-play #horConnectionBadge {
  display: none !important;
}

#tableMsgModal.modal {
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 0;
}
#tableMsgModal .modal-content {
  margin-top: 0;
  max-height: 42vh;
}
#tableMsgInput {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
}

@media (orientation: landscape) {
}

@media (orientation: landscape) {
  body.in-game #actionPanel.bid-panel:not(.hidden),
  body.in-game #actionPanel.lt-floating-panel.bid-panel:not(.hidden) {
    width: 300px !important;
    max-width: 92vw !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
  }
}

@media (orientation: portrait) {
  #actionPanel.bid-panel:not(.hidden),
  #actionPanel.lt-floating-panel.bid-panel:not(.hidden),
  .game-room > .action-panel.bid-panel:not(.hidden) {
    width: 300px !important;
    max-width: 92vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

@media (orientation: landscape) {
}

.lt-trump-buttons .trump-btn.green,
button.trump-btn.green {
  background: #00c853 !important;
  color: #07331a !important;
}
.lt-trump-buttons .trump-btn.red,
button.trump-btn.red {
  background: #ff1744 !important;
  color: #fff !important;
}
.lt-trump-buttons .trump-btn.yellow,
button.trump-btn.yellow {
  background: #c9a227 !important;
  color: #1a1208 !important;
}
.lt-trump-buttons .trump-btn.black,
button.trump-btn.black {
  background: #111 !important;
  color: #f5e6c8 !important;
}

@media (orientation: landscape) {
  body.in-game .lt-bid-bar:not(.hidden) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: 92vw;
    margin: 0.15rem auto;
    padding: 6px 10px;
    background: rgba(18, 12, 7, 0.88);
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 10px;
    position: relative;
    z-index: 20;
  }
  body.in-game #actionPanel.bid-panel {
    display: none !important;
  }
}

@media (orientation: landscape) {
  body.in-game .landscape-theater:has(#ltEndGame:not(.hidden)) .lt-hand-wrap,
  body.in-game .landscape-theater:has(#ltEndGame:not(.hidden)) .table-msg-btn {
    visibility: hidden;
    pointer-events: none;
  }
}

.lt-felt-bid {
  position: absolute;
  right: 5vw;
  left: auto;
  top: 48%;
  transform: translateY(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  width: max-content;
  max-width: 34vw;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: auto;
}
.lt-felt-bid.hidden {
  display: none !important;
}
.lt-felt-bid .felt-bid-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffe9a8;
  text-shadow: 0 1px 4px #000;
}
.lt-felt-bid .bid-meta {
  font-size: 0.78rem;
  color: #f4ead0;
}
.lt-felt-bid .bid-value {
  font-size: 1.55rem;
  min-width: 2.6rem;
  color: #ffd54f;
  font-weight: 800;
  text-align: center;
}
.lt-felt-bid .btn {
  flex: 0 0 auto !important;
  padding: 6px 14px !important;
  font-size: 1rem !important;
  min-width: 0 !important;
}
@media (orientation: portrait) {
  .lt-felt-bid {
    display: none !important;
  }
}

.lt-view {
  position: relative;
}
.landscape-theater .lt-wait-banner,
.lt-wait-banner,
.lt-kitty-wait {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 260;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  width: min(72vw, 38rem);
  height: auto;
  max-height: 52vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 16px;
  border: 1px solid rgba(232, 196, 110, 0.55);
  background: #0b0d0a;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.lt-wait-banner.hidden,
.lt-kitty-wait.hidden {
  display: none !important;
}
.lt-wait-art,
.lt-kitty-wait-art {
  grid-area: 1 / 1;
  display: none;
  width: 100%;
  height: min(28vh, 9.2rem);
  object-fit: cover;
  object-position: center 42%;
}
.lt-wait-banner.is-discard #ltWaitArtNest,
.lt-wait-banner.is-trump #ltWaitArtTrump {
  display: block;
}
.lt-wait-veil {
  display: none;
}
.lt-wait-copy {
  grid-area: 2 / 1;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: none;
  padding: 0.5rem 0.85rem 0.6rem;
  color: #fff6d8 !important;
  background: #16120c !important;
  text-shadow: none;
  text-align: left;
  box-sizing: border-box;
  border-radius: 0 0 16px 16px;
}
.lt-wait-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e0c36a;
  font-weight: 800;
}
#ltKittyWaitTitle {
  font-weight: 800;
  font-size: clamp(1rem, 2.8vh, 1.35rem);
  line-height: 1.2;
  margin-top: 0.12rem;
  color: #fff6d8;
}
#ltKittyWaitSub {
  margin-top: 0.14rem;
  font-size: clamp(0.7rem, 1.9vh, 0.88rem);
  color: #f4ead0;
  opacity: 1;
}
.lt-wait-dots {
  display: flex;
  gap: 0.28rem;
  margin-top: 0.32rem;
}
.lt-wait-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0c36a;
  animation: waitDot 1.1s ease-in-out infinite;
}
.lt-wait-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.lt-wait-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes waitKenWide {
  from {
    transform: scale(1.02) translateX(0);
  }
  to {
    transform: scale(1.08) translateX(-2%);
  }
}
@keyframes waitDot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@media (orientation: portrait) {
  .lt-wait-banner,
  .lt-kitty-wait {
    display: none !important;
  }
}
@media (orientation: landscape) and (max-height: 400px) {
  .lt-wait-banner {
    height: min(38vh, 11rem);
    width: min(82vw, 36rem);
  }
}

/* Portrait waiting banner — nest / trump */
.pt-wait-banner {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 12;
  width: min(92%, 22rem);
  height: auto;
  max-height: none;
  border-radius: 16px;
  overflow: visible;
  border: 1px solid rgba(232, 196, 110, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  background: #14110c;
}
.pt-wait-banner.hidden {
  display: none !important;
}
.center-area {
  position: relative;
}
.pt-wait-art {
  display: none;
  width: 100%;
  height: min(22vw, 6.6rem);
  object-fit: cover;
  object-position: center 28%;
  border-radius: 16px 16px 0 0;
  flex: 0 0 auto;
}
.pt-wait-banner.is-discard #ptWaitArtNest,
.pt-wait-banner.is-trump #ptWaitArtTrump {
  display: block;
}
.pt-wait-veil {
  display: none;
}
.pt-wait-copy {
  position: relative;
  z-index: 2;
  padding: 0.45rem 0.65rem 0.55rem;
  color: #fff6d8;
  text-shadow: none;
  text-align: center;
  background: #14110c;
  border-radius: 0 0 16px 16px;
}
.pt-wait-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0c36a;
  font-weight: 800;
}
#ptWaitTitle {
  font-weight: 800;
  font-size: clamp(0.88rem, 3.6vw, 1.05rem);
  line-height: 1.25;
  margin-top: 0.12rem;
  color: #fff6d8;
  white-space: normal;
  overflow: visible;
}
#ptWaitSub {
  margin-top: 0.12rem;
  font-size: 0.7rem;
  line-height: 1.25;
  color: #f0e2be;
  opacity: 1;
}
.pt-wait-dots {
  display: flex;
  gap: 0.24rem;
  justify-content: center;
  margin-top: 0.28rem;
}
.pt-wait-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e0c36a;
  animation: waitDot 1.1s ease-in-out infinite;
}
.pt-wait-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.pt-wait-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes waitKenTall {
  from {
    transform: scale(1.04) translateY(0);
  }
  to {
    transform: scale(1.12) translateY(-3%);
  }
}
@media (orientation: landscape) {
  .pt-wait-banner {
    display: none !important;
  }
}
body.pt-wait-open #trickArea {
  opacity: 0.08;
}
body.pt-wait-open #botThinking,
body.lt-wait-open #botThinking {
  display: none !important;
}
body.lt-wait-open #ltPlays {
  opacity: 0.22;
}

/* Experimental Polish — all disabled until individually enabled */
.experimental-warning {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}
.experimental-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.experimental-group {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 0.6rem;
  margin-top: 0.65rem;
}
.experimental-group h3 {
  font-size: 0.9rem;
  color: #c9a227;
  margin-bottom: 0.35rem;
}
.experimental-group .option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.hor-network-toast {
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  transform: translate(-50%, -130%);
  z-index: 10000;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(10, 12, 16, 0.94);
  border: 1px solid rgba(201, 162, 39, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-weight: 700;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
  opacity: 0;
  pointer-events: none;
}
.hor-network-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
body.exp-tableAtmosphere .game-room,
body.exp-tableAtmosphere .waiting-felt {
  box-shadow:
    inset 0 0 80px rgba(255, 215, 120, 0.05),
    0 16px 55px rgba(0, 0, 0, 0.35);
}
body.exp-tableAtmosphere .game-room::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 245, 190, 0.06), transparent 42%);
  border-radius: inherit;
}
body.exp-cardJuice .card {
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease;
}
body.exp-cardJuice .card:hover {
  transform: translateY(-5px) rotate(-1deg);
  filter: brightness(1.04);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}
body.exp-rookAnimation .rook-card,
.rook-card.exp-rook-pulse {
  animation: expRookPulse 0.8s ease-out;
}
@keyframes expRookPulse {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  45% {
    filter: brightness(1.35) drop-shadow(0 0 16px rgba(255, 215, 80, 0.65));
    transform: scale(1.06) rotate(-1deg);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}
body.exp-avatarPersonality .seat-avatar-img,
.seat-avatar-img,
.wait-seat-av {
  animation: expAvatarFloat 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.player-slot:nth-of-type(2) .seat-avatar-img,
.wait-seat:nth-of-type(2) .wait-seat-av {
  animation-duration: 2.4s;
  animation-delay: 0.2s;
}
.player-slot:nth-of-type(3) .seat-avatar-img,
.wait-seat:nth-of-type(3) .wait-seat-av {
  animation-duration: 3.1s;
  animation-delay: 0.45s;
}
.player-slot:nth-of-type(4) .seat-avatar-img,
.wait-seat:nth-of-type(4) .wait-seat-av {
  animation-duration: 2.6s;
  animation-delay: 0.7s;
}
.player-slot.hor-thinking-pulse .seat-avatar-img {
  animation: expAvatarThink 0.55s ease-in-out infinite;
}
@keyframes expAvatarFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-2deg);
  }
}
@keyframes expAvatarThink {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.06);
  }
}
body.exp-statusIndicators .player-slot::after {
  content: '●';
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 0.62rem;
  color: #55d66b;
  text-shadow: 0 0 7px rgba(85, 214, 107, 0.8);
}
body.exp-renderOptimization .game-room,
body.exp-renderOptimization #trickArea {
  contain: layout paint style;
}
/* Keep the fixed tray height without clipping tall card faces at their top. */
body.exp-renderOptimization .hand-area {
  contain: layout style;
}
.hor-match-progress {
  width: min(92vw, 620px);
  margin: 0.25rem auto 0.45rem;
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.72rem;
}
.hor-match-progress .bar {
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  margin-top: 0.2rem;
}
.hor-match-progress .fill {
  height: 100%;
  width: 0%;
  background: currentColor;
  transition: width 0.35s ease;
}

.hor-connection-badge {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  top: max(10px, env(safe-area-inset-top));
  z-index: 9999;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(10, 35, 16, 0.82);
  border: 1px solid rgba(90, 220, 110, 0.45);
  font:
    700 0.68rem/1.1 system-ui,
    sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.hor-connection-badge.bad {
  background: rgba(55, 20, 10, 0.9);
  border-color: rgba(255, 150, 80, 0.55);
}

.beer-fly {
  position: fixed;
  z-index: 26000;
  font-size: 1.8rem;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.beer-fly.landed {
  opacity: 0;
  transition: opacity 0.2s linear;
}
.seat-bought-beer {
  position: absolute;
  top: 0.15rem;
  right: 0.25rem;
  font-size: 1.05rem;
  z-index: 3;
}
.buy-beer-btn {
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.72rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.4rem;
  background: #1a140c;
  color: #f3ead6;
  border: 1px solid #8a6d2e;
}

#illegalWhy {
  z-index: 30000;
  background: #070504;
  color: #f3ead6;
  border: 1px solid #8a6d2e;
  max-width: 16rem;
}

.seat-top-rack {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  z-index: 6;
  pointer-events: none;
}
.seat-top-rack .btn {
  pointer-events: auto;
}
.buy-beer-btn,
.whisper-btn {
  position: static;
  transform: none;
  bottom: auto;
  left: auto;
  font-size: 0.68rem;
  min-height: 1.45rem;
  padding: 0.08rem 0.35rem;
  background: #1a140c;
  color: #f3ead6;
  border: 1px solid #8a6d2e;
  white-space: nowrap;
}
.seat-bought-beer {
  position: static;
  top: auto;
  right: auto;
  font-size: 1rem;
  line-height: 1;
}
body:not(.buy-beer-on) .buy-beer-btn {
  display: none !important;
}
body:not(.whisper-on) .whisper-btn {
  display: none !important;
}
@media (orientation: landscape) {
  .cele-plays {
    gap: 0.4rem;
  }
  .cele-play .card-face {
    overflow: visible;
  }
}
.tutorial-overlay {
  z-index: 40000;
}

.player-slot .name[data-plaque-team='0'],
.player-slot[data-plaque-team='0'] .name,
body.gfx-seatPlaques .player-slot .name[data-plaque-team='0'] {
  background: var(--plaque-a-bg, #111) !important;
  color: var(--plaque-a-fg, #fff) !important;
}
.player-slot .name[data-plaque-team='1'],
.player-slot[data-plaque-team='1'] .name,
body.gfx-seatPlaques .player-slot .name[data-plaque-team='1'] {
  background: var(--plaque-b-bg, #f5f5f5) !important;
  color: var(--plaque-b-fg, #111) !important;
}
.player-slot.is-turn .name[data-plaque-team] {
  box-shadow:
    0 0 0 2px #ffd54f,
    0 0 10px rgba(255, 213, 79, 0.4);
}
.table-msg-popup {
  pointer-events: auto;
}
.table-msg-close {
  margin-top: 0.55rem;
  width: 100%;
}
@media (orientation: landscape) {
  .cele-page {
    padding: max(0.2rem, env(safe-area-inset-top)) 0.45rem max(0.2rem, env(safe-area-inset-bottom));
    overflow: hidden !important;
    align-items: stretch;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .cele-inner {
    display: grid !important;
    grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) minmax(6.5rem, auto);
    grid-template-rows: auto auto minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0;
    gap: 0.22rem 0.45rem;
    align-items: stretch;
    overflow: hidden !important;
    align-content: stretch;
  }
  .cele-actions,
  .cele-actions:not(.hidden) {
    position: static;
    display: contents !important;
    width: auto;
    padding: 0;
  }
  .cele-actions-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }
  .cele-actions-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-end;
  }
  .cele-head {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    padding: 0 0.2rem;
  }
  .cele-head p {
    display: none !important;
  }
  .cele-recap {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
  }
  .cele-recap .recap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.28rem;
  }
  .cele-recap .recap-grid div {
    padding: 0.18rem 0.4rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    min-height: 0;
  }
  .cele-recap .recap-grid span {
    display: inline;
    font-size: 0.62rem;
    white-space: nowrap;
  }
  .cele-recap .recap-grid b {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cele-stage {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    min-height: 0;
    max-height: none;
    align-items: stretch;
  }
  .cele-trick {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.35rem 0.55rem 0.4rem !important;
    box-sizing: border-box;
  }
  .cele-trick-head {
    margin-bottom: 0.25rem;
    flex: 0 0 auto;
  }
  .cele-plays {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.4rem;
    justify-content: center;
    align-items: end;
  }
  .cele-play {
    min-height: 0;
  }
  .cele-play .card-face {
    width: min(16vw, 18svh, 100px) !important;
    height: min(25svh, calc(min(16vw, 18svh, 100px) * 1.4)) !important;
  }
  .cele-actions .btn {
    min-width: 0;
    min-height: 1.7rem;
    font-size: 0.7rem;
    padding: 0.14rem 0.45rem;
  }
}
@media (orientation: landscape) and (max-height: 480px) {
  .cele-page {
    padding: 0.16rem 0.3rem;
  }
  .cele-kicker {
    font-size: 0.55rem;
  }
  .cele-head h1 {
    font-size: clamp(0.95rem, 3.8svh, 1.3rem) !important;
  }
  .cele-recap .recap-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cele-play .card-face {
    width: min(14vw, 16svh, 88px) !important;
    height: min(22svh, calc(min(14vw, 16svh, 88px) * 1.4)) !important;
  }
}
@media (orientation: portrait) {
  .cele-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }
  .cele-actions-left,
  .cele-actions-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

/* ===== RookGame65: readable name + bid box (no clip) ===== */

.lt-felt-bid {
  max-width: min(32vw, 17.5rem) !important;
}

/* Seat names: small contrasting plaque so they stay readable on felt */
.player-slot .name {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  background: rgba(16, 11, 7, 0.86);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 8px;
  padding: 0.1rem 0.42rem;
  color: #ffe9a8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* ===== RookGame66: lay-down banner + why-tooltip ===== */
.claim-laydown-banner {
  background: linear-gradient(
    180deg,
    rgba(18, 12, 7, 0.96) 0%,
    rgba(10, 7, 4, 0.97) 100%
  ) !important;
  border: 1.5px solid rgba(232, 196, 92, 0.85) !important;
  color: #ffe082 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 226, 150, 0.16) !important;
  max-width: min(78vw, 24rem) !important;
  width: max-content !important;
  padding: 0.5rem 0.9rem !important;
  z-index: 160000 !important;
  pointer-events: none !important;
}
@media (orientation: portrait) {
  /* Lower in the empty band, toward the left/right seat names */
  .claim-laydown-banner {
    top: 34% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
@media (orientation: landscape) {
  /* Nudge down a little from the top strip; stay clear of seats and hand */
  .claim-laydown-banner {
    top: 12% !important;
    transform: translate(-50%, 0) !important;
    max-width: min(70vw, 28rem) !important;
  }
}
#illegalWhy,
.illegal-why {
  z-index: 220000 !important;
  background: rgba(10, 7, 4, 0.96) !important;
  color: #ffe082 !important;
  border: 1.5px solid rgba(232, 196, 92, 0.8) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
  padding: 0.4rem 0.65rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-width: min(16rem, 80vw) !important;
  pointer-events: none !important;
}

.gh-bid-hint {
  display: none !important;
}

body.trick-resolving .trick-card-wrap.latest,
body.trick-resolving.gfx-playFly .trick-card-wrap.latest,
body.trick-resolving.gfx-playFly .lt-play.latest .card-face {
  animation: none !important;
}
.trick-flight-card {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.trick-flight-card .trick-card-name {
  display: none;
}

/* ===== RookGame71: nest reveal readability ===== */
.gh-nest-anim {
  background: rgba(5, 8, 6, 0.48) !important;
}
.gh-nest-banner {
  background: linear-gradient(180deg, rgba(35, 23, 10, 0.98), rgba(12, 9, 6, 0.97)) !important;
  border: 2px solid rgba(255, 213, 79, 0.72) !important;
  border-radius: 14px !important;
  padding: 0.42rem 0.8rem !important;
  color: #fff3c4 !important;
  text-shadow: 0 2px 4px #000 !important;
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.65),
    0 0 0 3px rgba(0, 0, 0, 0.22) !important;
  font-weight: 900 !important;
}
.gh-nest-row {
  background: linear-gradient(180deg, rgba(38, 25, 12, 0.98), rgba(15, 10, 7, 0.98)) !important;
  border: 2px solid rgba(255, 213, 79, 0.58) !important;
  border-radius: 16px !important;
  padding: 0.55rem 0.65rem !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ===== RookGame71: landscape room/table decoration ===== */
@media (orientation: landscape) {
  body.in-game .landscape-theater {
    background:
      radial-gradient(
        circle at 50% 44%,
        rgba(48, 106, 61, 0.42),
        rgba(11, 36, 20, 0.88) 48%,
        rgba(4, 10, 7, 1) 100%
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.025) 0 18px,
        rgba(0, 0, 0, 0.035) 18px 36px
      ) !important;
    box-shadow:
      inset 0 0 0 8px rgba(70, 42, 18, 0.85),
      inset 0 0 0 11px rgba(222, 181, 91, 0.25),
      inset 0 0 70px rgba(0, 0, 0, 0.65) !important;
  }
  body.in-game .landscape-theater::before {
    content: '♜  HOUSE OF ROOKS  ♜';
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    color: rgba(255, 224, 130, 0.32);
    font-size: clamp(0.58rem, 1.8vh, 0.8rem);
    letter-spacing: 0.18em;
    text-shadow: 0 1px 3px #000;
    pointer-events: none;
  }
  body.in-game .landscape-theater::after {
    content: '';
    position: absolute;
    left: 2.5vw;
    right: 2.5vw;
    top: 9vh;
    bottom: 7vh;
    border: 1px solid rgba(255, 213, 79, 0.16);
    border-radius: 28px;
    box-shadow:
      0 0 0 5px rgba(0, 0, 0, 0.08),
      inset 0 0 35px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 0;
  }
  body.in-game .landscape-theater .lt-view {
    position: relative;
    border-radius: 26px;
    background: radial-gradient(
      ellipse at 50% 48%,
      rgba(24, 112, 57, 0.22),
      rgba(5, 24, 13, 0.18) 68%,
      transparent 100%
    );
  }
  body.in-game .landscape-theater .lt-plays {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  }
  body.in-game .landscape-theater .lt-hand-wrap {
    background: linear-gradient(180deg, rgba(45, 28, 14, 0.78), rgba(15, 10, 7, 0.9));
    border: 1px solid rgba(224, 184, 90, 0.34);
    border-radius: 16px 16px 8px 8px;
    box-shadow:
      0 -4px 18px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  body.in-game .landscape-theater .lt-decor.lt-corner {
    opacity: 0.65;
    font-size: clamp(1rem, 3vh, 1.6rem);
    text-shadow: 0 2px 5px #000;
  }
  body.in-game .landscape-theater .lt-decor.lt-corner {
    opacity: 0.65;
  }
}

.landscape-bottom-take-badge {
  position: fixed !important;
  transform: translate(-50%, 8px) scale(0.72);
  opacity: 0;
  background: linear-gradient(180deg, rgba(112, 75, 18, 0.98), rgba(42, 26, 8, 0.98));
  color: #fff4c7;
  border: 2px solid #ffe082;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: clamp(0.65rem, 2vh, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px #000;
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.25),
    0 6px 22px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(255, 213, 79, 0.42);
  white-space: nowrap;
  transition:
    transform 0.28s ease-out,
    opacity 0.28s ease-out;
}
.landscape-bottom-take-badge.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

/* RookGame71: tiny overall table reduction so the full table clears the viewport. */
@media (orientation: portrait) {
  body.in-game .table-felt {
    width: min(94%, 322px) !important;
    max-width: min(322px, 84vw) !important;
    height: 95% !important;
    max-height: 95% !important;
  }
}

/* RookGame73: JS flight layer is the only owner of trick-card capture. */
.trick-stack.trick-swipe .trick-card-wrap,
.trick-stack.swipe-me .trick-card-wrap,
.trick-stack.swipe-left .trick-card-wrap,
.trick-stack.swipe-right .trick-card-wrap,
.trick-stack.swipe-top .trick-card-wrap {
  animation: none !important;
}

/* Separate team badge from the name so it can never jumble player text. */
.team-marker {
  top: auto !important;
  right: 0.15rem !important;
  bottom: -0.35rem !important;
  min-width: 1.15rem !important;
  height: 1.15rem !important;
  padding: 0 0.2rem !important;
  border-radius: 0.42rem !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.04em;
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* RookGame74: names stay on one line; bottom take uses a seat chip, not a flight. */
.player-slot .name,
.player-slot.bottom .name,
#slot-me .name,
.wait-seat-name {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  flex-wrap: nowrap !important;
}
.player-slot .name .player-name-text,
.wait-seat-name {
  white-space: nowrap !important;
}
.player-slot.left,
.player-slot.right,
.player-slot.top {
  overflow: visible;
}
.player-slot.left .name,
.player-slot.right .name,
.player-slot.top .name {
  max-width: min(100%, 11.5rem);
}

/* ===== RookGame74 requested UI cleanup / history layout ===== */
.player-slot .team-marker,
.team-marker {
  display: none !important;
}
.player-slot .cards-count {
  display: none !important;
}
.player-slot .name,
.player-slot .name .player-name-text,
.lt-name,
.lt-th-name,
.portrait-th-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: none !important;
}
.player-slot .name .player-name-text {
  display: inline !important;
}

/* Landscape controls flank the hand evenly: This trick | hand | Last 3 tricks */
.landscape-theater .lt-inner {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas: 'header' 'view' 'hand' !important;
}
.landscape-theater .lt-hand-controls {
  grid-area: hand !important;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(0, auto) minmax(92px, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 2vw, 22px);
  box-sizing: border-box;
  padding: 0.2rem clamp(8px, 2vw, 22px);
}
.landscape-theater .lt-hand-controls > .lt-tab {
  justify-self: center;
  align-self: center;
  margin: 0 !important;
  min-width: 88px;
}
.landscape-theater .lt-hand-controls .lt-hand-wrap {
  grid-area: auto !important;
  width: auto;
  max-width: min(78vw, 900px);
  min-width: 0;
}
.landscape-theater .lt-hand-controls .lt-hand {
  overflow-x: auto;
}
.landscape-theater .lt-hand-controls .lt-hand-label {
  white-space: normal;
}

/* Last 3 landscape view: exactly three centered, evenly spaced trick panels. */
.landscape-theater .lt-view-last5 {
  overflow: hidden !important;
  justify-content: center !important;
  align-items: center !important;
}
.landscape-theater .lt-last5-body {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: min(100%, 1200px) !important;
  height: 100% !important;
  overflow: hidden !important;
  gap: clamp(8px, 1.5vw, 20px) !important;
  padding: clamp(8px, 1.2vw, 16px) !important;
  box-sizing: border-box !important;
}
.landscape-theater .lt-th-card {
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  justify-content: flex-start !important;
  padding: clamp(6px, 1vw, 12px) !important;
}
.landscape-theater .lt-th-plays {
  width: 100% !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  gap: clamp(2px, 0.7vw, 8px) !important;
}

/* Portrait: trick point total sits above the hand cards, not on the felt */
.trick-pts-bar {
  flex: 0 0 auto;
  align-self: center;
  margin: 0.08rem auto 0.12rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: rgba(18, 12, 7, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #ffe082;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  z-index: 36;
}
.trick-pts-bar.hidden {
  display: none !important;
}

/* Lead marker lives on the seat plaque, away from center trick flights */
.seat-lead-tag {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  background: #c9a227;
  color: #1a120b;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.player-slot.top > .seat-lead-tag {
  top: auto;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
}
.player-slot.left > .seat-lead-tag {
  top: -0.15rem;
  left: 0;
  right: auto;
}
.player-slot.right > .seat-lead-tag {
  top: -0.15rem;
  right: 0;
  left: auto;
}
.player-slot.bottom > .seat-lead-tag {
  top: auto;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
}

@media (orientation: landscape) {
  .trick-pts-bar,
  .seat-lead-tag {
    display: none !important;
  }
}
.landscape-theater .lt-th-play {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.landscape-theater .lt-th-play .card-face {
  width: min(10vw, 12vh, 58px) !important;
  height: min(14vw, 18vh, 84px) !important;
}
.landscape-theater .lt-th-name {
  text-align: center !important;
  font-size: clamp(0.5rem, 1.5vh, 0.72rem) !important;
}

/* Last 3 button: top-right of the table, inset so it never covers wall sconces. */
.table-last3-btn {
  position: absolute;
  top: 6px;
  right: max(58px, calc(50% - min(48.5%, 165px) + 8px));
  z-index: 12;
  min-height: 30px;
  padding: 0.28rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.75);
  background: rgba(18, 22, 14, 0.92);
  color: #ffe082;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  white-space: nowrap;
  transform: translateX(-50%);
}
.table-last3-btn:active {
  transform: translateX(-50%) scale(0.97);
}
/* A Rook 006: empty portrait center is the only previous-trick affordance. */
@media (orientation: portrait) {
  /* ROOK011: a real, broad hit target centered on the empty felt — and only there. */
  #trickArea.portrait-previous-trick-ready {
    pointer-events: auto;
    cursor: pointer;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 190px !important;
    height: 170px !important;
    min-height: 170px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 25 !important;
    background: transparent !important;
  }
  #trickArea.portrait-previous-trick-open {
    pointer-events: auto;
    cursor: pointer;
  }
  #trickArea .portrait-previous-trick-card {
    pointer-events: none;
  }
  /* ROOK010: readable four-seat review spread; live trick presentation is unchanged. */
  #trickArea .portrait-previous-trick-stack {
    width: 164px;
    height: 188px;
  }
  #trickArea .portrait-previous-trick-card {
    margin-left: -25px;
    margin-top: -36px;
  }
  #trickArea .portrait-previous-trick-card .card-face {
    width: 50px !important;
    height: 72px !important;
  }
  .portrait-last-trick-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 72px);
    z-index: 60;
    max-width: 210px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(15, 11, 7, 0.86);
    border: 1px solid rgba(224, 187, 92, 0.48);
    color: #f3dfaa;
    font:
      700 10px/1.2 system-ui,
      sans-serif;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    animation: portrait-last-trick-hint-fade 2.6s ease both;
  }
  .portrait-last-trick-hint.hidden {
    display: none !important;
  }
}
@media (orientation: landscape) {
  .portrait-last-trick-hint {
    display: none !important;
  }
}
@keyframes portrait-last-trick-hint-fade {
  0% {
    opacity: 0;
  }
  12%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* RookGame78: side-seat avatars sit above the name, not beside it. */
.player-slot.left,
.player-slot.right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.18rem !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  max-width: none !important;
}
.player-slot.left .seat-avatar-side,
.player-slot.right .seat-avatar-side {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  order: -1;
  width: 1.95rem !important;
  height: 1.95rem !important;
  margin: 0 0 0.05rem !important;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 213, 79, 0.35);
}
.player-slot.left .seat-avatar-side .seat-avatar-img,
.player-slot.right .seat-avatar-side .seat-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.player-slot.left .name,
.player-slot.right .name {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  line-height: 1.15 !important;
}
.player-slot.left .player-name-text,
.player-slot.right .player-name-text {
  display: inline !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Keep the $150 beer control above the entire seat card, never over the name. */
.player-slot .seat-top-rack {
  top: -2.05rem !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
}
.player-slot.left .seat-top-rack,
.player-slot.right .seat-top-rack {
  top: -2.45rem !important;
}
.player-slot .seat-top-rack .buy-beer-btn {
  position: static !important;
  margin: 0 !important;
}

/* True ellipse — kill any leftover pinched 48%/42% radii. */
.table-felt,
.table-felt::before,
.table-felt::after {
  border-radius: 50% !important;
}

/* Landscape nest-after-win: no grey veil on the cards. */
@media (orientation: landscape) {
  .gh-nest-anim {
    background: rgba(4, 8, 6, 0.16) !important;
  }
  .gh-nest-card,
  .gh-nest-card .card-face,
  .lt-endgame-nest-card,
  .lt-endgame-nest-card .card-face,
  .lt-remaining-cards .card-face,
  .lt-remaining-cards .claim-remaining-card {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
  .lt-endgame-nest-card .card-face {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
}

/* ===== RookGame80: final requested positioning/readability fixes ===== */
/* Portrait: horizontal position is set at runtime by
   positionPortraitLast3Btn() in game.js (measured against the right
   sconce's actual rendered position), so no fixed value is forced here. */
@media (orientation: portrait) {
  .table-last3-btn:active {
    transform: scale(0.97) !important;
  }
}

/* Landscape: give the nest reveal its own dark backdrop so the cards read
   clearly against the table felt (the overlay now renders above the
   landscape theater, so this backdrop is no longer hidden behind it). */
@media (orientation: landscape) {
  #ghNestAnim.gh-nest-anim {
    background: rgba(4, 8, 6, 0.6) !important;
  }
  #ghNestAnim.gh-nest-anim .gh-nest-card,
  #ghNestAnim.gh-nest-anim .gh-nest-card .card-face,
  #ghNestAnim.gh-nest-anim .gh-nest-card .card-face * {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
}

/* RookGame83: portrait Last 3 sits just left of the right wall sconce,
   clear of its glow. Position is computed at runtime (see
   positionPortraitLast3Btn in game.js) from the sconce's actual rendered
   position, which is far more reliable than a fixed percentage. */
@media (orientation: portrait) {
  .table-last3-btn {
    left: auto !important;
  }
}

/* RookGame87: boxed thinking + last-play captions, thinking dropped toward Message */
:is(#botThinking, .auction-status).bot-thinking,
.bot-thinking {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 0.2rem;
  margin: 0;
  transform: translate(-50%, 0);
  z-index: 16;
  width: max-content;
  max-width: min(94vw, 16.5rem);
  padding: 0.14rem 0.5rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  background: rgba(8, 18, 28, 0.88);
  border: 1px solid rgba(129, 212, 250, 0.55);
  border-radius: 999px;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #e1f5fe;
  font-size: 0.58rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: visible;
  pointer-events: none;
}
:is(#botThinking, .auction-status).bot-thinking.hidden,
.bot-thinking.hidden {
  display: none !important;
}
:is(#botThinking, .auction-status).bot-thinking .seat-avatar {
  width: 0.82rem;
  height: 0.82rem;
  flex: 0 0 auto;
}

#trickArea,
.trick {
  overflow: visible !important;
}
.center-area .trick .trick-caption,
.trick-caption,
.trick-count {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto;
  margin: 0.22rem auto 0;
  padding: 0.14rem 0.5rem;
  box-sizing: border-box;
  background: rgba(18, 10, 4, 0.88);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 999px;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #ffe9a8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ===== Guaranteed bottom-player trick winner notice =====
   This is deliberately independent of the table/trick DOM so it cannot be
   clipped or swallowed by portrait/landscape containers. */
.bottom-trick-winner-notice {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0.55) !important;
  width: min(88vw, 520px) !important;
  box-sizing: border-box !important;
  padding: 1rem 1.25rem 1.05rem !important;
  border: 3px solid #ffd54f !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(67, 45, 8, 0.98), rgba(18, 13, 5, 0.98)) !important;
  color: #fff7d6 !important;
  text-align: center !important;
  box-shadow:
    0 12px 42px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(255, 213, 79, 0.65) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif !important;
  transition: none !important;
}
.bottom-trick-winner-notice.btwn-show {
  visibility: visible !important;
  animation: bottomTrickWinnerPop 2.2s cubic-bezier(0.18, 0.9, 0.2, 1) both !important;
}
.btwn-trophy {
  font-size: 2.4rem !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}
.btwn-title {
  font-size: clamp(1.25rem, 5vw, 2.15rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.035em !important;
  text-shadow: 0 3px 8px #000 !important;
}
.btwn-sub {
  margin-top: 0.2rem !important;
  font-size: clamp(0.78rem, 2.6vw, 1rem) !important;
  font-weight: 750 !important;
  opacity: 0.95 !important;
}
@keyframes bottomTrickWinnerPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) !important;
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) !important;
  }
  22% {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96) !important;
  }
}
@media (orientation: landscape) {
  .bottom-trick-winner-notice.btwn-show {
    top: 52% !important;
    width: min(58vw, 620px) !important;
    padding: 0.65rem 1.15rem 0.75rem !important;
  }
  .bottom-trick-winner-notice .btwn-trophy {
    font-size: 1.65rem !important;
  }
  .bottom-trick-winner-notice .btwn-title {
    font-size: clamp(1.15rem, 4vw, 1.85rem) !important;
  }
}

/* RookGame103: kitty gets its own screen before discard selection.  Because
   the bidder's hand is hidden on this screen, give the kitty cards the full
   width they need while keeping every card inside the viewport. */
.discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-cards {
  width: min(96vw, 620px) !important;
  max-width: min(96vw, 620px) !important;
  gap: clamp(3px, 1.2vw, 10px) !important;
  justify-content: center !important;
  overflow: visible !important;
}
.discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-flash-card,
.discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-cards .card-face {
  width: clamp(46px, calc((96vw - 25px) / 6), 88px) !important;
  height: auto !important;
  aspect-ratio: 58 / 84 !important;
  flex: 0 1 auto !important;
  max-width: 88px !important;
  max-height: min(55vh, 128px) !important;
}
@media (orientation: landscape) {
  .discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-cards {
    width: min(92vw, 680px) !important;
    max-width: min(92vw, 680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
  .discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-flash-card,
  .discard-sheet-kitty-only .discard-kitty.kitty-flashing .kitty-cards .card-face {
    width: clamp(50px, calc((100% - 40px) / 6), 88px) !important;
    height: auto !important;
    aspect-ratio: 58 / 84 !important;
    max-height: min(55vh, 140px) !important;
    box-sizing: border-box !important;
  }
}

/* RookGame103 FINAL: dedicated kitty-only screen.
   The kitty is shown by itself in a centered panel.  A six-column grid is
   used instead of flex sizing so the rightmost card can never be pushed
   outside the panel on Android WebViews in landscape. */
.discard-sheet-kitty-only {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.discard-sheet-kitty-only .discard-kitty.kitty-flashing {
  width: min(92vw, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 14px 14px 12px !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(255, 213, 79, 0.55) !important;
  border-radius: 14px !important;
  background: rgba(22, 17, 12, 0.96) !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  overflow: hidden !important;
}
.discard-sheet-kitty-only .kitty-cards {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(4px, 1vw, 10px) !important;
  margin: 10px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.discard-sheet-kitty-only .kitty-cards .card-face,
.discard-sheet-kitty-only .kitty-flash-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 58 / 84 !important;
  max-height: 42vh !important;
  flex: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.discard-sheet-kitty-only .kitty-label {
  text-align: center !important;
  margin: 0 0 6px !important;
  line-height: 1.1 !important;
}
.discard-sheet-kitty-only .kitty-hint {
  text-align: center !important;
  margin: 6px 0 0 !important;
  line-height: 1.2 !important;
}
@media (orientation: landscape) {
  .discard-sheet-kitty-only {
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  .discard-sheet-kitty-only .discard-kitty.kitty-flashing {
    width: min(88vw, 760px) !important;
    max-width: 760px !important;
    padding: 10px 12px !important;
  }
  .discard-sheet-kitty-only .kitty-cards {
    gap: clamp(4px, 0.8vw, 9px) !important;
    margin: 7px auto !important;
  }
  .discard-sheet-kitty-only .kitty-cards .card-face,
  .discard-sheet-kitty-only .kitty-flash-card {
    max-height: min(62vh, 190px) !important;
  }
}

/* RookGame103: FINAL kitty-only sizing correction.
   Portrait is deliberately independent from landscape. Six cards are
   given a fixed flex footprint calculated from the actual panel width.
   This prevents the sixth card from being pushed off-screen by grid
   rounding, intrinsic card width, or WebView CSS conflicts. */
@media (orientation: portrait) {
  /* Keep the full kitty PANEL inside the actual viewport, not just the cards.
     The previous rule sized the outer sheet to 100dvh and then centered a
     padded/bordered panel, which could put part of that panel beyond the
     viewport on Android WebViews. */
  #discardOverlay .discard-sheet-kitty-only {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .discard-kitty.kitty-flashing {
    width: calc(100vw - 16px) !important;
    max-width: 620px !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 auto !important;
    padding: 12px 7px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card {
    flex: 0 0 calc((100% - 10px) / 6) !important;
    width: calc((100% - 10px) / 6) !important;
    min-width: 0 !important;
    max-width: calc((100% - 10px) / 6) !important;
    height: auto !important;
    aspect-ratio: 58 / 84 !important;
    /* Leave room for the label, hint, padding and border of the box. */
    max-height: min(55vh, calc((100dvh - 150px) * 1)) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* The card face itself must obey the same computed footprint. */
  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card .card-face {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-label,
  #discardOverlay .discard-sheet-kitty-only .kitty-hint {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* FINAL PORTRAIT KITTY BOX FIX: keep the actual bordered panel fully inside
   the viewport.  The panel, not just its cards, gets a hard viewport budget. */
@media (orientation: portrait) {
  #discardOverlay .discard-sheet-kitty-only {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .discard-kitty.kitty-flashing {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    padding: 9px 6px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-width: 2px !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards {
    width: 100% !important;
    max-width: 100% !important;
    margin: 7px 0 !important;
    padding: 0 !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card {
    flex: 0 0 calc((100% - 10px) / 6) !important;
    width: calc((100% - 10px) / 6) !important;
    max-width: calc((100% - 10px) / 6) !important;
    min-width: 0 !important;
    aspect-ratio: 58 / 84 !important;
    height: auto !important;
    max-height: calc(100dvh - 120px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card .card-face,
  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .card-face {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-label {
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.05 !important;
    margin: 0 0 4px !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-hint {
    font-size: clamp(11px, 3.1vw, 14px) !important;
    line-height: 1.1 !important;
    margin: 5px 0 0 !important;
  }
}

/* FINAL KITTY PORTRAIT EDGE-SAFE FIX
   Keep the complete kitty box inside the viewport.  The box width includes
   its own padding/border so it can never extend past the right edge. */
@media (orientation: portrait) {
  #discardOverlay .discard-sheet-kitty-only {
    box-sizing: border-box !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .discard-kitty.kitty-flashing {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 6px !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-label,
  #discardOverlay .discard-sheet-kitty-only .kitty-hint {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* Portrait nest/kitty box: every card must fit inside the bordered panel.
   Markup uses .kitty-flash-card ON the .card-face (no inner wrapper). */
@media (orientation: portrait) {
  #discardOverlay .discard-sheet-kitty-only {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #discardOverlay .discard-sheet-kitty-only .discard-kitty.kitty-flashing {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: min(100%, 640px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 10px 8px 8px !important;
    overflow: hidden !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 3px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    justify-content: stretch !important;
  }

  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .kitty-flash-card,
  #discardOverlay .discard-sheet-kitty-only .kitty-cards > .card-face {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 58 / 84 !important;
    flex: none !important;
    flex-shrink: 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .gh-nest-anim {
    padding: 8px !important;
    box-sizing: border-box !important;
  }
  .gh-nest-row {
    box-sizing: border-box !important;
    width: min(94vw, 640px) !important;
    max-width: 94vw !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow: hidden !important;
  }
  .gh-nest-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  .gh-nest-card .card-face {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 58 / 84 !important;
  }

  #scoreModal .scoreboard-nest-final-cards {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  #scoreModal .nest-final-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 58 / 84 !important;
    flex: none !important;
  }
}

.join-site-link {
  color: #ffe08a;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-all;
}

/* Tiny browser-only full-size / minimize control */
.browser-fit-btn {
  position: fixed;
  z-index: 250000;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 224, 138, 0.35);
  border-radius: 9px;
  background: rgba(18, 14, 10, 0.55);
  color: #ffe08a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.42;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.browser-fit-tl {
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  right: auto;
  bottom: auto;
}
.browser-fit-br {
  top: auto;
  left: auto;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.browser-fit-btn:hover,
.browser-fit-btn:focus {
  opacity: 0.95;
  background: rgba(28, 20, 12, 0.82);
}
.browser-fit-btn:active {
  transform: scale(0.96);
}
.browser-fit-btn.is-full {
  opacity: 0.7;
}
body.page-fit {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  height: 100svh !important;
  overflow: hidden !important;
}
body.page-fit #app,
body.page-fit .screen:not(.hidden) {
  min-height: 100% !important;
  height: 100% !important;
}

/* Waiting room — one screen, no scroll */
#waiting.waiting-nearby-hint,
#waiting #nearbyHintWaiting,
#waiting > .hint {
  display: none !important;
}
#waiting .waiting-table-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0.2rem 0.15rem 0.1rem !important;
  display: flex;
}
#waiting .waiting-felt {
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100%;
  padding: 0.4rem !important;
}
#waiting .wait-seat {
  min-height: 52px !important;
  padding: 0.2rem 0.25rem !important;
}
#waiting .team-name-row {
  margin: 0.15rem 0 !important;
  gap: 0.3rem;
  flex-shrink: 0;
}
#waiting .team-name-row input {
  padding: 0.28rem 0.4rem;
  font-size: 0.85rem;
}
#waiting .host-options.host-options-bar {
  padding: 0.25rem 0.35rem !important;
  margin-bottom: 0.15rem !important;
  gap: 0.2rem !important;
}
#waiting .fill-seats-btn {
  padding: 0.35rem 0.5rem !important;
  min-height: 36px;
  font-size: 0.85rem !important;
}
#waiting .variant-hint {
  display: none !important;
}
#waiting .waiting-actions #startBtn {
  grid-column: 1 / -1;
  order: -1;
}
#waiting .qr-box canvas {
  background: #fff;
}

/* Rook bird card — 0.5s pulse the instant it hits the table */
@keyframes rookBirdPlayPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  32% {
    transform: scale(1.14);
    filter: brightness(1.32) drop-shadow(0 0 16px rgba(255, 224, 120, 0.75));
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.trick-card-wrap.rook-play-pulse .rook-bird-img,
.lt-play.rook-play-pulse .rook-bird-img,
.trick-flight-card.rook-play-pulse .rook-bird-img,
.card-face.rook.rook-play-pulse .rook-bird-img {
  animation: rookBirdPlayPulse 0.5s ease-out 1;
  transform-origin: center 38%;
}
.trick-card-wrap.rook-play-pulse .card-face.rook,
.lt-play.rook-play-pulse .card-face.rook {
  box-shadow:
    0 0 0 2px rgba(255, 224, 140, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .trick-card-wrap.rook-play-pulse .rook-bird-img,
  .lt-play.rook-play-pulse .rook-bird-img,
  .trick-flight-card.rook-play-pulse .rook-bird-img,
  .card-face.rook.rook-play-pulse .rook-bird-img {
    animation: none;
  }
}

.hor-seat-pip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  z-index: 5;
}
.hor-seat-pip.pip-green {
  background: #3ddc84;
}
.hor-seat-pip.pip-yellow {
  background: #f5c542;
}
.hor-seat-pip.pip-red {
  background: #e53935;
}
.player-slot.hor-thinking-pulse {
  box-shadow:
    0 0 0 2px rgba(201, 162, 39, 0.7),
    0 0 18px rgba(201, 162, 39, 0.35);
  animation: horThinkPulse 1.2s ease-in-out infinite;
}
@keyframes horThinkPulse {
  50% {
    box-shadow:
      0 0 0 4px rgba(201, 162, 39, 0.15),
      0 0 8px rgba(201, 162, 39, 0.2);
  }
}
.hor-bot-label {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-size: 10px;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 5px;
  border-radius: 8px;
  z-index: 5;
}
.hor-kick-mute {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  gap: 3px;
  z-index: 6;
}
.hor-kick-mute button {
  font-size: 10px;
  padding: 2px 6px;
}
.hor-test-box {
  position: fixed;
  z-index: 1200;
  right: 8px;
  bottom: 8px;
  max-width: 240px;
  background: rgba(12, 10, 8, 0.92);
  color: #f3e6c4;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
}
.hor-career-sheet {
  right: 8px;
  top: 72px;
  bottom: auto;
}
.hor-pwa-sheet {
  left: 8px;
  right: 8px;
  bottom: 16px;
  max-width: none;
}
.hor-reel-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
body.hor-tv-display #slot-me .hand,
body.hor-tv-display #handArea,
body.hor-tv-display .hand-wrap {
  display: none !important;
}
body.hor-tv-display .trick-area,
body.hor-tv-display #trickArea {
  transform: scale(1.25);
}
body.hor-felt-pub .table-felt,
body.hor-felt-pub .waiting-felt {
  filter: saturate(1.15) hue-rotate(-12deg);
}
body.hor-felt-kitchen .table-felt,
body.hor-felt-kitchen .waiting-felt {
  filter: saturate(0.7) brightness(1.08);
}
body.hor-felt-night .table-felt,
body.hor-felt-night .waiting-felt {
  filter: brightness(0.82) saturate(1.2);
}
body.hor-webp-rook .rook-bird-img {
  content: url('assets/images/Rook.webp?v=rook036');
}
#horWaitForMeBtn {
  font-size: 16px;
}

/* ===== Big center pile: max card size that stays inside the felt =====
   Wrapper is oversized vs the face so ±6–8px stack offsets and small
   rotations never clip the oval, seats, or capture flight clones. */
.trick {
  min-height: 118px;
  overflow: visible;
}
.trick-stack,
.trick-scatter {
  width: 118px !important;
  height: 156px !important;
  overflow: visible;
}
.trick-stack .trick-card-wrap,
.trick-scatter .trick-card-wrap {
  margin-left: -44px !important;
  margin-top: -63px !important;
}
.trick-stack .trick-card-wrap .card-face,
.trick-scatter .trick-card-wrap .card-face {
  width: 88px !important;
  height: 126px !important;
}
.trick-stack .trick-card-wrap .card-face .c-stack:not(.red2-stack):not(.rook-stack),
.trick-scatter .trick-card-wrap .card-face .c-stack:not(.red2-stack):not(.rook-stack) {
  inset: 10px 5px !important;
}
.trick-stack .trick-card-wrap .card-face .c-num,
.trick-scatter .trick-card-wrap .card-face .c-num {
  font-size: 3.35rem !important;
  line-height: 0.9 !important;
}
.trick-stack .trick-card-wrap .card-face.red1 .c-num,
.trick-scatter .trick-card-wrap .card-face.red1 .c-num {
  font-size: 3.05rem !important;
}
.trick-stack .trick-card-wrap .card-face .c-color,
.trick-scatter .trick-card-wrap .card-face .c-color {
  font-size: 0.68rem !important;
}
.trick-stack .trick-card-wrap .card-face .rook-bird,
.trick-scatter .trick-card-wrap .card-face .rook-bird {
  max-width: 84% !important;
  max-height: 84% !important;
}

body.gfx-trickFan .trick-stack.trick-fan {
  min-height: 10.4rem;
  width: auto !important;
  height: auto !important;
  gap: 8px;
}

@media (max-height: 700px) {
  .trick {
    min-height: 124px;
  }
  .trick-stack,
  .trick-scatter {
    width: 100px !important;
    height: 132px !important;
  }
  .trick-stack .trick-card-wrap,
  .trick-scatter .trick-card-wrap {
    margin-left: -37px !important;
    margin-top: -53px !important;
  }
  .trick-stack .trick-card-wrap .card-face,
  .trick-scatter .trick-card-wrap .card-face {
    width: 74px !important;
    height: 106px !important;
  }
  .trick-stack .trick-card-wrap .card-face .c-num,
  .trick-scatter .trick-card-wrap .card-face .c-num {
    font-size: 2.85rem !important;
  }
}

@media (max-height: 560px) {
  .trick {
    min-height: 102px;
  }
  .trick-stack,
  .trick-scatter {
    width: 84px !important;
    height: 112px !important;
  }
  .trick-stack .trick-card-wrap,
  .trick-scatter .trick-card-wrap {
    margin-left: -31px !important;
    margin-top: -44px !important;
  }
  .trick-stack .trick-card-wrap .card-face,
  .trick-scatter .trick-card-wrap .card-face {
    width: 62px !important;
    height: 88px !important;
  }
  .trick-stack .trick-card-wrap .card-face .c-num,
  .trick-scatter .trick-card-wrap .card-face .c-num {
    font-size: 2.35rem !important;
  }
}

/* Landscape pile/play cards stay at the previous theater sizes. */

/* Keep the in-game table on one screen — no page scroll, no leftover text peeking under the hand. */
html:has(body.in-game),
body.in-game {
  overflow: hidden !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}
body.in-game #app,
body.in-game .game-room {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100dvh !important;
}

/* ===== Invite welcome (shared ?room= link) ===== */
#welcome.screen {
  position: relative;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.35rem 0.55rem 0.7rem !important;
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.35rem;
  justify-content: flex-start;
  min-height: 100dvh;
  height: 100dvh !important;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: stretch;
}
#welcome .welcome-header {
  position: relative !important;
  margin-bottom: 0.2rem !important;
  flex-shrink: 0;
  display: block !important;
  text-align: left !important;
  padding: 0.05rem 0.2rem 0.05rem 3.6rem !important;
  overflow: visible !important;
  width: 100%;
  box-sizing: border-box;
}
#welcome .waiting-crest {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  max-width: 3.2rem !important;
  object-fit: contain !important;
}
#welcome .welcome-header h1 {
  font-size: 1.22rem;
  margin-bottom: 0.1rem;
}
#welcome .welcome-header p {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.85;
}
.welcome-card {
  flex: 0 0 auto;
  padding: 0.55rem 0.7rem 0.5rem;
  border-radius: 16px;
  background: rgba(20, 14, 8, 0.72);
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.welcome-how {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #f4ead0;
  opacity: 0.92;
}
#welcome.seated #welcome-player-name,
#welcome.watching #welcome-player-name {
  display: none;
}
#welcome.seated .welcome-watch-sm {
  display: none;
}
#welcome-player-name {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.05rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: #1a120b;
  color: var(--text, #f4ead0);
}
.welcome-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.welcome-actions .btn {
  flex: 1 1 0;
  min-height: 46px;
}
#welcomeStatus {
  margin: 0.4rem 0 0;
  min-height: 1.15em;
  font-size: 0.82rem;
}
#welcome .welcome-table-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0.15rem 0.05rem 0.1rem !important;
  display: flex;
}
#welcome .waiting-felt {
  flex: 1 1 auto;
  min-height: 210px !important;
  width: 100%;
  padding: 0.45rem !important;
}
#welcome .wait-seat {
  min-height: 58px !important;
  padding: 0.2rem 0.25rem !important;
  cursor: pointer;
}
#welcome .welcome-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex: 0 0 auto;
  margin-top: 0.1rem;
}
#welcome .welcome-watch-sm,
#welcome .welcome-back {
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
  opacity: 0.8;
  font-size: 0.78rem;
  min-height: 0;
  padding: 0.2rem 0.45rem;
}
#welcome .welcome-fs-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font-size: 0.86rem;
  opacity: 1;
}
@media (max-height: 640px) {
  #welcome .welcome-header h1 {
    font-size: 1.08rem;
  }
  #welcome .waiting-felt {
    min-height: 180px !important;
  }
  #welcome .wait-seat {
    min-height: 50px !important;
  }
}

.hor-splash {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a1214;
  padding: env(safe-area-inset-top, 0px) 0.7rem env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  transition: opacity 0.35s ease;
}
.hor-splash.is-out {
  opacity: 0;
  pointer-events: none;
}
.hor-splash-card {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  max-width: min(92vw, 420px);
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}
.hor-splash-card img {
  width: 100%;
  height: auto;
  max-height: calc(94dvh - 2rem);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.hor-splash-tap {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d5a3;
  opacity: 0.85;
}

/* TV / spectator table */
body.hor-tv-display #myHand,
body.hor-tv-display .hand-area,
body.hor-tv-display .lt-hand-wrap {
  display: none !important;
}
body.hor-tv-display .trick,
body.hor-tv-display .lt-plays {
  transform: scale(1.28);
  transform-origin: center center;
}
body.hor-tv-display .lt-play .card-face,
body.hor-tv-display .trick .card-face {
  width: min(22vw, 160px) !important;
  height: min(32vw, 230px) !important;
}

/* Still avatars */
body.no-avatar-motion .seat-avatar-img,
body.no-avatar-motion .wait-seat-av {
  animation: none !important;
  transform: none !important;
}

.hor-pwa-sheet {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20000;
  width: min(420px, 92vw);
  padding: 12px 14px;
  border-radius: 12px;
  background: #1a140c;
  color: #f3ead6;
  border: 1px solid #c9a227;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Lobby sheets: navy glass + champagne gold, no muddy mustard */
#cardBackModal,
#newPlayersModal,
#rulesModal {
  background: rgba(6, 10, 20, 0.92);
}
#cardBackModal .modal-content,
#newPlayersModal .modal-content,
#rulesModal .modal-content {
  background: linear-gradient(180deg, #1a2744 0%, #0c1222 55%, #070b16 100%);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #f0e6d0;
}
#rulesModal .rules-text,
#rulesModal #variantRulesBox,
#rulesModal #liveRulesIntro {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#rulesModal .rules-text p,
#rulesModal .rules-text {
  color: #e8dcc4;
}
#cardBackModal .modal-content h2,
#newPlayersModal .modal-content h2,
#rulesModal .modal-content h2 {
  color: #f3ead6;
}
#cardBackModal .btn.primary,
#newPlayersModal .btn.primary,
#rulesModal .btn.primary {
  background: linear-gradient(180deg, #f3d58a 0%, #c9a227 55%, #b08a1c 100%);
  color: #1a1408;
  border: 1px solid #e8c96a;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 236, 180, 0.35) inset;
}
#cardBackModal .btn:not(.primary):not(.link),
#newPlayersModal .btn:not(.primary):not(.link),
#rulesModal .btn:not(.primary):not(.link) {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.65);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
#newPlayersModal .new-player-row {
  background: #10182c;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f0e6d0;
}
#newPlayersModal .new-player-row .btn,
#newPlayersModal .btn {
  white-space: normal;
  line-height: 1.15;
  overflow: hidden;
}
body.gfx-brassUI #cardBackModal .btn.primary,
body.gfx-brassUI #newPlayersModal .btn.primary,
body.gfx-brassUI #rulesModal .btn.primary {
  background: linear-gradient(180deg, #f3d58a 0%, #c9a227 55%, #b08a1c 100%);
  color: #1a1408;
}
body.gfx-brassUI #cardBackModal .btn:not(.primary),
body.gfx-brassUI #newPlayersModal .btn:not(.primary),
body.gfx-brassUI #rulesModal .btn:not(.primary) {
  background: linear-gradient(180deg, #1c2844 0%, #10182c 100%);
  color: #f0e0a8;
  border: 1px solid rgba(212, 175, 55, 0.65);
}

/* ===== 344: remaining-cards view — no extra titles, cards pack to fit ===== */
#scoreModal.showing-remaining #scoreModalTitle,
#scoreModal.showing-remaining h2#scoreModalTitle,
#scoreModal.showing-remaining .claim-remaining-title {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#scoreModal.showing-remaining .claim-remaining-meta {
  flex: 0 0 auto !important;
  margin: 0 0 0.35rem !important;
  text-align: center !important;
  font-size: clamp(0.72rem, 2.4vw, 0.92rem) !important;
}
#scoreModal.showing-remaining .modal-content.scoreboard-modal {
  display: flex !important;
  flex-direction: column !important;
  height: min(96dvh, 100%) !important;
  max-height: 96dvh !important;
  overflow: hidden !important;
}
#scoreModal.showing-remaining #scoreModalBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#scoreModal.showing-remaining .score-modal-actions {
  flex: 0 0 auto !important;
}
#scoreModal.showing-remaining .claim-remaining-hands {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.25rem 0.35rem 0 !important;
}
#scoreModal.showing-remaining .claim-remaining-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.4rem !important;
}
#scoreModal.showing-remaining .claim-remaining-player {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.3rem !important;
}
#scoreModal.showing-remaining .claim-remaining-player-title {
  flex: 0 0 auto !important;
  margin-bottom: 0.2rem !important;
}
#scoreModal.showing-remaining .claim-remaining-cards {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(var(--remain-cols, 3), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--remain-rows, 2), minmax(0, 1fr)) !important;
  gap: var(--remain-gap, 3px) !important;
  justify-items: center !important;
  align-items: center !important;
}
#scoreModal.showing-remaining .claim-remaining-card {
  width: var(--remain-card-w, 36px) !important;
  height: var(--remain-card-h, 52px) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: none !important;
  aspect-ratio: 58 / 84 !important;
}
@media (orientation: landscape) {
  #scoreModal.showing-remaining .modal-content.scoreboard-modal {
    width: min(98vw, 1200px) !important;
    height: 96dvh !important;
    max-height: 96dvh !important;
  }
  #scoreModal.showing-remaining .claim-remaining-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }
  #scoreModal.showing-remaining .claim-remaining-player {
    min-height: 0 !important;
  }
}

/* ===== Waiting room — landscape: own full screen, lobby stays gone ===== */
@media (orientation: landscape) {
  body.at-table #lobby,
  body:has(#waiting.screen:not(.hidden)) #lobby {
    display: none !important;
  }
  #waiting.screen:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(42vh, 1fr) auto auto auto;
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    gap: 0.3rem 0.5rem !important;
    padding: 0.32rem 0.6rem calc(0.32rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    box-sizing: border-box;
    background: radial-gradient(
      120% 80% at 50% 0%,
      #1a2744 0%,
      #0b1020 55%,
      #07090f 100%
    ) !important;
  }
  #waiting .waiting-header {
    grid-column: 1;
    grid-row: 1;
  }
  #waiting .share-row {
    grid-column: 2;
    grid-row: 1;
  }
  #waiting .waiting-table-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #waiting .team-name-row {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  #waiting .host-options {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  #waiting .waiting-actions {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  #waiting .waiting-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0 0 0 2.7rem !important;
    margin: 0 !important;
    min-height: 2.4rem;
    position: relative !important;
  }
  #waiting .waiting-crest {
    width: 2.35rem !important;
    height: 2.35rem !important;
    max-width: 2.35rem !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  #waiting .waiting-header-copy {
    flex: 1 1 auto;
    min-width: 0;
  }
  #waiting .header h1 {
    font-size: 1.12rem !important;
    margin: 0 !important;
    line-height: 1.15;
  }
  #waiting .header p {
    font-size: 0.7rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #waiting .share-row {
    position: static !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    justify-content: flex-end !important;
    align-self: center;
  }
  #waiting .share-row .btn {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.75rem !important;
    min-height: 34px;
    width: auto !important;
  }
  #waiting .waiting-nearby-hint,
  #waiting > .hint,
  #waiting #playersList,
  #waiting #restartPracticeBtn,
  #waiting .fill-seats-help,
  #waiting .variant-hint,
  #waiting .waiting-center-mark,
  #waiting .waiting-center-status {
    display: none !important;
  }
  #waiting .waiting-table-wrap {
    min-height: 42vh !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
  }
  #waiting .waiting-felt {
    flex: 1 1 auto;
    width: 100%;
    min-height: 42vh !important;
    height: 100% !important;
    padding: 0.4rem 0.7rem !important;
    gap: 0.35rem !important;
    grid-template-columns: minmax(8rem, 1fr) minmax(6rem, 0.8fr) minmax(8rem, 1fr) !important;
    grid-template-rows: minmax(3.6rem, 0.75fr) minmax(3.6rem, 1.2fr) minmax(3.6rem, 0.75fr) !important;
    border-radius: 18px !important;
  }
  #waiting .wait-seat {
    min-height: 3.4rem !important;
    padding: 0.2rem 0.35rem !important;
  }
  #waiting .wait-seat-name {
    font-size: 0.86rem !important;
  }
  #waiting .wait-seat-tag {
    font-size: 0.64rem !important;
  }
  #waiting .wait-seat-av {
    width: 30px !important;
    height: 30px !important;
  }
  #waiting .waiting-center {
    padding: 0 !important;
    pointer-events: none;
  }
  #waiting .team-name-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem !important;
    margin: 0 !important;
    align-items: center;
  }
  #waiting .team-name-row label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    margin: 0 !important;
    font-size: 0.68rem !important;
  }
  #waiting .team-name-row input {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.84rem !important;
    min-width: 0;
  }
  #waiting .host-options.host-options-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #waiting .host-options-bar .bot-count-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.3rem !important;
    margin: 0 !important;
  }
  #waiting .host-options-bar .select-input {
    font-size: 0.76rem !important;
    padding: 0.24rem 0.35rem !important;
  }
  #waiting .fill-seats-btn {
    display: none !important;
  }
  #waiting .waiting-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.35rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  #waiting .waiting-actions #startBtn {
    grid-column: auto !important;
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0.42rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  #waiting .waiting-actions .host-options-open-btn,
  #waiting .waiting-actions #leaveBtn {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0.42rem 0.5rem !important;
    font-size: 0.84rem !important;
    margin: 0 !important;
  }
  #waiting #qrBox:not(.hidden) {
    position: absolute;
    inset: 0.4rem;
    z-index: 30;
    background: rgba(8, 10, 16, 0.94);
    border-radius: 16px;
  }
}

/* RookGame383 lobby fit: keep the hero fully visible and move the two info cards to the bottom. */
#lobby .lobby-info-card {
  order: 4;
  flex: 0 0 auto;
  margin: 0.28rem 0 0;
  max-width: none;
  padding: 0.34rem 0.48rem;
  border-radius: 10px;
  box-shadow: none;
}
#lobby .lobby-info-title {
  font-size: 0.62rem;
  margin-bottom: 0.18rem;
  letter-spacing: 0.055em;
}
#lobby .lobby-info-links {
  flex-wrap: nowrap;
  gap: 0.35rem 0.55rem;
  justify-content: space-between;
}
#lobby .lobby-info-links a {
  font-size: 0.58rem;
  line-height: 1.05;
  padding: 1px;
  white-space: nowrap;
}
#lobby .lobby-stats-card {
  order: 5;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0.28rem 0 0;
  padding: 0.32rem 0.48rem;
  border-radius: 10px;
  gap: 0.42rem;
}
#lobby .lobby-stats-icon {
  width: 27px;
  height: 27px;
  font-size: 0.9rem;
  border-radius: 8px;
}
#lobby .lobby-stats-copy {
  gap: 0.05rem;
}
#lobby .lobby-stats-copy strong {
  font-size: 0.68rem;
}
#lobby .lobby-stats-copy span {
  font-size: 0.55rem;
  line-height: 1.1;
}
#lobby .lobby-stats-arrow {
  font-size: 1.25rem;
}
#lobby .lobby-hero {
  order: 3;
  flex: 1 1 auto;
  min-height: 90px;
  margin-top: 0.28rem;
}
#lobby .lobby-hero img.lobby-hero-portrait {
  object-fit: contain;
  object-position: center center;
}

@media (orientation: portrait) {
  #lobby.screen:not(.hidden) {
    overflow: hidden;
  }
  #lobby.screen:not(.hidden) .lobby-card {
    overflow: hidden;
  }
  #lobby.screen:not(.hidden) .lobby-actions {
    gap: 0.28rem;
  }
  #lobby.screen:not(.hidden) .lobby-card .lobby-main {
    min-height: 36px;
    padding: 0.28rem 0.35rem;
  }
  #lobby.screen:not(.hidden) .lobby-btn-sub {
    font-size: 0.58rem;
  }
  #lobby.screen:not(.hidden) .lobby-hero {
    flex: 1 1 auto;
    min-height: 90px;
    margin-top: 0.25rem;
  }
}

@media (orientation: landscape) {
  #lobby.screen:not(.hidden) .lobby-hero {
    order: 3;
    flex: 1 1 auto;
    min-height: 60px;
    height: auto;
    max-height: none;
  }
  #lobby.screen:not(.hidden) .lobby-info-card,
  #lobby.screen:not(.hidden) .lobby-stats-card {
    flex: 0 0 auto;
  }
  #lobby.screen:not(.hidden) .lobby-info-card {
    margin-top: 0.18rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-card {
    margin-top: 0.18rem;
  }
}

@media (max-height: 720px) {
  #lobby .lobby-info-card {
    padding: 0.25rem 0.4rem;
    margin-top: 0.2rem;
  }
  #lobby .lobby-info-title {
    font-size: 0.58rem;
  }
  #lobby .lobby-info-links a {
    font-size: 0.52rem;
  }
  #lobby .lobby-stats-card {
    margin-top: 0.2rem;
    padding: 0.26rem 0.42rem;
  }
  #lobby .lobby-stats-copy strong {
    font-size: 0.62rem;
  }
  #lobby .lobby-stats-copy span {
    font-size: 0.5rem;
  }
}

/* RookGame385 lobby polish: compact support/stat links at the bottom, full photo visible. */
#lobby.screen:not(.hidden) .lobby-info-card {
  order: 4;
  flex: 0 0 auto;
  margin: 0.25rem auto 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0.28rem 0.4rem;
  border-radius: 10px;
}
#lobby.screen:not(.hidden) .lobby-info-title {
  font-size: 0.56rem;
  line-height: 1;
  margin: 0 0 0.2rem;
  letter-spacing: 0.05em;
}
#lobby.screen:not(.hidden) .lobby-info-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
}
#lobby.screen:not(.hidden) .lobby-info-links a {
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.15;
  padding: 0.22rem 0.14rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}
#lobby.screen:not(.hidden) .lobby-info-links .cash-app-link {
  font-size: 0.67rem;
  letter-spacing: 0;
}
#lobby.screen:not(.hidden) .lobby-stats-card {
  order: 5;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 0;
  margin: 0.25rem 0 0;
  padding: 0.3rem 0.42rem;
  border-radius: 10px;
  gap: 0.38rem;
}
#lobby.screen:not(.hidden) .lobby-stats-icon {
  width: 27px;
  height: 27px;
  font-size: 0.9rem;
  border-radius: 8px;
}
#lobby.screen:not(.hidden) .lobby-stats-copy {
  gap: 0.03rem;
}
#lobby.screen:not(.hidden) .lobby-stats-copy strong {
  font-size: 0.65rem;
}
#lobby.screen:not(.hidden) .lobby-stats-copy span {
  font-size: 0.52rem;
  line-height: 1.08;
}
#lobby.screen:not(.hidden) .lobby-stats-arrow {
  font-size: 1.2rem;
}
#lobby.screen:not(.hidden) .lobby-hero {
  order: 3;
  flex: 1 1 auto;
  min-height: 90px;
  margin-top: 0.25rem;
}
#lobby.screen:not(.hidden) .lobby-hero-portrait {
  object-fit: contain !important;
  object-position: center center !important;
}
@media (orientation: landscape) {
  #lobby.screen:not(.hidden) .lobby-info-card {
    margin-top: 0.15rem;
    padding: 0.2rem 0.35rem;
  }
  #lobby.screen:not(.hidden) .lobby-info-title {
    display: none;
  }
  #lobby.screen:not(.hidden) .lobby-info-links a {
    font-size: 0.62rem;
    padding: 0.18rem 0.08rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-card {
    margin-top: 0.15rem;
    padding: 0.25rem 0.4rem;
  }
}
@media (max-height: 720px) {
  #lobby.screen:not(.hidden) .lobby-info-card {
    padding: 0.2rem 0.32rem;
    margin-top: 0.12rem;
  }
  #lobby.screen:not(.hidden) .lobby-info-title {
    display: none;
  }
  #lobby.screen:not(.hidden) .lobby-info-links a {
    font-size: 0.59rem;
    padding: 0.15rem 0.06rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-card {
    margin-top: 0.12rem;
    padding: 0.24rem 0.38rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-copy strong {
    font-size: 0.61rem;
  }
  #lobby.screen:not(.hidden) .lobby-stats-copy span {
    font-size: 0.49rem;
  }
}

/* v399: table-full Start Game — beat every theme / media query */
body.gfx-brassUI #waiting .waiting-actions #startBtn.btn.primary.table-ready,
body #waiting .waiting-actions #startBtn.btn.primary.table-ready,
#waiting .waiting-actions #startBtn.btn.primary.table-ready,
#waiting #startBtn.btn.primary.table-ready {
  background: #ffe000 !important;
  background-image: none !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow: 0 0 0 2px #ffe000 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.top-nest-peek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0.25rem;
  min-height: 0;
}
.top-nest-peek.hidden {
  display: none !important;
}
.top-nest-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0d56a;
  white-space: nowrap;
}
.top-nest-peek .top-nest-card {
  width: 42px;
  min-width: 42px;
  height: 58px;
  font-size: 0.7rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#nestArea.nest {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 80;
  min-height: 72px;
  position: relative;
  top: -25%;
  transform: none;
  isolation: isolate;
}
#nestArea.nest.hidden {
  display: none !important;
}
.table-nest-pile {
  position: relative;
  width: 54px;
  height: 76px;
}
.table-nest-under,
.table-nest-top,
.table-nest-flip {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 68px;
  border-radius: 6px;
}
.table-nest-under {
  transform: translate(calc(var(--nest-i, 0) * 2px), calc(var(--nest-i, 0) * -2px));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.table-nest-top {
  z-index: 4;
}
.table-nest-flip {
  z-index: 6;
  perspective: 700px;
  left: 6px;
  top: -6px;
}
.table-nest-flip-inner {
  position: relative;
  width: 48px;
  height: 68px;
  transform-style: preserve-3d;
  transition: transform 0.86s cubic-bezier(0.22, 0.62, 0.18, 1);
}
.table-nest-flip-inner {
  transform: rotateY(0deg);
}
.table-nest-flip.is-turning .table-nest-flip-inner,
.table-nest-flip.is-flipped .table-nest-flip-inner,
.table-nest-flip.is-face .table-nest-flip-inner {
  transform: rotateY(180deg);
}
.table-nest-flip-back,
.table-nest-flip-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.table-nest-flip-face {
  transform: rotateY(180deg);
}
.table-nest-flip.is-reveal {
  animation: nestRevealLift 1.8s cubic-bezier(0.18, 0.82, 0.22, 1) 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(240, 213, 106, 0.55));
  z-index: 9;
}
.table-nest-flip.is-reveal::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 224, 80, 0);
  animation: nestGlowRing 1.8s ease-out 1;
}
@keyframes nestRevealLift {
  0% {
    transform: translateY(0) scale(1) rotate(-1deg);
  }
  16% {
    transform: translateY(-26px) scale(1.16) rotate(-8deg);
  }
  38% {
    transform: translateY(-34px) scale(1.22) rotate(5deg);
  }
  62% {
    transform: translateY(-14px) scale(1.1) rotate(-2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes nestGlowRing {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 224, 80, 0);
  }
  25% {
    box-shadow: 0 0 0 6px rgba(255, 224, 80, 0.45);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(255, 224, 80, 0);
  }
}
.table-nest-flip-back,
.table-nest-flip-face {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 68px;
  border-radius: 6px;
}
.table-nest-flip-back {
  z-index: 2;
}
.table-nest-flip-face {
  z-index: 1;
  font-size: 0.62rem;
  opacity: 0;
  background-image: none !important;
}
.table-nest-flip.is-flipped .table-nest-flip-back,
.table-nest-flip.is-face .table-nest-flip-back {
  display: none !important;
}
.table-nest-flip.is-turning .table-nest-flip-face {
  opacity: 1;
}
.table-nest-flip.is-flipped .table-nest-flip-face,
.table-nest-flip.is-face .table-nest-flip-face {
  opacity: 1;
  background-image: none !important;
}
#nestArea .nest-stay-face {
  position: absolute !important;
  left: 3px !important;
  top: 0 !important;
  width: 48px !important;
  height: 68px !important;
  z-index: 14 !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
.table-nest-caption {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0d56a;
  text-shadow: 0 1px 2px #000;
}
@media (prefers-reduced-motion: reduce) {
  .table-nest-flip-inner {
    transition: none;
  }
  .table-nest-flip.is-reveal {
    animation: none;
  }
}

body.nest-on-felt .trick-caption,
body.nest-on-felt .trick-count,
body.nest-on-felt #trickArea .trick-caption {
  visibility: hidden !important;
  opacity: 0 !important;
}
.table-nest-under,
.table-nest-top,
.table-nest-flip-back {
  background-color: #140e08 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

body.nest-on-felt .seat-avatar-img,
body.nest-on-felt .wait-seat-av,
body.nest-on-felt .player-slot.is-turn .seat-avatar {
  animation: none !important;
  transform: none !important;
}

.widow-spread {
  position: relative;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  margin: 0.1rem 0 0.15rem;
  max-width: min(92%, 17rem);
  pointer-events: none;
}
.widow-spread.hidden {
  display: none !important;
}
.widow-spread-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0d56a;
  text-shadow: 0 1px 2px #000;
}
.widow-spread-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.18rem;
}
.widow-spread .widow-card {
  width: 32px;
  height: 44px;
  min-width: 32px;
  font-size: 0.52rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}
.widow-spread .widow-card .c-rank {
  font-size: 0.52rem;
}
@media (max-width: 360px) {
  .widow-spread .widow-card {
    width: 28px;
    height: 40px;
  }
}

.nest-face-up {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 68px;
  z-index: 8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
#nestArea .card-face.rook.nest-face-up,
#nestArea .card-face.rook.nest-stay-face {
  background: #14081a !important;
  border: 2px solid #ce93d8 !important;
  color: #f3e5f5 !important;
}
#nestArea .nest-bird-label,
#nestArea .nest-red2-label {
  display: none !important;
}
#nestArea .card-face.red2.nest-face-up,
#nestArea .card-face.red2.nest-stay-face {
  border: 2px solid #ff5252 !important;
}

#nestArea .table-nest-flip-face.nest-face-up,
#nestArea .table-nest-flip .nest-face-up {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#nestArea .nest-face-up {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 68px;
  z-index: 12;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#nestArea .nest-stay-face .c-num,
#nestArea .nest-stay-face .c-color {
  opacity: 1 !important;
  visibility: visible !important;
}
#nestArea .nest-face-up.green {
  background: #e8f8ee !important;
}
#nestArea .nest-face-up.red {
  background: #fdecee !important;
}
#nestArea .nest-face-up.yellow {
  background: #fbf3d2 !important;
}
#nestArea .nest-face-up.black {
  background: #f3f3f3 !important;
}

.no-service-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(8, 5, 2, 0.72);
}
.no-service-modal.hidden {
  display: none;
}
.no-service-card {
  width: min(420px, 100%);
  background: #2a1f14;
  color: #f5e6c8;
  border: 1px solid #c9a227;
  border-radius: 12px;
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.no-service-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.no-service-card p {
  margin: 0 0 0.55rem;
  line-height: 1.35;
  font-size: 0.92rem;
}
.no-service-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.no-service-actions .btn {
  flex: 1;
}

/* Rook473 Career levels live inside the existing player plaque. */
.player-slot .name .hor-career-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 1.55rem !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  margin: 0 0 0 0.24rem !important;
  padding: 0 0.28rem !important;
  border: 1px solid #e0b844 !important;
  border-radius: 999px !important;
  background: #151b15 !important;
  color: #ffd85c !important;
  font:
    900 0.62rem/1 system-ui,
    -apple-system,
    Segoe UI,
    sans-serif !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.player-slot .name .hor-career-badge:active {
  transform: scale(0.96);
}

/* Rook488 local-test correction: Career stars own taps; persona tips cannot trap controls. */
.bot-style-tip {
  pointer-events: none !important;
  max-width: min(260px, calc(100vw - 24px)) !important;
  max-height: min(180px, 42vh) !important;
  overflow: auto !important;
  padding: 0.65rem 2rem 0.65rem 0.7rem !important;
}
.bot-style-tip-close {
  pointer-events: auto !important;
  position: absolute;
  top: 0.22rem;
  right: 0.28rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid #c9a227;
  background: #101810;
  color: #f4ead0;
  font: 900 1rem/1 system-ui;
  cursor: pointer;
}
.hor-career-badge {
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Rook499: remove the Rook497 narrow waiting-room override that crushed
   seat/name/center columns on phones. The established responsive lobby rules
   above remain authoritative. */

/* Build 498: compact selector for the local my-turn cue. */
.turn-tone-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.turn-tone-option .select-input {
  min-width: 9.5rem;
  max-width: 13rem;
}

/* ===== Rook510 production portraits + seat chrome =====
 * Cinematic bot portraits, no maroon top/bottom plaques,
 * horizontal names, responsive avatar sizing that yields
 * to cards / nest / bid / messages.
 */
body.gfx-seatPlaques .player-slot.top .name,
body.gfx-seatPlaques .player-slot.bottom .name,
body.gfx-seatPlaques #slot-me .name,
body.gfx-seatPlaques #slot-partner .name,
.player-slot.top .name,
.player-slot.bottom .name,
#slot-me .name,
#slot-partner .name {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.player-slot.top,
.player-slot.bottom,
#slot-me.player-slot.bottom,
#slot-partner.player-slot.top,
.bottom-seat-row {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.player-slot .name,
.player-slot .name .player-name-text,
.player-slot.top .name,
.player-slot.bottom .name,
#slot-me .name,
#slot-partner .name,
.wait-seat-name,
.wait-seat-name-text,
.lt-name,
.lt-th-name,
.portrait-th-name {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  flex-wrap: nowrap !important;
}

.seat-avatar,
.seat-avatar-side,
.wait-seat-av,
.lt-bid-av {
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.seat-avatar-img,
.wait-seat-av,
.lt-bid-av {
  object-fit: cover !important;
  object-position: 50% 16% !important;
}

/* Default large portraits — clamp so they shrink before covering play. */
.player-slot .seat-avatar,
.player-slot .seat-avatar-side {
  width: clamp(2.35rem, 8vmin, 3.9rem) !important;
  height: clamp(2.35rem, 8vmin, 3.9rem) !important;
  margin: 0 0.15rem 0.12rem 0;
}
.player-slot.top .seat-avatar,
.player-slot.bottom .seat-avatar,
#slot-me .seat-avatar,
#slot-partner .seat-avatar {
  width: clamp(2.55rem, 9vmin, 4.2rem) !important;
  height: clamp(2.55rem, 9vmin, 4.2rem) !important;
  display: inline-flex;
}
.wait-seat-av {
  width: clamp(2.4rem, 8vmin, 3.8rem) !important;
  height: clamp(2.4rem, 8vmin, 3.8rem) !important;
}
.lt-bid-av {
  width: clamp(2rem, 5.5vmin, 2.8rem) !important;
  height: clamp(2rem, 5.5vmin, 2.8rem) !important;
  flex-basis: auto !important;
}
.avatar-choice img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: 50% 16%;
}

/* Give top/bottom rows a little more room for the larger face. */
.table {
  grid-template-rows: minmax(3.2rem, 20%) minmax(0, 1fr) minmax(3.4rem, 22%);
}

/* Keep portraits from stacking over the felt play surface. */
.player-slot.top,
.player-slot.bottom {
  z-index: 5;
}
.center-area,
.trick,
.trick-stack,
#trickArea,
.table-nest-flip,
.widow-spread,
.message,
.action-panel,
.hand-area,
#myHand {
  position: relative;
  z-index: 8;
}

@media (orientation: landscape) {
  .player-slot .seat-avatar,
  .player-slot .seat-avatar-side,
  .player-slot.top .seat-avatar,
  .player-slot.bottom .seat-avatar,
  #slot-me .seat-avatar,
  #slot-partner .seat-avatar {
    width: clamp(2.05rem, 6.4vmin, 3.25rem) !important;
    height: clamp(2.05rem, 6.4vmin, 3.25rem) !important;
  }
}
@media (max-height: 560px) and (orientation: portrait) {
  .player-slot .seat-avatar,
  .player-slot .seat-avatar-side,
  .player-slot.top .seat-avatar,
  .player-slot.bottom .seat-avatar {
    width: clamp(1.8rem, 7vmin, 2.55rem) !important;
    height: clamp(1.8rem, 7vmin, 2.55rem) !important;
  }
}
@media (max-width: 360px) {
  .player-slot .seat-avatar,
  .player-slot .seat-avatar-side {
    width: clamp(1.7rem, 12vw, 2.4rem) !important;
    height: clamp(1.7rem, 12vw, 2.4rem) !important;
  }
}

/* ===== Rook523: focused UI refinement / zero-jump pass ===== */
/* First-run hierarchy: the game is the product; customization is discoverable, not homework. */
#lobby .lobby-actions {
  gap: 0.5rem !important;
}
#lobby .lobby-play-now {
  min-height: 62px !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  border: 2px solid rgba(240, 215, 131, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 22px rgba(0, 0, 0, 0.34) !important;
}
#lobby .lobby-online-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  min-width: 0;
}
#lobby .lobby-online-row .lobby-main {
  margin-top: 0 !important;
  min-width: 0;
}
#lobby .lobby-more,
#lobby .lobby-discover {
  width: 100%;
}
#lobby .lobby-more > summary,
#lobby .lobby-discover > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 12px;
  background: rgba(10, 16, 25, 0.72);
  color: #ead9a4;
  font-weight: 800;
  font-size: 0.82rem;
  user-select: none;
}
#lobby .lobby-more > summary::-webkit-details-marker,
#lobby .lobby-discover > summary::-webkit-details-marker {
  display: none;
}
#lobby .lobby-more[open] > summary,
#lobby .lobby-discover[open] > summary {
  border-color: rgba(212, 175, 55, 0.72);
}
#lobby .lobby-more-actions {
  padding-top: 0.35rem;
}
#lobby .lobby-more-actions .lobby-main {
  margin-top: 0 !important;
}
#lobby .lobby-discover {
  flex: 0 0 auto;
  margin-top: 0.28rem;
}
#lobby .lobby-discover .rules-link {
  margin-top: 0.35rem !important;
}
@media (orientation: landscape) {
  #lobby.screen:not(.hidden) .lobby-actions {
    grid-template-columns: minmax(180px, 1.25fr) minmax(300px, 1fr) auto !important;
    align-items: stretch;
  }
  #lobby.screen:not(.hidden) .lobby-play-now {
    min-height: 46px !important;
  }
  #lobby.screen:not(.hidden) .lobby-online-row {
    grid-template-columns: 1fr 1fr;
  }
  #lobby.screen:not(.hidden) .lobby-more {
    min-width: 120px;
  }
  #lobby.screen:not(.hidden) .lobby-more > summary {
    height: 100%;
    min-height: 46px;
  }
  #lobby.screen:not(.hidden) .lobby-discover {
    margin-top: 0.15rem;
  }
}
@media (max-width: 380px) {
  #lobby .lobby-online-row {
    grid-template-columns: 1fr;
  }
}

/* Keep secondary table controls available without making week-one players stare at a cockpit. */
.toolbar {
  overflow: visible !important;
}
.game-more {
  position: relative;
  flex: 0 0 auto;
}
.game-more > summary {
  list-style: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.game-more > summary::-webkit-details-marker {
  display: none;
}
.game-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 1000;
  width: min(220px, 82vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(201, 162, 39, 0.7);
  border-radius: 12px;
  background: rgba(20, 14, 9, 0.98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.58);
}
.game-more:not([open]) .game-more-menu {
  display: none;
}
.game-more-menu .icon-btn {
  width: 100% !important;
  min-height: 40px !important;
  display: flex !important;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  padding: 0.35rem 0.45rem !important;
}
.game-more-menu .icon-btn.hidden {
  display: none !important;
}
.game-more-menu .icon-btn span {
  font-size: 0.66rem;
  white-space: nowrap;
}

/* Screen-jump fix: message lane has a stable footprint instead of appearing/disappearing. */
.game-room > #messageArea.message {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  width: min(94vw, 22rem) !important;
  margin: 0.08rem auto !important;
  padding: 0.18rem 0.55rem !important;
  overflow: hidden !important;
  line-height: 1.15 !important;
}
.game-room > #messageArea.message:empty {
  visibility: hidden !important;
  display: flex !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Nest/trick points overlay the hand rail: points changing cannot resize the whole table. */
.hand-area .trick-pts-bar {
  position: absolute !important;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  z-index: 40 !important;
  margin: 0 !important;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand-area .trick-pts-bar.hidden {
  display: none !important;
}

/* Seat cleanup: larger portraits where the table has room, with bounded names. */
.player-slot.left .seat-avatar-side,
.player-slot.right .seat-avatar-side {
  width: 2.35rem !important;
  height: 2.35rem !important;
}
.player-slot .name .player-name-text {
  max-width: 9.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.player-slot.left .name,
.player-slot.right .name {
  max-width: 8.6rem !important;
}
.player-slot.bottom .name,
.player-slot.top .name {
  max-width: 11rem !important;
}
@media (orientation: portrait) and (min-width: 390px) {
  .player-slot.top .seat-avatar,
  .player-slot.bottom .seat-avatar,
  #slot-me .seat-avatar,
  #slot-partner .seat-avatar {
    width: 4.35rem !important;
    height: 4.35rem !important;
  }
}
@media (orientation: landscape) {
  .player-slot.left .seat-avatar-side,
  .player-slot.right .seat-avatar-side {
    width: 2.15rem !important;
    height: 2.15rem !important;
  }
}

/* Leader cue: small brass table marker, not a rectangular web label. */
.seat-lead-tag {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px !important;
  letter-spacing: 0 !important;
  border: 1px solid #f0d783;
  background: radial-gradient(circle at 35% 30%, #f6df91, #b58a1c 68%, #73540b) !important;
  color: #201608 !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.seat-lead-tag.hidden {
  display: none !important;
}

/* Last 3 reads as a physical table tab and stays clear of the playing cards. */
.table-last3-btn {
  min-height: 28px !important;
  padding: 0.2rem 0.58rem !important;
  border-radius: 8px 8px 3px 3px !important;
  background: linear-gradient(180deg, #5a3a1d, #2a190c) !important;
  border-color: rgba(220, 184, 79, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

/* Testing tools never surface in ordinary play; ?dev=1 (or local dev flag) is required by JS. */
.developer-only.hidden {
  display: none !important;
}

/* ===== Rook524: recorded-play refinement roll ===== */
/* Message Table is no longer a permanent table control. Messaging plumbing remains intact. */
.table-msg-btn-top {
  display: none !important;
}

/* The table owns its vertical position. Status text overlays the lower table edge instead of
   joining the flex stack and stealing height when the human turn text changes. */
.game-room > #messageArea.message {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(min(26dvh, 170px) + 0.2rem) !important;
  transform: translateX(-50%) !important;
  z-index: 55 !important;
  flex: none !important;
  width: min(94vw, 22rem) !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0.18rem 0.55rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  line-height: 1.15 !important;
}
.game-room > #messageArea.message:empty {
  visibility: hidden !important;
}

/* More menu: a real popover. Defeat old icon-label positioning that caused the recorded pile-up. */
#topToolbar {
  position: relative !important;
  overflow: visible !important;
}
.game-more {
  position: static !important;
}
.game-more-menu {
  position: absolute !important;
  right: 4px !important;
  top: calc(100% + 5px) !important;
  width: min(300px, 94vw) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 9px !important;
  z-index: 1200 !important;
}
.game-more-menu .icon-btn {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
}
.game-more-menu .icon-btn span {
  position: static !important;
  display: inline !important;
  transform: none !important;
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  text-align: left !important;
}

/* Seat identity is one unit: portrait anchor + protected name/level row. */
.player-slot .name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.28rem !important;
  overflow: visible !important;
}
.player-slot .seat-identity-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
.player-slot .seat-identity-copy .player-name-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 7.6rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.player-slot .seat-identity-copy .hor-career-badge {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.player-slot.left .name,
.player-slot.right .name {
  max-width: 8.8rem !important;
}
.player-slot.left .seat-identity-copy .player-name-text,
.player-slot.right .seat-identity-copy .player-name-text {
  max-width: 5.9rem !important;
}
.player-slot.top .name,
.player-slot.bottom .name {
  max-width: 13rem !important;
}
.player-slot.top .seat-identity-copy .player-name-text,
.player-slot.bottom .seat-identity-copy .player-name-text {
  max-width: 7.8rem !important;
}

/* Controlled avatar bump AFTER locking name + level geometry. */
@media (orientation: portrait) {
  .player-slot.top .seat-avatar,
  .player-slot.bottom .seat-avatar,
  #slot-me .seat-avatar,
  #slot-partner .seat-avatar {
    width: clamp(4.35rem, 15.2vmin, 4.8rem) !important;
    height: clamp(4.35rem, 15.2vmin, 4.8rem) !important;
  }
  .player-slot.left .seat-avatar-side,
  .player-slot.right .seat-avatar-side {
    width: 2.55rem !important;
    height: 2.55rem !important;
  }
}

/* Trump medallion: same approved physical design, now table-relative and away from player identity. */
.table-felt > #trumpBanner.trump-signature {
  position: absolute !important;
  top: 20% !important;
  right: 8% !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 18 !important;
}
.table-felt > #trumpBanner .trump-medallion-name {
  font-size: 10px !important;
  padding: 3px 6px 2px !important;
}
.table-felt > #trumpBanner .trump-medallion-name small {
  font-size: 0.78em !important;
  color: rgba(239, 214, 155, 0.84) !important;
}

/* Choose Trump keeps its clarity but reads as enamel/brass hardware instead of flat web buttons. */
.trump-buttons .trump-btn,
.lt-trump-buttons .trump-btn {
  border: 2px solid rgba(226, 190, 92, 0.9) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 -4px 0 rgba(0, 0, 0, 0.24),
    0 4px 8px rgba(0, 0, 0, 0.38) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  transform: translateY(0);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.08s ease !important;
}
.trump-buttons .trump-btn:active,
.lt-trump-buttons .trump-btn:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

/* ===== Rook525: structural cleanup roll =====
   Preserve: left/right seat concept, top avatar anchor, approved trump-stamp landing spot.
   Goal: stable table geometry, less reading, protected player identity. */

/* Build number is always visible on the landing page, even while Explore is closed. */
.lobby-build-line {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 18px;
  margin: 0.18rem 0 0.08rem;
  pointer-events: none;
}
.lobby-build-line .version-tag {
  display: inline-block !important;
  opacity: 0.72;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #d8c58c;
}

/* Routine prose no longer occupies or floats across the table. Legal play is communicated by
   playable/dimmed cards and controls. Important modal/error flows remain separate. */
body.in-game .game-room > #messageArea.message {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Current-trick points live as a tiny physical pot marker. Zero layout footprint. */
.hand-area .trick-pts-bar {
  position: absolute !important;
  left: 50% !important;
  top: 2px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0.08rem 0.38rem !important;
  max-width: none !important;
  z-index: 40 !important;
  border-radius: 999px !important;
  background: rgba(18, 12, 7, 0.72) !important;
  border: 1px solid rgba(201, 162, 39, 0.32) !important;
  color: rgba(255, 224, 130, 0.82) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* More is a compact sheet anchored to the toolbar, never a vertical stack across the felt. */
.game-more-menu {
  position: absolute !important;
  right: 4px !important;
  top: calc(100% + 5px) !important;
  width: min(310px, 94vw) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 8px !important;
  max-height: min(62vh, 330px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 1400 !important;
}
.game-more-menu .icon-btn {
  min-height: 42px !important;
  padding: 0.32rem 0.42rem !important;
}

/* Seat identity: keep the top portrait anchor. Name/level are a protected companion unit. */
#slot-partner .name {
  transform: translateY(2px) !important;
}
#slot-me .name {
  transform: translateY(-1px) !important;
}
#slot-me .seat-identity-copy,
#slot-partner .seat-identity-copy {
  max-width: 8.8rem !important;
}
#slot-me .seat-identity-copy .player-name-text,
#slot-partner .seat-identity-copy .player-name-text {
  max-width: 7.5rem !important;
}

/* Right seat keeps the approved placement but buys a little more name runway. */
.player-slot.right .seat-avatar-side {
  transform: translateX(-4px) !important;
  margin-right: -2px !important;
}
.player-slot.right .seat-identity-copy .player-name-text {
  max-width: 6.8rem !important;
}
.player-slot.right .name {
  max-width: 9.6rem !important;
}

/* Tiny name drop without moving avatars. */
.player-slot.left .name {
  transform: translateY(2px) !important;
}

/* Landscape has more safe room: bring the human identity upward, not the hand/cards. */
@media (orientation: landscape) {
  #slot-me.player-slot.bottom {
    transform: translateY(-6px) !important;
  }
  #slot-me .name {
    transform: none !important;
  }
}

/* Never revive the old chess-glyph decoration / stray symbol line. */
body.in-game .landscape-theater::before {
  content: 'HOUSE OF ROOKS' !important;
}

/* Rook527 — SOL developer layout editor Phase 2 */
.player-slot.sol-layout-positioned {
  translate: var(--sol-seat-x, 0px) var(--sol-seat-y, 0px);
}
.player-slot .seat-avatar.sol-avatar-positioned,
.player-slot .seat-avatar-side.sol-avatar-positioned {
  translate: var(--sol-avatar-x, 0px) var(--sol-avatar-y, 0px);
  scale: var(--sol-avatar-scale, 1);
  transform-origin: center;
}
.player-slot .name.sol-name-positioned {
  translate: var(--sol-name-x, 0px) var(--sol-name-y, 0px);
}
.sol-layout-editing .sol-layout-drag-target {
  cursor: grab !important;
  outline: 2px dashed rgba(255, 215, 90, 0.95) !important;
  outline-offset: 5px;
  touch-action: none;
}
.sol-layout-editing .sol-layout-dragging {
  cursor: grabbing !important;
  outline-style: solid !important;
  filter: drop-shadow(0 0 8px rgba(255, 210, 70, 0.7));
}
.sol-layout-panel {
  position: fixed;
  z-index: 1000001;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: min(96vw, 430px);
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid #b98a36;
  border-radius: 10px;
  background: rgba(18, 12, 7, 0.96);
  color: #ffe8a8;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  font:
    700 11px/1.1 system-ui,
    sans-serif;
}
.sol-layout-panel.hidden {
  display: none !important;
}
.sol-layout-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.sol-layout-panel button {
  border: 1px solid #a77a2c;
  border-radius: 7px;
  min-height: 30px;
  padding: 0.3rem 0.46rem;
  background: #3a2812;
  color: #ffe8a8;
  font-weight: 800;
  font-size: 10px;
}
.sol-layout-panel button.active {
  background: #d0a23c;
  color: #1a1007;
  border-color: #ffe69a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#solLayoutCoords {
  min-width: 170px;
  text-align: center;
}
@media (max-width: 600px) {
}

/* ===== Rook529: SOL activation + table cleanup ===== */
/* SOL's private launcher is impossible to miss in offline developer play{width:auto!important;min-width:92px!important;padding:.32rem .5rem!important;border-color:#e0b64c!important;background:linear-gradient(180deg,#5a3d16,#2a1a09)!important;color:#ffe6a0!important}
/* More opens away from the central felt instead of dropping across play. */
.game-more-menu {
  top: auto !important;
  bottom: calc(100% + 5px) !important;
}
/* Message Table is retired from player-facing UI, including stale cached markup. */
.table-msg-btn,
[data-open-table-msg],
#tableMsgModal {
  display: none !important;
}
/* No redundant persistent trump labels: the physical stamp owns the state. */
#trumpBadge {
  display: none !important;
}

/* ===== Rook530: SOL Studio 2 — movable editor{cursor:grab!important;user-select:none;touch-action:none;border-bottom:1px solid rgba(185,138,54,.35);padding-bottom:.25rem!important}
.sol-hidden-list{max-height:90px;overflow:auto;border:1px solid rgba(185,138,54,.4);padding:3px}.sol-hidden-list button{display:block;width:100%;text-align:left;margin:2px 0}
#trickArea{pointer-events:none}#trickArea .trick-card-wrap,#trickArea .card{pointer-events:auto}


/* ===== Rook542: surgical reveal + compact in-table options ===== */
/* The top nest card must visibly finish its turn on browsers/WebViews that are
   conservative about 3D backface compositing. Gameplay timing/state is unchanged. */
.table-nest-flip.is-face .table-nest-flip-face,
.table-nest-flip.is-flipped .table-nest-flip-face {
  opacity: 1 !important;
  z-index: 3 !important;
}
.table-nest-flip.is-face .table-nest-flip-back,
.table-nest-flip.is-flipped .table-nest-flip-back {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Game options should read as one compact Griffin House sheet, not stacked web bars. */

/* Griffin House is the only ruleset; the full-width preset bar was redundant. */

@media (max-width: 390px) {
}

/* Rook545 — confirmed physical Galaxy S24 bid-dock correction. */
@media (orientation: portrait) {
}

/* ===== Rook546: physical-S24 visual cleanup pass =====
   Surgical presentation only. Preserve Rook545 nest reveal/gameplay behavior. */

/* Seat geometry must never be driven by name length. Names yield inside a fixed identity lane. */
@media (orientation: portrait) {
  #slot-me.player-slot.bottom,
  #slot-partner.player-slot.top {
    width: 9.6rem !important;
    max-width: 9.6rem !important;
  }
  #slot-me .name,
  #slot-partner .name {
    width: 8.8rem !important;
    max-width: 8.8rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    width: 8.5rem !important;
    max-width: 8.5rem !important;
    min-width: 0 !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    max-width: 6.65rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .player-slot.left,
  .player-slot.right {
    width: 7.35rem !important;
    max-width: 7.35rem !important;
  }
  .player-slot.left .name,
  .player-slot.right .name {
    width: 6.8rem !important;
    max-width: 6.8rem !important;
  }
  .player-slot.left .seat-identity-copy,
  .player-slot.right .seat-identity-copy {
    width: 6.55rem !important;
    max-width: 6.55rem !important;
    min-width: 0 !important;
  }
  .player-slot.left .seat-identity-copy .player-name-text,
  .player-slot.right .seat-identity-copy .player-name-text {
    max-width: 4.65rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Bid dock: compact physical control centered in the lower-middle felt lane.
   Keep it clear of the human portrait/identity and the played-card lane. */
@media (orientation: portrait) {
}

/* Mobile overlays: one visual language, safe margins, readable hierarchy, no giant browser-like sheets. */
@media (orientation: portrait) {
  .modal {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  .modal-content {
    width: min(92vw, 22rem) !important;
    max-width: min(92vw, 22rem) !important;
    max-height: 88dvh !important;
    overflow: auto !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  .modal-content h2 {
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
    margin: 0.15rem 0 0.5rem !important;
  }
  .modal-content .btn {
    min-height: 38px;
  }

  /* Score/remaining-cards should feel like a compact table plaque, not cover the whole room. */
  #scoreModal .modal-content.scoreboard-modal {
    width: min(94vw, 23rem) !important;
    max-width: min(94vw, 23rem) !important;
    max-height: 90dvh !important;
    padding: 0.55rem !important;
  }

  /* Game options retains its own tabbed sheet but gets breathing room from phone edges. */

  /* Career/profile cards: keep the portrait/table visible around the card. */
  .hor-career-card,
  .career-card,
  [class*='career-card'] {
    max-width: min(90vw, 21rem) !important;
    max-height: 86dvh !important;
    box-sizing: border-box !important;
  }
}

/* Long text inside any table overlay yields before it can push controls/portraits sideways. */
.modal-content,
.table-msg-box,
.bot-style-tip {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ===== Rook547: physical S24 measured composition roll ===== */
/* Bid dock: exact horizontal center. JS supplies the vertical midpoint between
   the bottom of the live played-card cluster and the top of the bottom avatar. */
@media (orientation: portrait) {
}

/* Trump stamp: preserve approved final size, move upward, and keep the slam/burst
   inside the phone-safe composition instead of throwing enlarged artwork offscreen. */
@media (orientation: portrait) {
  .table-felt > #trumpBanner.trump-signature {
    top: 14.5% !important;
    right: 9% !important;
    max-width: 30% !important;
    transform-origin: center center !important;
  }
  .trump-banner.trump-stamp-anim {
    animation-name: trumpStampSlamSafe !important;
  }
}
@keyframes trumpStampSlamSafe {
  0% {
    transform: scale(1.75) rotate(-10deg) translateY(-6px);
    opacity: 0;
    filter: blur(1px);
  }
  42% {
    transform: scale(0.92) rotate(2deg);
    opacity: 1;
    filter: blur(0);
  }
  62% {
    transform: scale(1.1) rotate(-1deg);
  }
  80% {
    transform: scale(0.97) rotate(0.4deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

/* Player identity: avatar is the anchor; level badge is protected; long names
   reduce gracefully before ellipsis rather than moving either neighbor. */
@media (orientation: portrait) {
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    width: 9.1rem !important;
    max-width: 9.1rem !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    max-width: 7.15rem !important;
    font-size: clamp(0.68rem, 2.75vw, 0.9rem) !important;
    letter-spacing: -0.01em !important;
  }
  .player-slot.left .seat-identity-copy,
  .player-slot.right .seat-identity-copy {
    width: 6.9rem !important;
    max-width: 6.9rem !important;
  }
  .player-slot.left .seat-identity-copy .player-name-text,
  .player-slot.right .seat-identity-copy .player-name-text {
    max-width: 5.05rem !important;
    font-size: clamp(0.62rem, 2.5vw, 0.82rem) !important;
    letter-spacing: -0.015em !important;
  }
  .player-slot .seat-identity-copy .hor-career-badge {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Same-trick special captures become one House Moment instead of serial interruptions. */
.capture-overlay.capture-combined .capture-card {
  width: min(88vw, 320px);
  padding: 0.9rem 1rem 1rem;
}
.capture-overlay.capture-combined .capture-emoji {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}
.capture-overlay.capture-combined .capture-sub {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.55rem;
  color: #f6dfb2;
  text-align: left;
}
.capture-combo-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.45rem;
  align-items: start;
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(255, 213, 79, 0.28);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
}
.capture-combo-icon {
  font-size: 1.05rem;
  text-align: center;
  line-height: 1.2;
}
.capture-combo-row b {
  display: block;
  color: #ffe082;
  font-size: 0.78rem;
  line-height: 1.15;
  letter-spacing: 0.025em;
}
.capture-combo-row small {
  display: block;
  color: #ffccbc;
  font-size: 0.7rem;
  line-height: 1.2;
  margin-top: 0.08rem;
}

/* ===== Rook548: S24 banked visual corrections ===== */
/* Exact live midpoint: JS uses viewport geometry; no legacy SOL offset may bias it. */
@media (orientation: portrait) {
}

/* STAMP THE TRUMP selector: viewport-centered. Center content may be covered;
   avatars are protected by a compact S24-safe footprint. Animation never leaves viewport. */
@media (orientation: portrait) {
  body.in-game #actionPanel.trump-showdown:not(.hidden),
  #actionPanel.trump-showdown:not(.hidden) {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    translate: none !important;
    scale: 1 !important;
    width: min(13.25rem, 59vw) !important;
    max-width: min(13.25rem, 59vw) !important;
    height: auto !important;
    max-height: 48dvh !important;
    padding: 0.58rem 0.62rem 0.52rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 150000 !important;
    animation: trumpChooserSafeIn 0.18s ease-out both !important;
    transform-origin: center center !important;
  }
  #actionPanel.trump-showdown h3 {
    margin: 0.02rem 0 0.42rem !important;
    text-align: center !important;
  }
  #actionPanel.trump-showdown .trump-showdown-grid {
    gap: 0.42rem !important;
  }
  #actionPanel.trump-showdown .option-hint {
    margin: 0.38rem 0 0 !important;
    font-size: 0.67rem !important;
    text-align: center !important;
  }
}
@keyframes trumpChooserSafeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* On-table trump marker: modest felt breathing room, without changing its approved size. */
@media (orientation: portrait) {
  .table-felt > #trumpBanner.trump-signature {
    top: 17.5% !important;
    right: 10.5% !important;
  }
}

/* Lead is a centered upper-rim badge on every portrait; JS anchors to actual avatar geometry. */
@media (orientation: portrait) {
  .seat-lead-tag {
    min-width: 30px !important;
    height: auto !important;
    padding: 0.1rem 0.34rem !important;
    border-radius: 999px !important;
    background: rgba(29, 22, 11, 0.94) !important;
    border: 1px solid #d9b84b !important;
    color: #f5d66f !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.48) !important;
  }
}

/* Identity runway: avatar remains fixed; normal names stay natural and long names get more room
   before ellipsis. Career/level badge never shrinks. */
@media (orientation: portrait) {
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    width: 11.4rem !important;
    max-width: 11.4rem !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    max-width: 9.2rem !important;
    font-size: clamp(0.62rem, 2.55vw, 0.88rem) !important;
  }
  .player-slot.left .seat-identity-copy,
  .player-slot.right .seat-identity-copy {
    width: 7.25rem !important;
    max-width: 7.25rem !important;
  }
  .player-slot.left .seat-identity-copy .player-name-text,
  .player-slot.right .seat-identity-copy .player-name-text {
    max-width: 5.45rem !important;
    font-size: clamp(0.58rem, 2.3vw, 0.78rem) !important;
  }
  .player-slot .hor-career-badge {
    flex: 0 0 auto !important;
  }
}

/* Moon bid pill: centered horizontally and separated from bottom avatar. */
@media (orientation: portrait) {
  #slot-me .bid-badge.bid-moon {
    min-width: max-content !important;
  }
}

/* Approved Shoot-the-Moon declaration: special house moment, not a generic bid control. */
.moon-declaration-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(2, 5, 12, 0.34);
  backdrop-filter: blur(1px);
}
.moon-declaration-card {
  position: relative;
  width: min(86vw, 320px);
  box-sizing: border-box;
  padding: 1rem 0.8rem 0.8rem;
  overflow: hidden;
  text-align: center;
  color: #f9e8b1;
  border: 2px solid #d5ad43;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 239, 174, 0.2), transparent 24%),
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 32%, rgba(255, 255, 255, 0.11) 0 1px, transparent 1.5px),
    linear-gradient(180deg, #071426 0%, #050b15 56%, #120d08 100%);
  box-shadow:
    0 0 0 3px rgba(57, 35, 12, 0.88),
    0 14px 38px rgba(0, 0, 0, 0.72),
    inset 0 0 24px rgba(216, 173, 67, 0.12);
  animation: moonDeclarationIn 0.24s ease-out both;
}
.moon-declaration-card:before,
.moon-declaration-card:after {
  content: '✦';
  position: absolute;
  top: 8px;
  color: #e6c35c;
  font-size: 1.15rem;
}
.moon-declaration-card:before {
  left: 12px;
}
.moon-declaration-card:after {
  right: 12px;
}
.moon-orbit {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -0.18rem 0 0.05rem;
}
.moon-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 2.35rem;
  line-height: 1;
  color: #fff1b6;
  text-shadow: 0 0 12px rgba(255, 226, 121, 0.9);
}
.moon-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: 1.72rem;
  line-height: 0.88;
  letter-spacing: 0.035em;
  color: #f7d96f;
  text-shadow:
    0 2px 0 #5c3b08,
    0 0 10px rgba(236, 194, 69, 0.32);
}
.moon-points {
  display: inline-block;
  margin: 0.55rem 0 0.42rem;
  padding: 0.18rem 0.9rem;
  border-top: 1px solid #d5ad43;
  border-bottom: 1px solid #d5ad43;
  color: #ffe89a;
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
}
.moon-win {
  margin: 0.1rem auto 0.35rem;
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 0.86rem;
  line-height: 1.18;
  letter-spacing: 0.025em;
  color: #f5e1a4;
}
.moon-win strong {
  color: #ffd75c;
}
.moon-risk {
  margin: 0.18rem 0 0.68rem;
  color: #e8d8bd;
  font-size: 0.69rem;
  line-height: 1.18;
}
.moon-actions {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 0.48rem;
}
.moon-actions button {
  min-height: 52px;
  border-radius: 12px;
  border: 2px solid #d5ad43;
  font-family: Georgia, serif;
  font-weight: 900;
  color: #fff4c7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 3px 7px rgba(0, 0, 0, 0.45);
}
.moon-commit {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#168a42, #075b29);
  font-size: 0.82rem;
  line-height: 0.95;
}
.moon-commit:first-letter {
  font-size: 1.25rem;
}
.moon-pass {
  background: linear-gradient(#9e252d, #68161d);
  font-size: 1rem;
}
@keyframes moonDeclarationIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-height: 700px) and (orientation: portrait) {
  .moon-declaration-card {
    width: min(80vw, 290px);
    padding: 0.72rem 0.68rem 0.65rem;
  }
  .moon-orbit {
    height: 38px;
  }
  .moon-disc {
    width: 38px;
    height: 38px;
    font-size: 1.9rem;
  }
  .moon-title {
    font-size: 1.48rem;
  }
  .moon-actions button {
    min-height: 46px;
  }
}

/* ===== Rook550: single-authority portrait bid + identity layout =====
   These rules intentionally come last. 548/549 proved that stacking more SOL
   offsets was not reliable on the physical S24. */
@media (orientation: portrait) {
  /* Names own a fixed runway. Avatar coordinates remain untouched. */
  #slot-me .name,
  #slot-partner .name,
  #slot-left .name,
  #slot-right .name {
    translate: none !important;
    scale: 1 !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #slot-me .name,
  #slot-partner .name {
    width: min(12.6rem, 56vw) !important;
    max-width: min(12.6rem, 56vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(0.64rem, 2.65vw, 0.9rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #slot-left .name,
  #slot-right .name {
    width: 7.9rem !important;
    max-width: 7.9rem !important;
  }
  #slot-left .seat-identity-copy,
  #slot-right .seat-identity-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #slot-left .seat-identity-copy .player-name-text,
  #slot-right .seat-identity-copy .player-name-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(0.59rem, 2.35vw, 0.8rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .player-slot .seat-identity-copy .hor-career-badge,
  .player-slot .name .hor-career-badge {
    flex: 0 0 auto !important;
  }
}

/* ===== Rook551: protected identity lanes + contained trump + House popup modernization ===== */
@media (orientation: portrait) {
  /* Rook550 bid placement is APPROVED. Do not move it here. */

  /* NAME + RANK are one compact identity unit. The rank follows the final visible
     name character instead of occupying the far end of a fixed runway. */
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy,
  #slot-left .seat-identity-copy,
  #slot-right .seat-identity-copy {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    white-space: nowrap !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text,
  #slot-left .seat-identity-copy .player-name-text,
  #slot-right .seat-identity-copy .player-name-text {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .player-slot .seat-identity-copy .hor-career-badge {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Side identities stay compact around their avatar so neither rank nor a long
     name can enter the center-card/bid safe zone. */
  #slot-left .name,
  #slot-right .name {
    width: 6.9rem !important;
    max-width: 6.9rem !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  #slot-left .seat-identity-copy,
  #slot-right .seat-identity-copy {
    max-width: 6.45rem !important;
  }
  #slot-left .seat-identity-copy .player-name-text,
  #slot-right .seat-identity-copy .player-name-text {
    max-width: 4.65rem !important;
    font-size: clamp(0.57rem, 2.25vw, 0.78rem) !important;
  }

  /* Top/bottom keep the successful Rook550 long-name room, but the badge now
     hugs the end of the text instead of floating at the edge of the runway. */
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    max-width: 11.8rem !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    max-width: 9.55rem !important;
  }

  /* Rook553: mirror the physical trump marker into the lower felt while preserving
     its horizontal inset, approved size, and contained slam animation. */
  .table-felt > #trumpBanner.trump-signature {
    top: auto !important;
    bottom: 17.5% !important;
    right: 10.5% !important;
    transform-origin: center center !important;
  }
  .trump-banner.trump-stamp-anim {
    animation: trumpStampSlamContained 0.52s cubic-bezier(0.2, 0.85, 0.25, 1) both !important;
  }
}
@keyframes trumpStampSlamContained {
  0% {
    transform: scale(0.82) rotate(-4deg);
    opacity: 0;
    filter: blur(0.4px);
  }
  55% {
    transform: scale(1.04) rotate(1deg);
    opacity: 1;
    filter: blur(0);
  }
  78% {
    transform: scale(0.985) rotate(-0.25deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* Griffin House popup language: custom game dialogs share walnut/brass/dark-felt
   hardware, compact phone-safe geometry and restrained motion. Functional layout
   inside specialized score/discard/rules sheets remains untouched. */
.modal {
  background: rgba(4, 7, 8, 0.72) !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.9) !important;
  backdrop-filter: blur(7px) saturate(0.9) !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}

.modal > .modal-content h2,
.modal > .modal-content h3 {
  color: #f2d57a !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.modal > .modal-content h2 {
  margin: 0.05rem 0 0.55rem !important;
  font-size: clamp(1.05rem, 4vw, 1.35rem) !important;
}
.modal > .modal-content p {
  line-height: 1.34;
}
.modal > .modal-content .btn,
#confirmSheet .btn,
#newPlayersModal .btn,
#botPickerModal .btn {
  min-height: 40px;
  border-radius: 11px !important;
  border: 1px solid rgba(226, 190, 92, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.32) !important;
}
.modal > .modal-content .btn.primary,
#confirmSheet .btn.primary {
  background: linear-gradient(180deg, #9b7224, #60420f) !important;
  color: #fff1b8 !important;
}
.modal > .modal-content .btn.danger,
#confirmSheet .btn.danger {
  background: linear-gradient(180deg, #8f3030, #561a1a) !important;
  color: #ffe8dc !important;
}
@keyframes housePopupIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Short table notices now read as a compact House plaque instead of an old web alert. */
.table-msg-popup {
  top: 22% !important;
  max-width: calc(100vw - 24px);
}
.table-msg-box {
  min-width: 0 !important;
  width: max-content;
  max-width: min(86vw, 390px) !important;
  padding: 0.68rem 0.85rem !important;
  border: 1px solid rgba(232, 196, 101, 0.82) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(57, 35, 18, 0.98), rgba(17, 20, 15, 0.99)) !important;
  box-shadow:
    0 0 0 2px rgba(37, 22, 10, 0.78),
    0 12px 28px rgba(0, 0, 0, 0.55) !important;
}
.table-msg-from {
  color: #f2d57a !important;
  letter-spacing: 0.04em;
}
.table-msg-body {
  color: #f7edcf !important;
  font-size: 0.92rem !important;
  line-height: 1.3;
}

/* Shoot the Moon remains intentionally unique and dramatic within the new family. */
.moon-declaration-overlay {
  background: radial-gradient(
    circle at 50% 38%,
    rgba(21, 36, 62, 0.36),
    rgba(2, 5, 10, 0.78)
  ) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.moon-declaration-card {
  border-radius: 20px !important;
  box-shadow:
    0 0 0 3px rgba(57, 35, 12, 0.9),
    0 18px 46px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(211, 174, 66, 0.12),
    inset 0 0 24px rgba(216, 173, 67, 0.12) !important;
}

@media (max-width: 430px) and (orientation: portrait) {
}

/* ===== Rook552: table-first bidding + modern special-event presentations ===== */
@media (orientation: portrait) {
  /* The Rook550/551 location is approved. Strip only the surrounding bid panel so
     the controls read as table hardware floating directly over the felt. */

  /* Side identity safe zone: name + rank remain one unit and yield before the
     played-card lane. Never solve this by moving the cards or approved bid controls. */
  #slot-left .seat-identity-copy,
  #slot-right .seat-identity-copy {
    max-width: 5.55rem !important;
  }
  #slot-left .seat-identity-copy .player-name-text,
  #slot-right .seat-identity-copy .player-name-text {
    max-width: 3.78rem !important;
    font-size: clamp(0.55rem, 2.12vw, 0.76rem) !important;
  }
}

/* Information-only special captures are table moments, not modal boxes. */
.capture-overlay {
  background: radial-gradient(circle at center, rgba(7, 15, 20, 0.22), transparent 58%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.capture-overlay.capture-rook,
.capture-overlay.capture-one {
  background: radial-gradient(circle at center, rgba(7, 15, 20, 0.22), transparent 58%) !important;
}
.capture-burst {
  width: min(62vw, 240px) !important;
  height: min(62vw, 240px) !important;
  background: radial-gradient(
    circle,
    rgba(245, 210, 103, 0.28) 0%,
    rgba(245, 210, 103, 0.08) 36%,
    transparent 68%
  ) !important;
}
.capture-card {
  width: min(84vw, 310px) !important;
  max-width: min(84vw, 310px) !important;
  padding: 0.35rem 0.55rem 0.45rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.92) !important;
}
.capture-emoji {
  font-size: 2.35rem !important;
  margin-bottom: 0.15rem !important;
}
.capture-title {
  font-size: clamp(1.15rem, 5.2vw, 1.55rem) !important;
  color: #ffe38a !important;
}
.capture-sub {
  color: #fff0c4 !important;
  font-size: 0.82rem !important;
  text-shadow: 0 2px 8px #000 !important;
}
.capture-overlay.capture-combined .capture-card {
  width: min(86vw, 320px) !important;
  padding: 0.4rem 0.5rem !important;
}
.capture-overlay.capture-combined .capture-sub {
  gap: 0.3rem !important;
}
.capture-combo-row {
  padding: 0.34rem 0.42rem !important;
  border: 1px solid rgba(239, 204, 103, 0.34) !important;
  border-radius: 10px !important;
  background: rgba(4, 12, 14, 0.68) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Lucky Specials remains a real interactive spinner{ background:rgba(2,8,10,.62) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }


/* ===== Rook554: one-shot centered trump announcement =====
   Full-size medallion. In portrait it is centered on the FULL SCREEN horizontally
   and placed in the visual gap below the top player's BID pill and above the
   Griffin watermark head. It bounces in, reads briefly, then fades completely. */
@media (orientation: portrait) {
  .table-felt > #trumpBanner.trump-signature.trump-stamp-anim {
    animation: rook554TrumpBounceFade 1.4s cubic-bezier(0.18, 0.82, 0.24, 1) both !important;
  }
}
@keyframes rook554TrumpBounceFade {
  0% {
    transform: translate(-50%, calc(-50% - 34px)) scale(1);
    opacity: 0;
    filter: blur(0.7px);
  }
  18% {
    transform: translate(-50%, calc(-50% + 5px)) scale(1.06);
    opacity: 1;
    filter: blur(0);
  }
  30% {
    transform: translate(-50%, calc(-50% - 3px)) scale(0.98);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  76% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ===== Rook555: seat-owned Royal Crest bidding markers =====
   Each bidder keeps a compact table-hardware marker during the auction only.
   Markers are positioned toward the felt/center from their owning seat and are
   removed by render logic immediately when the bidding phase ends. */
@media (orientation: portrait) {
  .table-felt .player-slot .bid-badge.bid-value-badge {
    position: absolute !important;
    width: max-content !important;
    min-width: 4.65rem !important;
    max-width: 6.2rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.19rem 0.78rem 0.2rem !important;
    border: 1px solid #e5bd54 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(35, 28, 18, 0.98), rgba(8, 9, 10, 0.98)) !important;
    color: #fff4d1 !important;
    font-size: clamp(0.58rem, 2.45vw, 0.76rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    z-index: 34 !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 190, 0.18),
      0 2px 7px rgba(0, 0, 0, 0.5),
      0 0 7px rgba(223, 179, 60, 0.18) !important;
    animation: none !important;
  }
  .table-felt .player-slot .bid-badge.bid-value-badge::before,
  .table-felt .player-slot .bid-badge.bid-value-badge::after {
    content: none;
    position: absolute;
    top: 50%;
    width: 0.82rem;
    height: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) rotate(45deg);
    color: #f0c95f;
    font-size: 0.57rem;
    line-height: 1;
    background: #15120d;
    border: 1px solid #d6a83a;
    box-shadow: 0 0 5px rgba(226, 181, 55, 0.35);
  }
  .table-felt .player-slot .bid-badge.bid-value-badge::before {
    left: -0.46rem;
  }
  .table-felt .player-slot .bid-badge.bid-value-badge::after {
    right: -0.46rem;
  }
  .table-felt .player-slot .bid-badge.bid-value-badge.bid-high {
    color: #fff0b0 !important;
    border-color: #ffd66b !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 206, 0.22),
      0 2px 8px rgba(0, 0, 0, 0.52),
      0 0 10px rgba(241, 191, 52, 0.32) !important;
  }

  /* Radial ownership: each marker sits on the felt side of its avatar. */
  #slot-partner .bid-badge.bid-value-badge {
    left: 50% !important;
    right: auto !important;
    top: calc(100% + 0.34rem) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }
  #slot-me .bid-badge.bid-value-badge {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 0.34rem) !important;
    transform: translateX(-50%) !important;
  }
  #slot-left .bid-badge.bid-value-badge {
    left: calc(100% + 0.34rem) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  #slot-right .bid-badge.bid-value-badge {
    left: auto !important;
    right: calc(100% + 0.34rem) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* ===== Rook556: authoritative Royal Crest styling on the REAL seat bid badges =====
   Preserve the proven seat anchors/geometry. Style the existing .bid-badge nodes
   directly so BID and PASS share one Griffin House hardware language. */
@media (orientation: portrait) {
  .table-felt .player-slot .bid-badge.bid-value-badge,
  .table-felt .player-slot .bid-badge.bid-pass,
  #slot-me .bid-badge.bid-value-badge,
  #slot-me .bid-badge.bid-pass {
    width: max-content !important;
    min-width: 4.55rem !important;
    max-width: 6.25rem !important;
    box-sizing: border-box !important;
    padding: 0.22rem 0.78rem 0.23rem !important;
    border: 1px solid #e6bd4d !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(45, 31, 13, 0.98), rgba(12, 10, 8, 0.99)) !important;
    color: #fff0b5 !important;
    font-size: clamp(0.58rem, 2.45vw, 0.76rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 246, 199, 0.22),
      0 2px 7px rgba(0, 0, 0, 0.52),
      0 0 8px rgba(229, 180, 49, 0.24) !important;
    animation: none !important;
  }

  .table-felt .player-slot .bid-badge.bid-value-badge::before,
  .table-felt .player-slot .bid-badge.bid-value-badge::after,
  .table-felt .player-slot .bid-badge.bid-pass::before,
  .table-felt .player-slot .bid-badge.bid-pass::after,
  #slot-me .bid-badge.bid-value-badge::before,
  #slot-me .bid-badge.bid-value-badge::after,
  #slot-me .bid-badge.bid-pass::before,
  #slot-me .bid-badge.bid-pass::after {
    content: none !important;
    position: absolute !important;
    top: 50% !important;
    width: 0.82rem !important;
    height: 0.82rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f4cc62 !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
    background: #17120a !important;
    border: 1px solid #d6a83a !important;
    box-shadow: 0 0 5px rgba(226, 181, 55, 0.34) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    pointer-events: none !important;
  }
  .table-felt .player-slot .bid-badge.bid-value-badge::before,
  .table-felt .player-slot .bid-badge.bid-pass::before,
  #slot-me .bid-badge.bid-value-badge::before,
  #slot-me .bid-badge.bid-pass::before {
    left: -0.46rem !important;
  }
  .table-felt .player-slot .bid-badge.bid-value-badge::after,
  .table-felt .player-slot .bid-badge.bid-pass::after,
  #slot-me .bid-badge.bid-value-badge::after,
  #slot-me .bid-badge.bid-pass::after {
    right: -0.46rem !important;
  }

  .table-felt .player-slot .bid-badge.bid-high,
  #slot-me .bid-badge.bid-high {
    color: #fff4c8 !important;
    border-color: #ffd66b !important;
    background: linear-gradient(180deg, rgba(62, 41, 13, 0.99), rgba(15, 11, 6, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 249, 215, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.54),
      0 0 11px rgba(241, 191, 52, 0.34) !important;
  }

  /* Passed seats stay subdued, but the crest itself remains readable. */
  .player-slot.is-passed .bid-badge.bid-pass,
  #slot-me.is-passed .bid-badge.bid-pass {
    opacity: 0.82 !important;
    filter: saturate(0.62) !important;
  }
}

/* ===== Rook557: per-hand center bidding skins + bottom-seat badge ownership =====
   Same controls, same touch targets, same Rook550 live-gap anchor. Only the visual
   skin changes once per hand: Classic -> Royal -> Modern -> Coin -> Low -> Signature. */
@media (orientation: portrait) {
  /* Bottom human uses the same real bid-badge system as the other three seats. */
  #slot-me > .bid-badge.bid-value-badge,
  #slot-me > .bid-badge.bid-pass {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 0.38rem) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    translate: none !important;
    scale: 1 !important;
    z-index: 80 !important;
    display: block;
  }
  #slot-me > .bid-badge.hidden {
    display: none !important;
  }

  /* Shared geometry: never change location or touch-target sizing between skins. */

  /* 1 Classic Gold */

  /* 2 Royal Crest */

  /* 3 Modern Clean */

  /* 4 Brass Coin */

  /* 5 Low Profile */

  /* 6 Signature */
}

/* ===== Rook559: synchronized per-hand STAMP THE TRUMP skins — LIVE actionPanel owner =====
   Uses the exact same hor-bid-theme-* class selected once per hand in Rook557.
   Function, button geometry and trump rules are unchanged; this is visual skin only. */
@media (orientation: portrait) {
  #actionPanel.trump-showdown:not(.hidden) {
    background: linear-gradient(180deg, rgba(18, 16, 13, 0.98), rgba(7, 9, 12, 0.98)) !important;
    border: 1px solid #c89b38 !important;
    border-radius: 1rem !important;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.58),
      inset 0 0 0 1px rgba(255, 224, 133, 0.08) !important;
    color: #f6e8bd !important;
  }
  #actionPanel.trump-showdown h3 {
    color: #f4d778 !important;
    text-transform: uppercase;
    letter-spacing: 0.055em !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 800 !important;
  }
  #actionPanel.trump-showdown .trump-tile {
    min-height: 3.55rem !important;
    border: 1px solid rgba(244, 206, 101, 0.72) !important;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.13),
      0 2px 5px rgba(0, 0, 0, 0.3) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 0.86rem !important;
  }
  #actionPanel.trump-showdown .option-hint {
    color: #d8c38a !important;
  }

  /* 1 Classic Gold */
  body.hor-bid-theme-classic #actionPanel.trump-showdown {
    border: 2px solid #d2a746 !important;
  }
  body.hor-bid-theme-classic #actionPanel.trump-showdown .trump-tile {
    border: 2px solid #d8ad48 !important;
    border-radius: 0.72rem !important;
  }

  /* 2 Royal Crest */
  body.hor-bid-theme-royal #actionPanel.trump-showdown {
    border: 2px solid #d9ad45 !important;
    border-radius: 0.45rem !important;
  }
  body.hor-bid-theme-royal #actionPanel.trump-showdown .trump-tile {
    border: 2px solid #e2b94e !important;
    border-radius: 0.28rem !important;
    clip-path: polygon(7% 0, 93% 0, 100% 18%, 100% 82%, 93% 100%, 7% 100%, 0 82%, 0 18%);
  }

  /* 3 Modern Clean */
  body.hor-bid-theme-modern #actionPanel.trump-showdown {
    border: 1px solid rgba(224, 188, 88, 0.82) !important;
    border-radius: 1.1rem !important;
  }
  body.hor-bid-theme-modern #actionPanel.trump-showdown .trump-tile {
    border-radius: 0.85rem !important;
    box-shadow: none !important;
  }

  /* 4 Brass Coin */
  body.hor-bid-theme-coin #actionPanel.trump-showdown {
    border: 1px solid #ad812c !important;
    border-radius: 0.65rem !important;
  }
  body.hor-bid-theme-coin #actionPanel.trump-showdown .trump-showdown-grid {
    gap: 0.55rem !important;
  }
  body.hor-bid-theme-coin #actionPanel.trump-showdown .trump-tile {
    aspect-ratio: 1/1 !important;
    min-height: 0 !important;
    width: 4.2rem !important;
    justify-self: center !important;
    border-radius: 50% !important;
    border: 4px double #d1a43e !important;
    box-shadow:
      inset 0 0 0 2px rgba(255, 229, 151, 0.12),
      0 3px 7px rgba(0, 0, 0, 0.45) !important;
  }

  /* 5 Low Profile */
  body.hor-bid-theme-low #actionPanel.trump-showdown {
    padding: 0.5rem 0.58rem 0.44rem !important;
    border-radius: 0.85rem !important;
  }
  body.hor-bid-theme-low #actionPanel.trump-showdown .trump-tile {
    min-height: 2.7rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  /* 6 Signature */
  body.hor-bid-theme-signature #actionPanel.trump-showdown {
    border: 2px solid #e1b343 !important;
    border-radius: 0.38rem !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.62),
      0 0 14px rgba(220, 165, 40, 0.18) !important;
  }
  body.hor-bid-theme-signature #actionPanel.trump-showdown .trump-tile {
    border: 2px solid #f0c454 !important;
    border-radius: 0.25rem !important;
    clip-path: polygon(8% 0, 92% 0, 100% 16%, 100% 84%, 92% 100%, 8% 100%, 0 84%, 0 16%);
    box-shadow:
      inset 0 0 9px rgba(255, 220, 120, 0.15),
      0 0 7px rgba(229, 177, 52, 0.2) !important;
  }
}

/* Rook559 authoritative one-shot trump announcement: full size, bounce in, fade out,
   never persistent furniture. This final rule owns the live portrait stamp. */
@media (orientation: portrait) {
  .table-felt > #trumpBanner.trump-signature {
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    top: 36.7vh !important;
    bottom: auto !important;
    margin: 0 !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    z-index: 140500 !important;
  }
  .table-felt > #trumpBanner.trump-signature.trump-stamp-anim {
    animation: rook559TrumpBounceFade 1.55s cubic-bezier(0.18, 0.82, 0.24, 1) both !important;
  }
}
@keyframes rook559TrumpBounceFade {
  0% {
    transform: translate(-50%, calc(-50% - 38px)) scale(1);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, calc(-50% + 6px)) scale(1.07);
    opacity: 1;
  }
  31% {
    transform: translate(-50%, calc(-50% - 3px)) scale(0.985);
    opacity: 1;
  }
  42%,
  76% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ===== Rook559: live trump-selector ownership ===== */
@media (orientation: portrait) {
  #actionPanel.trump-showdown .trump-selector-note {
    margin-top: 0.42rem !important;
    color: #d9c79b !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    letter-spacing: 0.015em !important;
    opacity: 0.9 !important;
  }
}

/* ===== Rook561 approved visual roll ===== */
/* Premium Raven cards are default; original cards remain selectable. */
html:not(.hor-original-cards) .card-face:not(.rook):not(.red2-art) {
  border: 2px solid #c99a2e !important;
  border-radius: 7px !important;
  background: linear-gradient(155deg, #17140e, #080908 70%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 130, 0.28),
    inset 0 0 14px rgba(0, 0, 0, 0.62),
    0 2px 5px rgba(0, 0, 0, 0.45) !important;
}
html:not(.hor-original-cards) .card-face.green {
  background: linear-gradient(155deg, #064727, #012315 74%) !important;
}
html:not(.hor-original-cards) .card-face.red {
  background: linear-gradient(155deg, #76130f, #260605 74%) !important;
}
html:not(.hor-original-cards) .card-face.yellow {
  background: linear-gradient(155deg, #d6a735, #6f4607 74%) !important;
}
html:not(.hor-original-cards) .card-face.black {
  background: linear-gradient(155deg, #191919, #030303 74%) !important;
}
html:not(.hor-original-cards) .card-face .c-num {
  color: #ffe7a0 !important;
  text-shadow:
    0 1px 2px #000,
    0 0 5px rgba(255, 194, 49, 0.28);
  font-family: Georgia, serif;
  font-weight: 900;
}
html:not(.hor-original-cards) .card-face .c-color {
  color: #e4b84e !important;
  text-transform: uppercase;
  font-family: Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}
html:not(.hor-original-cards) .card-face .c-bar {
  background: linear-gradient(90deg, transparent, #d6a83e, transparent) !important;
  height: 2px !important;
}
html:not(.hor-original-cards) .premium-raven {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
html:not(.hor-original-cards) .premium-raven img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 5px !important;
}

/* Six complete hand skins: base ownership first, then theme personality. */

body[class*='hor-bid-theme-'] #actionPanel.trump-showdown {
  background: linear-gradient(165deg, rgba(17, 17, 14, 0.98), rgba(4, 8, 7, 0.98)) !important;
  color: #f8e8b4 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62) !important;
}
body[class*='hor-bid-theme-'] #actionPanel.trump-showdown h3 {
  font-family: Georgia, serif !important;
  color: #ffe39a !important;
  letter-spacing: 0.055em !important;
  text-shadow: 0 1px 2px #000 !important;
}

/* Seven approved Trump Stamp motions, deliberately longer/readable (~1.9s). */
#trumpBanner.trump-stamp-anim,
#ltTrumpStamp.trump-stamp-anim {
  animation-duration: 1.9s !important;
  animation-fill-mode: both !important;
}
.trump-fx-hard.trump-stamp-anim {
  animation: horTrumpHard 1.9s cubic-bezier(0.2, 0.85, 0.25, 1) both !important;
}
.trump-fx-flash.trump-stamp-anim {
  animation: horTrumpFlash 1.9s ease-out both !important;
}
.trump-fx-spin.trump-stamp-anim {
  animation: horTrumpSpin 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}
.trump-fx-punch.trump-stamp-anim {
  animation: horTrumpPunch 1.9s cubic-bezier(0.2, 0.9, 0.25, 1) both !important;
}
.trump-fx-slide.trump-stamp-anim {
  animation: horTrumpSlide 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}
.trump-fx-crest.trump-stamp-anim {
  animation: horTrumpCrest 1.9s ease-out both !important;
}
.trump-fx-bounce.trump-stamp-anim {
  animation: horTrumpBounce 1.9s cubic-bezier(0.18, 0.9, 0.25, 1.2) both !important;
}
@keyframes horTrumpHard {
  0% {
    opacity: 0;
    transform: translate(-50%, -105%) scale(1.18);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.94);
  }
  23% {
    transform: translate(-50%, -53%) scale(1.04);
  }
  31%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes horTrumpFlash {
  0% {
    opacity: 0;
    filter: brightness(3);
    transform: translate(-50%, -50%) scale(0.72);
  }
  18% {
    opacity: 1;
    filter: brightness(1.8);
    transform: translate(-50%, -50%) scale(1.06);
  }
  32%,
  72% {
    opacity: 1;
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    filter: brightness(0.8);
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes horTrumpSpin {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-32deg) scale(0.55);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(4deg) scale(1.06);
  }
  34%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes horTrumpPunch {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
  30%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes horTrumpSlide {
  0% {
    opacity: 0;
    transform: translate(-125%, -50%) rotate(-8deg);
  }
  24% {
    opacity: 1;
    transform: translate(-46%, -50%) rotate(2deg);
  }
  34%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}
@keyframes horTrumpCrest {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 25px #ffd45a);
    transform: translate(-50%, -50%) scale(0.45);
  }
  25% {
    opacity: 1;
    filter: drop-shadow(0 0 18px #ffd45a);
    transform: translate(-50%, -50%) scale(1.08);
  }
  38%,
  72% {
    opacity: 1;
    filter: drop-shadow(0 0 6px #d9a72e);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    filter: none;
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes horTrumpBounce {
  0% {
    opacity: 0;
    transform: translate(-50%, -92%) scale(0.72);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -43%) scale(1.12);
  }
  28% {
    transform: translate(-50%, -55%) scale(0.96);
  }
  38%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

/* Special capture popups: restore a premium contained box; rim follows current hand theme. */
.capture-overlay {
  background: rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(1.5px);
}
.capture-card {
  border: 2px solid #cfa43b !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(22, 25, 20, 0.98), rgba(8, 10, 9, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 228, 145, 0.18),
    0 12px 38px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(205, 157, 43, 0.18) !important;
}
body.hor-bid-theme-royal .capture-card,
body.hor-bid-theme-signature .capture-card {
  border-width: 3px !important;
  clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 91%, 96% 100%, 4% 100%, 0 91%, 0 9%);
}
body.hor-bid-theme-modern .capture-card {
  border-radius: 24px !important;
  border-width: 1px !important;
}
body.hor-bid-theme-coin .capture-card {
  border: 4px double #c99a32 !important;
}
body.hor-bid-theme-low .capture-card {
  border-width: 1px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}
.capture-sub {
  color: #f4dfad !important;
}

/* Generic scoreboard chrome — scoped away from the approved board. */
#scoreModal.showing-remaining .modal-content {
  border: 3px solid #d1a43b !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, #111713, #050706) !important;
  box-shadow:
    inset 0 0 0 2px #171717,
    inset 0 0 0 4px rgba(213, 169, 61, 0.3),
    0 18px 55px #000 !important;
}
#scoreModal.showing-remaining #scoreModalTitle {
  font-family: Georgia, serif !important;
  font-size: clamp(1.65rem, 7vw, 2.55rem) !important;
  color: #ffe8a1 !important;
  text-shadow: 0 2px 3px #000 !important;
}
.hor-themed-scoreboard {
  padding: 0.55rem;
  border: 1px solid #b88b2e;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 20%, #0a4b31 0, #05261a 48%, #07100d 100%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.72);
}
.hor-themed-scoreboard .score-banner {
  border: 1px solid #cba23c;
  border-radius: 7px;
  background: linear-gradient(90deg, #0d5b34, #177846, #0d5b34) !important;
  color: #fff1b3 !important;
  font-family: Georgia, serif !important;
  font-size: 1.08rem !important;
}
.hor-themed-scoreboard .scoreboard-team {
  border: 2px solid #bd8e2f !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, #102c20, #080b09) !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45) !important;
}
.hor-themed-scoreboard .sb-total {
  color: #ffe082 !important;
  font-family: Georgia, serif !important;
  text-shadow: 0 1px 2px #000;
}
.hor-themed-scoreboard .scoreboard-vs,
.hor-themed-scoreboard .scoreboard-goal,
.hor-themed-scoreboard .scoreboard-nest-final-title {
  color: #e5bd5b !important;
  font-family: Georgia, serif !important;
}
.hor-themed-scoreboard .scoreboard-nest-final,
.hor-themed-scoreboard .scoreboard-detail {
  border: 1px solid #a97c27 !important;
  border-radius: 10px !important;
  background: rgba(4, 8, 6, 0.78) !important;
}
#scoreModal .btn {
  border: 2px solid #c69a38 !important;
  border-radius: 12px !important;
  background: linear-gradient(#173c6a, #071a35) !important;
  color: #ffe7a0 !important;
  font-family: Georgia, serif !important;
  font-weight: 800 !important;
}
#scoreModal .btn.primary {
  background: linear-gradient(#d8aa43, #80520f) !important;
  color: #1a1003 !important;
}

/* Approved discard-screen treatment. Logic/selection behavior unchanged. */
#discardOverlay .discard-sheet {
  border: 2px solid #cda03a !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, #0b261a, #050806) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 221, 126, 0.16),
    0 16px 42px rgba(0, 0, 0, 0.65) !important;
  padding: 0.65rem !important;
}
#discardOverlay .discard-title {
  font-family: Georgia, serif !important;
  color: #ffe8a5 !important;
  text-shadow: 0 2px 3px #000 !important;
}
#discardOverlay .discard-sub {
  color: #f0cf75 !important;
  font-weight: 800 !important;
}
#discardOverlay .discard-color-row {
  border: 1px solid #a97d28 !important;
  border-radius: 12px !important;
  padding: 0.38rem !important;
  background: rgba(5, 8, 6, 0.78) !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48) !important;
}
#discardOverlay .discard-color-green {
  background: linear-gradient(100deg, rgba(4, 71, 39, 0.9), rgba(5, 8, 6, 0.8)) !important;
}
#discardOverlay .discard-color-red {
  background: linear-gradient(100deg, rgba(100, 15, 12, 0.9), rgba(5, 8, 6, 0.8)) !important;
}
#discardOverlay .discard-color-yellow {
  background: linear-gradient(100deg, rgba(112, 75, 8, 0.9), rgba(5, 8, 6, 0.8)) !important;
}
#discardOverlay .discard-color-black {
  background: linear-gradient(100deg, rgba(24, 24, 24, 0.96), rgba(3, 4, 4, 0.9)) !important;
}
#discardOverlay .discard-color-label {
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
  color: #ffe8a5 !important;
  letter-spacing: 0.04em !important;
}
#discardOverlay .discard-actions .btn,
#discardOverlay #confirmDiscardBtn {
  border: 2px solid #d0a33a !important;
  border-radius: 12px !important;
  background: linear-gradient(#176238, #08341e) !important;
  color: #fff0b0 !important;
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 150, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ===== Rook562 working-screen correction =====
   Final visual authority for premium cards and the six bidding skins. */
@media (orientation: portrait) {
  /* The bottom bid badge belongs to the bottom seat, not the table center. */
  #slot-me > .bid-badge.bid-value-badge,
  #slot-me > .bid-badge.bid-pass {
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(100% + 0.42rem) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* One complete owner for the center bidding component. */
}

/* Premium deck: full color is the card identity. Do not inherit the pale original face. */
html:not(.hor-original-cards) .card-face.green,
html:not(.hor-original-cards) .card-face.red,
html:not(.hor-original-cards) .card-face.yellow,
html:not(.hor-original-cards) .card-face.black {
  border: 2px solid #e0b64f !important;
  border-radius: 7px !important;
  color: #ffe7a0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 180, 0.28),
    inset 0 0 12px rgba(0, 0, 0, 0.34),
    0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
html:not(.hor-original-cards) .card-face.green {
  background: linear-gradient(150deg, #087a43 0%, #03562f 48%, #012b19 100%) !important;
}
html:not(.hor-original-cards) .card-face.red {
  background: linear-gradient(150deg, #c32620 0%, #8c1714 48%, #420807 100%) !important;
}
html:not(.hor-original-cards) .card-face.yellow {
  background: linear-gradient(150deg, #f0c95a 0%, #c18b1c 52%, #76500a 100%) !important;
}
html:not(.hor-original-cards) .card-face.black {
  background: linear-gradient(150deg, #343434 0%, #171717 52%, #030303 100%) !important;
}
html:not(.hor-original-cards) .card-face.green .c-num,
html:not(.hor-original-cards) .card-face.red .c-num,
html:not(.hor-original-cards) .card-face.black .c-num {
  color: #ffe6a0 !important;
  text-shadow:
    0 2px 2px #000,
    0 0 4px rgba(255, 207, 91, 0.35) !important;
}
html:not(.hor-original-cards) .card-face.yellow .c-num {
  color: #251503 !important;
  text-shadow: 0 1px 0 rgba(255, 244, 187, 0.55) !important;
}
html:not(.hor-original-cards) .card-face.green .c-color,
html:not(.hor-original-cards) .card-face.red .c-color,
html:not(.hor-original-cards) .card-face.black .c-color {
  color: #fff0bd !important;
  opacity: 1 !important;
}
html:not(.hor-original-cards) .card-face.yellow .c-color {
  color: #2c1902 !important;
  opacity: 1 !important;
}
html:not(.hor-original-cards) .card-face .c-num {
  font-family: Georgia, serif !important;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
}
html:not(.hor-original-cards) .card-face .c-color {
  font-family: Georgia, serif !important;
  font-size: 0.5rem !important;
  font-weight: 900 !important;
}

/* ===== Rook563: authoritative Premium Raven card renderer =====
   One visual owner across hand, trick, nest, discard and revealed cards. */
html:not(.hor-original-cards) body .card-face.green:not(.back),
html:not(.hor-original-cards) body #myHand .card-face.green,
html:not(.hor-original-cards) body .lt-hand .card-face.green {
  background-color: #056a3b !important;
  background-image: linear-gradient(145deg, #0b9854 0%, #056a3b 48%, #01341e 100%) !important;
}
html:not(.hor-original-cards) body .card-face.red:not(.back),
html:not(.hor-original-cards) body #myHand .card-face.red,
html:not(.hor-original-cards) body .lt-hand .card-face.red {
  background-color: #a51d18 !important;
  background-image: linear-gradient(145deg, #e0352e 0%, #a51d18 48%, #510a08 100%) !important;
}
html:not(.hor-original-cards) body .card-face.yellow:not(.back),
html:not(.hor-original-cards) body #myHand .card-face.yellow,
html:not(.hor-original-cards) body .lt-hand .card-face.yellow {
  background-color: #d8a52d !important;
  background-image: linear-gradient(145deg, #ffe26d 0%, #d8a52d 50%, #8b5d0b 100%) !important;
}
html:not(.hor-original-cards) body .card-face.black:not(.back),
html:not(.hor-original-cards) body #myHand .card-face.black,
html:not(.hor-original-cards) body .lt-hand .card-face.black {
  background-color: #1c1c1c !important;
  background-image: linear-gradient(145deg, #454545 0%, #1c1c1c 50%, #030303 100%) !important;
}
html:not(.hor-original-cards) body .card-face.green:not(.back),
html:not(.hor-original-cards) body .card-face.red:not(.back),
html:not(.hor-original-cards) body .card-face.yellow:not(.back),
html:not(.hor-original-cards) body .card-face.black:not(.back) {
  border: 2px solid #e8bd50 !important;
  color: #fff0b5 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 197, 0.34),
    inset 0 0 16px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.55) !important;
}
html:not(.hor-original-cards) body .card-face.green .c-num,
html:not(.hor-original-cards) body .card-face.red .c-num,
html:not(.hor-original-cards) body .card-face.black .c-num {
  color: #fff1b6 !important;
}
html:not(.hor-original-cards) body .card-face.yellow .c-num {
  color: #241500 !important;
  text-shadow: 0 1px rgba(255, 255, 220, 0.55) !important;
}
html:not(.hor-original-cards) body .card-face.green .c-color,
html:not(.hor-original-cards) body .card-face.red .c-color,
html:not(.hor-original-cards) body .card-face.black .c-color {
  color: #fff3c7 !important;
  opacity: 1 !important;
}
html:not(.hor-original-cards) body .card-face.yellow .c-color {
  color: #2b1900 !important;
  opacity: 1 !important;
}
html:not(.hor-original-cards) body .card-face.rook .rook-bird-img,
html:not(.hor-original-cards) body .card-face.red2-art .red2-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ===== Rook564 blocking visual corrections =====
   Preserve the successful four-color Premium Raven faces. Refine typography only. */
html:not(.hor-original-cards) body .card-face:not(.back) .c-num {
  font-family: Georgia, serif !important;
  font-size: 1.55rem !important;
  line-height: 0.94 !important;
  font-weight: 900 !important;
  color: #fff0b5 !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.88),
    0 0 3px rgba(255, 207, 91, 0.22) !important;
}
html:not(.hor-original-cards) body .card-face:not(.back) .c-color {
  font-family: Georgia, serif !important;
  font-size: 0.34rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
  color: #fff0b5 !important;
  opacity: 0.86 !important;
}
/* Yellow uses the same number/label ink as every other regular card. */
html:not(.hor-original-cards) body .card-face.yellow:not(.back) .c-num,
html:not(.hor-original-cards) body .card-face.yellow:not(.back) .c-color {
  color: #fff0b5 !important;
}

/* ===== Rook565 STABILIZATION AUTHORITY =====
   Final visual gate. Behavior remains in game.js; these rules own only presentation. */
#horThemeDiagnostic {
  position: fixed;
  left: 50%;
  top: max(3px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 100000;
  padding: 3px 7px;
  border: 1px solid #d6ad49;
  border-radius: 5px;
  background: rgba(4, 7, 6, 0.92);
  color: #ffe59b;
  font:
    700 9px/1.2 system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* Bottom human marker: seat-relative only. Never table-center/fixed positioning. */
@media (orientation: portrait) {
  #slot-me {
    position: absolute !important;
  }
  #slot-me > .bid-badge.bid-value-badge,
  #slot-me > .bid-badge.bid-pass {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 0.42rem) !important;
    transform: translateX(-50%) !important;
    translate: none !important;
    margin: 0 !important;
    z-index: 90 !important;
  }
}
/* Premium deck typography refinement: color lives on the FACE; all regular numerals match. */
html:not(.hor-original-cards) body .card-face.green:not(.back),
html:not(.hor-original-cards) body .card-face.red:not(.back),
html:not(.hor-original-cards) body .card-face.yellow:not(.back),
html:not(.hor-original-cards) body .card-face.black:not(.back) {
  border-color: #d8ad48 !important;
}
html:not(.hor-original-cards) body .card-face.green .c-num,
html:not(.hor-original-cards) body .card-face.red .c-num,
html:not(.hor-original-cards) body .card-face.yellow .c-num,
html:not(.hor-original-cards) body .card-face.black .c-num {
  color: #fff0bd !important;
  font-size: 1.52rem !important;
  line-height: 0.95 !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.82),
    0 0 3px rgba(255, 213, 116, 0.25) !important;
}
html:not(.hor-original-cards) body .card-face.green .c-color,
html:not(.hor-original-cards) body .card-face.red .c-color,
html:not(.hor-original-cards) body .card-face.yellow .c-color,
html:not(.hor-original-cards) body .card-face.black .c-color {
  color: #fff0bd !important;
  font-size: 0.36rem !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  opacity: 0.9 !important;
}
/* Nest/kitty uses the same card dimensions/proportions as live play cards. */
.discard-sheet-kitty-only .kitty-cards,
.discard-kitty .kitty-cards {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.28rem !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  padding: 0.45rem 0.3rem !important;
}
.discard-sheet-kitty-only .kitty-flash-card,
.discard-sheet-kitty-only .kitty-cards .card-face,
.discard-kitty .kitty-flash-card,
.discard-kitty .kitty-cards .card-face {
  width: var(--card-w, 58px) !important;
  height: var(--card-h, 82px) !important;
  min-width: var(--card-w, 58px) !important;
  transform: none !important;
  margin: 0 !important;
}
.discard-sheet-kitty-only .discard-kitty,
.discard-kitty {
  border: 2px solid #cda33f !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(14, 27, 20, 0.98), rgba(4, 9, 7, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 228, 145, 0.12),
    0 12px 34px rgba(0, 0, 0, 0.58) !important;
  padding: 0.7rem !important;
}
.discard-kitty.kitty-flashing {
  animation: rook565NestReveal 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card {
  animation: rook565NestCard 0.48s cubic-bezier(0.2, 0.9, 0.25, 1) both !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card:nth-child(2) {
  animation-delay: 0.06s !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card:nth-child(3) {
  animation-delay: 0.12s !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card:nth-child(4) {
  animation-delay: 0.18s !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card:nth-child(5) {
  animation-delay: 0.24s !important;
}
.discard-kitty.kitty-flashing .kitty-flash-card:nth-child(6) {
  animation-delay: 0.3s !important;
}
@keyframes rook565NestReveal {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rook565NestCard {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Special captures: one themed premium shell, never the old brown popup. */
.capture-overlay .capture-card {
  border: 2px solid #d6aa42 !important;
  border-radius: 14px !important;
  background: radial-gradient(
    circle at 50% 0,
    rgba(48, 38, 18, 0.98),
    rgba(7, 12, 9, 0.99) 66%
  ) !important;
  color: #fff0bd !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 153, 0.18),
    0 14px 40px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(213, 163, 48, 0.18) !important;
}
body.hor-bid-theme-royal .capture-overlay .capture-card,
body.hor-bid-theme-signature .capture-overlay .capture-card {
  border: 3px double #e5bd55 !important;
}
body.hor-bid-theme-modern .capture-overlay .capture-card {
  border-width: 1px !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, #111b20, #060a0b) !important;
}
body.hor-bid-theme-coin .capture-overlay .capture-card {
  border: 4px double #c99935 !important;
}
body.hor-bid-theme-low .capture-overlay .capture-card {
  border-width: 1px !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important;
}

/* ===== Rook566 presentation-system stabilization ===== */
/* Diagnostic console: compact when closed, touch-friendly when open. */
#horThemeDiagnostic {
  position: fixed !important;
  left: 50% !important;
  top: max(3px, env(safe-area-inset-top)) !important;
  transform: translateX(-50%) !important;
  z-index: 2147482000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 5px !important;
  pointer-events: auto !important;
  background: rgba(3, 7, 6, 0.94) !important;
  border: 1px solid #d6ad49 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
  color: #ffe59b !important;
  font:
    700 8px/1.15 system-ui,
    sans-serif !important;
  white-space: nowrap !important;
}
#horThemeDiagnostic button {
  min-height: 20px !important;
  padding: 2px 5px !important;
  border: 1px solid #b68b2d !important;
  border-radius: 5px !important;
  background: #17130b !important;
  color: #ffe7a0 !important;
  font:
    800 8px/1 system-ui,
    sans-serif !important;
}
#horDiagControls {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 4px) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid #c89b38 !important;
  border-radius: 8px !important;
  background: rgba(3, 7, 6, 0.97) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
}
#horDiagControls.hidden {
  display: none !important;
}
.hor-diagnostic-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147481900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 38px 12px 12px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  pointer-events: auto !important;
}
.hor-diagnostic-preview.hidden {
  display: none !important;
}
.hor-diag-preview-card {
  position: relative !important;
  width: min(94vw, 420px) !important;
  max-height: 82vh !important;
  overflow: auto !important;
  padding: 18px 12px 14px !important;
  border: 2px solid #d8ad48 !important;
  border-radius: 14px !important;
  background: linear-gradient(155deg, #14241d, #050908) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 231, 150, 0.12) !important;
  color: #fff0bd !important;
}
.hor-diag-close {
  position: absolute !important;
  right: 7px !important;
  top: 6px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #c99b37 !important;
  background: #1b120b !important;
  color: #ffe7a0 !important;
  font-size: 18px !important;
}
.hor-diag-preview-label {
  text-align: center !important;
  font: 800 9px/1 system-ui !important;
  letter-spacing: 0.09em !important;
  color: #d9b557 !important;
  margin-bottom: 10px !important;
}
/* Shared preview shell follows the exact current six-theme body class. */
.hor-preview-bid,
.hor-preview-trump,
.hor-preview-popup,
.hor-preview-nest,
.hor-preview-discard,
.hor-preview-score,
.hor-preview-pills,
.hor-preview-cardtest,
.hor-preview-fx {
  border: 2px solid #d5a743 !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, #18150f, #070908) !important;
  padding: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 146, 0.12) !important;
  text-align: center !important;
}
body.hor-bid-theme-royal .hor-diag-preview-card {
  border: 4px double #e4ba50 !important;
  clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%);
}
body.hor-bid-theme-modern .hor-diag-preview-card {
  border-width: 1px !important;
  border-radius: 24px !important;
  background: linear-gradient(155deg, #111c22, #05090b) !important;
}
body.hor-bid-theme-coin .hor-diag-preview-card {
  border: 5px double #c99a34 !important;
  background: radial-gradient(circle at 50% 10%, #49331a, #090806 70%) !important;
}
body.hor-bid-theme-low .hor-diag-preview-card {
  border-width: 1px !important;
  border-radius: 9px !important;
  background: rgba(5, 9, 8, 0.96) !important;
}
body.hor-bid-theme-signature .hor-diag-preview-card {
  border: 2px solid #f0c34d !important;
  clip-path: polygon(5% 0, 95% 0, 100% 7%, 100% 93%, 95% 100%, 5% 100%, 0 93%, 0 7%);
  box-shadow:
    0 0 20px rgba(226, 173, 42, 0.22),
    0 18px 48px rgba(0, 0, 0, 0.72) !important;
}
.hor-preview-bid .bid-stepper,
.hor-preview-bid .bid-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 7px 0 !important;
}
.hor-preview-bid button,
.hor-preview-discard button {
  border: 1px solid #d2a341 !important;
  border-radius: 7px !important;
  background: #24180d !important;
  color: #ffe9aa !important;
  padding: 7px 12px !important;
  font-weight: 800 !important;
}
.hor-preview-bid .primary,
.hor-preview-discard button {
  background: linear-gradient(#f2cb68, #a56b19) !important;
  color: #1a1004 !important;
}
.hor-preview-bid b {
  font:
    900 25px/1 Georgia,
    serif !important;
  color: #ffe08a !important;
}
.hor-preview-trump h3,
.hor-preview-nest h3,
.hor-preview-discard h3,
.hor-preview-score h3,
.hor-preview-cardtest h3 {
  font:
    900 16px/1 Georgia,
    serif !important;
  letter-spacing: 0.06em !important;
  color: #ffe39a !important;
  margin: 2px 0 10px !important;
}
.hor-preview-trump .trump-showdown-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.hor-preview-trump .trump-tile {
  min-height: 48px !important;
  border: 2px solid #d8ad48 !important;
  border-radius: 9px !important;
  color: white !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px #000 !important;
}
.hor-preview-trump .green {
  background: #086a3c !important;
}
.hor-preview-trump .red {
  background: #a51d18 !important;
}
.hor-preview-trump .yellow {
  background: #c18b1c !important;
}
.hor-preview-trump .black {
  background: #151515 !important;
}
body.hor-bid-theme-royal .hor-preview-trump .trump-tile {
  border: 3px double #f0c457 !important;
  clip-path: polygon(10% 0, 90% 0, 100% 18%, 100% 82%, 90% 100%, 10% 100%, 0 82%, 0 18%);
}
body.hor-bid-theme-modern .hor-preview-trump .trump-tile {
  border-width: 1px !important;
  border-radius: 18px !important;
}
body.hor-bid-theme-coin .hor-preview-trump .trump-tile {
  border: 4px double #c99a34 !important;
  border-radius: 50% !important;
  aspect-ratio: 1.7 !important;
}
body.hor-bid-theme-low .hor-preview-trump .trump-tile {
  border-width: 1px !important;
  border-radius: 999px !important;
  min-height: 38px !important;
}
body.hor-bid-theme-signature .hor-preview-trump .trump-tile {
  clip-path: polygon(8% 0, 92% 0, 100% 20%, 100% 80%, 92% 100%, 8% 100%, 0 80%, 0 20%);
  box-shadow: 0 0 10px rgba(231, 181, 48, 0.25) !important;
}
.hor-preview-popup strong {
  display: block !important;
  font:
    900 27px/1 Georgia,
    serif !important;
  color: #ffe29a !important;
  margin: 8px 0 !important;
}
.hor-preview-popup span,
.hor-preview-popup small {
  display: block !important;
}
.hor-preview-cards {
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.hor-diag-card {
  position: relative !important;
  width: 58px !important;
  height: 84px !important;
  flex: 0 0 58px !important;
}
.hor-preview-nest p {
  font-size: 10px !important;
  color: #d9c58f !important;
}
.hor-preview-discard .selected {
  transform: translateY(-7px) !important;
  box-shadow:
    0 0 0 2px #fff0a4,
    0 7px 14px #000 !important;
}
.hor-score-banner {
  margin: 7px auto !important;
  width: max-content !important;
  padding: 4px 14px !important;
  border: 1px solid #d7aa43 !important;
  border-radius: 999px !important;
  color: #ffe392 !important;
  font-weight: 900 !important;
}
.hor-score-teams {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 12px 0 !important;
}
.hor-score-teams b {
  padding: 8px !important;
  border: 1px solid #b68d35 !important;
  border-radius: 8px !important;
}
.hor-preview-pills {
  position: relative !important;
  height: 210px !important;
}
.hor-preview-pills .pill {
  position: absolute !important;
  padding: 4px 9px !important;
  border: 2px solid #d7aa43 !important;
  border-radius: 999px !important;
  background: #171109 !important;
  color: #ffe39a !important;
  font-weight: 900 !important;
}
.hor-preview-pills .top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.hor-preview-pills .bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.hor-preview-pills .left {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.hor-preview-pills .right {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.hor-preview-fx {
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.hor-preview-fx b {
  font-size: 13px !important;
}
.hor-preview-fx strong {
  font:
    900 28px/1 Georgia,
    serif !important;
  color: #ffe08b !important;
}
.hor-cardtest-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 5px !important;
}
.hor-cardtest-row > span {
  width: 48px !important;
  text-align: right !important;
  font: 800 9px/1 system-ui !important;
  color: #d7b45b !important;
}
.hor-cardtest-row .card-face {
  width: 48px !important;
  height: 70px !important;
  flex: 0 0 48px !important;
}
.hor-played-sample .card-face {
  width: 70px !important;
  height: 101px !important;
  flex-basis: 70px !important;
}
.hor-played-sample .c-num {
  font-size: 2rem !important;
}
/* Played/trick cards get readable showcase typography; packed hand cards stay compact. */
html:not(.hor-original-cards) body #trickArea .card-face:not(.back) .c-num,
html:not(.hor-original-cards) body .trick .card-face:not(.back) .c-num {
  font-size: 2.05rem !important;
  line-height: 0.92 !important;
}
html:not(.hor-original-cards) body #trickArea .card-face:not(.back) .c-color,
html:not(.hor-original-cards) body .trick .card-face:not(.back) .c-color {
  font-size: 0.48rem !important;
  letter-spacing: 0.06em !important;
}
/* Progressive craftsmanship: more gold engraving becomes visible as the hand opens. */
html:not(.hor-original-cards) body #myHand[data-hand-count='7'] .card-face,
html:not(.hor-original-cards) body #myHand[data-hand-count='6'] .card-face,
html:not(.hor-original-cards) body #myHand[data-hand-count='5'] .card-face,
.hor-orn-level-1 {
  background-image: linear-gradient(
    135deg,
    rgba(255, 221, 124, 0.16) 0 2px,
    transparent 2px 12px
  ) !important;
  background-size: 14px 14px !important;
}
html:not(.hor-original-cards) body #myHand[data-hand-count='4'] .card-face,
html:not(.hor-original-cards) body #myHand[data-hand-count='3'] .card-face,
.hor-orn-level-2 {
  background-image:
    linear-gradient(135deg, rgba(255, 224, 132, 0.22) 0 2px, transparent 2px 10px),
    linear-gradient(225deg, rgba(255, 224, 132, 0.16) 0 2px, transparent 2px 12px) !important;
  background-size: 14px 14px !important;
}
html:not(.hor-original-cards) body #myHand[data-hand-count='2'] .card-face,
.hor-orn-level-3 {
  outline: 1px solid rgba(255, 226, 135, 0.32) !important;
  outline-offset: -5px !important;
}
html:not(.hor-original-cards) body #myHand[data-hand-count='1'] .card-face,
html:not(.hor-original-cards) body #trickArea .card-face:not(.back),
.hor-orn-level-4 {
  outline: 1px solid rgba(255, 229, 145, 0.42) !important;
  outline-offset: -5px !important;
  background-image:
    linear-gradient(135deg, rgba(255, 225, 127, 0.2) 0 2px, transparent 2px 10px),
    linear-gradient(225deg, rgba(255, 225, 127, 0.16) 0 2px, transparent 2px 10px),
    linear-gradient(45deg, rgba(255, 225, 127, 0.13) 0 2px, transparent 2px 10px) !important;
  background-size: 14px 14px !important;
}
/* Bottom human: one bid pill only; retire the redundant lead badge on that seat. */
#slot-me > :scope.seat-lead-tag,
#slot-me > .seat-lead-tag {
  display: none !important;
}
/* Thinking status belongs to the active opponent seat, not the trick center. JS supplies seat-relative screen coordinates. */
:is(#botThinking, .auction-status).bot-thinking {
  position: absolute !important;
  bottom: auto !important;
  max-width: 11.5rem !important;
  font-size: 0.54rem !important;
  padding: 0.12rem 0.42rem !important;
  z-index: 125 !important;
}
/* Actual Stamp-the-Trump selector: make all six themes unmistakably distinct. */
body.hor-bid-theme-classic #actionPanel.trump-showdown {
  border: 2px solid #d7aa43 !important;
  background: linear-gradient(155deg, #24180c, #080806) !important;
}
body.hor-bid-theme-royal #actionPanel.trump-showdown {
  border: 4px double #e8bd54 !important;
  clip-path: polygon(5% 0, 95% 0, 100% 9%, 100% 91%, 95% 100%, 5% 100%, 0 91%, 0 9%) !important;
  background: radial-gradient(circle at 50% 0, #3b2812, #080806 72%) !important;
}
body.hor-bid-theme-modern #actionPanel.trump-showdown {
  border: 1px solid #cdb56f !important;
  border-radius: 24px !important;
  background: linear-gradient(155deg, #14212a, #070b0d) !important;
}
body.hor-bid-theme-coin #actionPanel.trump-showdown {
  border: 5px double #c79532 !important;
  background: radial-gradient(circle, #4a3218, #100c08 70%) !important;
}
body.hor-bid-theme-low #actionPanel.trump-showdown {
  border: 1px solid #a78538 !important;
  border-radius: 12px !important;
  background: rgba(5, 9, 8, 0.96) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}
body.hor-bid-theme-signature #actionPanel.trump-showdown {
  border: 2px solid #f0c34d !important;
  clip-path: polygon(6% 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%, 0 12%) !important;
  background: linear-gradient(155deg, #2b170c, #060706) !important;
  box-shadow:
    0 0 18px rgba(226, 173, 42, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.62) !important;
}
/* Rook566 final card-size correction after full cascade audit. */
.discard-sheet-kitty-only .kitty-flash-card,
.discard-sheet-kitty-only .kitty-cards .card-face,
.discard-kitty .kitty-flash-card,
.discard-kitty .kitty-cards .card-face {
  width: 74px !important;
  height: 106px !important;
  min-width: 74px !important;
  flex: 0 0 74px !important;
}
html:not(.hor-original-cards) body .trick-stack .trick-card-wrap .card-face:not(.back) .c-num,
html:not(.hor-original-cards) body .trick-scatter .trick-card-wrap .card-face:not(.back) .c-num {
  font-size: 3rem !important;
}
html:not(.hor-original-cards) body .trick-stack .trick-card-wrap .card-face:not(.back) .c-color,
html:not(.hor-original-cards) body .trick-scatter .trick-card-wrap .card-face:not(.back) .c-color {
  font-size: 0.62rem !important;
}
@media (max-height: 700px) {
  .discard-sheet-kitty-only .kitty-flash-card,
  .discard-sheet-kitty-only .kitty-cards .card-face,
  .discard-kitty .kitty-flash-card,
  .discard-kitty .kitty-cards .card-face {
    width: 62px !important;
    height: 88px !important;
    min-width: 62px !important;
    flex-basis: 62px !important;
  }
  html:not(.hor-original-cards) body .trick-stack .trick-card-wrap .card-face:not(.back) .c-num,
  html:not(.hor-original-cards) body .trick-scatter .trick-card-wrap .card-face:not(.back) .c-num {
    font-size: 2.55rem !important;
  }
}
#botThinking.bot-thi
/* =====================================================================
   ROOK575 — SINGLE AUTHORITATIVE APPROVED SCOREBOARD
   Ownership: #scoreModal:not(.showing-remaining) + .gh-approved-scoreboard
   Show Remaining keeps its own #scoreModal.showing-remaining rules above.
   Do not stack later scoreboard generations after this block.
   ===================================================================== */
#scoreModal:not(.showing-remaining) {
  padding: 1vh 2vw !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.78) !important;
  overflow: hidden !important;
}
#scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(94vw, 420px) !important;
  max-width: 96vw !important;
  max-height: 97dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 58px 10px 10px !important;
  border: 2px solid #c9a24a !important;
  border-radius: 26px !important;
  color: #fff5d0 !important;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(28, 90, 58, 0.35), transparent 42%),
    linear-gradient(165deg, #0a0e0c 0%, #050706 55%, #020302 100%) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 220, 140, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.65),
    inset 0 0 0 6px #1a1408,
    inset 0 0 0 8px #b8892a,
    inset 0 0 28px rgba(0, 0, 0, 0.55) !important;
}
#scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 40px;
  background: url('assets/images/griffin-icon.png?v=631') center/contain no-repeat;
  filter: sepia(1) saturate(1.8) brightness(1.35) drop-shadow(0 2px 2px #000);
  z-index: 3;
  pointer-events: none;
}
#scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 74, 0.45);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.25);
}
#scoreModal:not(.showing-remaining) #scoreModalTitle {
  position: absolute !important;
  z-index: 2 !important;
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(78%, 340px) !important;
  margin: 0 !important;
  padding: 6px 18px 7px !important;
  box-sizing: border-box !important;
  border: 1px solid #c9a24a !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2a2214, #0a0806) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.25),
    inset 0 -3px 8px #000,
    0 3px 6px #000 !important;
  color: #ffe9a8 !important;
  font:
    700 clamp(1.2rem, 5.2vw, 1.85rem) / 1 Georgia,
    serif !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 2px 2px #000 !important;
  text-align: center !important;
}
#scoreModal:not(.showing-remaining) #scoreModalBody {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}
#scoreModal:not(.showing-remaining) .gh-approved-scoreboard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 8px 8px !important;
  border: 1px solid #8d6a22 !important;
  border-radius: 12px !important;
  background:
    radial-gradient(ellipse at 50% 0, rgba(18, 92, 58, 0.55), transparent 52%),
    linear-gradient(160deg, #064028, #032015 70%, #02140e) !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55) !important;
  color: #fff6d8 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}
#scoreModal:not(.showing-remaining) .ghsb-contract {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid #d4b056 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #0b7a46, #075c36 55%, #043f26) !important;
  color: #fff3b0 !important;
  font:
    700 clamp(1.05rem, 4.6vw, 1.5rem) / 1 Georgia,
    serif !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 2px 2px #002014 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 210, 0.2),
    inset 0 -6px 10px rgba(0, 0, 0, 0.28) !important;
}
#scoreModal:not(.showing-remaining) .set-hand .ghsb-contract,
#scoreModal:not(.showing-remaining) .ghsb-contract.banner-set {
  background: linear-gradient(180deg, #8e251f, #651813 55%, #3b0c09) !important;
}
.ghsb-contract-icon {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 4px;
  background: #14904d;
  border: 1px solid #78e49e;
  color: #fff;
  box-shadow: 0 2px 4px #001c0e;
  font-family: Arial, sans-serif;
  font-weight: 900;
}
.banner-set .ghsb-contract-icon {
  background: #9d211d;
  border-color: #ef7b72;
}
#scoreModal:not(.showing-remaining) .score-teach,
#scoreModal:not(.showing-remaining) .ghsb-result-line {
  display: block !important;
  margin: 1px 2px 2px !important;
  padding: 0 !important;
  color: #f3e6b8 !important;
  background: transparent !important;
  border: 0 !important;
  font:
    600 clamp(0.62rem, 2.5vw, 0.86rem) / 1.28 Georgia,
    serif !important;
  text-align: left !important;
}
#scoreModal:not(.showing-remaining) .ghsb-result-line + .score-teach {
  display: none !important;
}
.ghsb-matchup {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 6px !important;
}
#scoreModal:not(.showing-remaining) .ghsb-team {
  min-width: 0 !important;
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 4px !important;
  border: 2px solid #c9a24a !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(20, 84, 55, 0.45), transparent 58%),
    linear-gradient(155deg, #0a1610, #030403) !important;
  box-shadow:
    inset 0 0 0 1px #3a2a0c,
    inset 0 0 16px #000,
    0 3px 6px #000 !important;
}
.ghsb-team-icon {
  width: clamp(36px, 9vw, 58px) !important;
  height: clamp(46px, 12vw, 70px) !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 2px 3px #000) !important;
}
.ghsb-griffin {
  filter: sepia(1) saturate(2) brightness(1.18) drop-shadow(0 2px 3px #000) !important;
}
.ghsb-team-copy {
  min-width: 0;
  text-align: center;
}
#scoreModal:not(.showing-remaining) .ghsb-team .sb-label {
  color: #ffe79b !important;
  font:
    700 clamp(0.78rem, 3vw, 1.05rem) / 1 Georgia,
    serif !important;
  white-space: nowrap !important;
}
#scoreModal:not(.showing-remaining) .ghsb-team .sb-total {
  margin: 1px 0 !important;
  color: #ffe477 !important;
  font:
    700 clamp(1.9rem, 8vw, 3rem) / 0.86 Georgia,
    serif !important;
  text-shadow: 0 2px 3px #000 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-team-b .sb-total {
  color: #fff8e7 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-team .sb-delta {
  color: #efe0b0 !important;
  font:
    700 clamp(0.55rem, 2.1vw, 0.78rem) / 1.05 Georgia,
    serif !important;
  white-space: nowrap !important;
}
#scoreModal:not(.showing-remaining) .ghsb-vs {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  align-self: stretch !important;
}
#scoreModal:not(.showing-remaining) .ghsb-vs::before,
#scoreModal:not(.showing-remaining) .ghsb-vs::after,
#scoreModal:not(.showing-remaining) .ghsb-vs span::before,
#scoreModal:not(.showing-remaining) .ghsb-vs span::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
#scoreModal:not(.showing-remaining) .ghsb-vs span {
  z-index: 1;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 2px solid #c9a24a !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 35%, #1a3a28, #06120d 72%) !important;
  color: #e9c95d !important;
  font:
    800 0.72rem Georgia,
    serif !important;
  box-shadow:
    inset 0 0 0 2px #261b08,
    0 3px 5px #000 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-goal {
  align-self: center !important;
  min-width: 52% !important;
  margin: 0 auto !important;
  padding: 5px 22px !important;
  border: 1px solid #b8892a !important;
  border-radius: 4px !important;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%) !important;
  background: linear-gradient(180deg, #1a1c16, #070806) !important;
  color: #ffe6a0 !important;
  font:
    700 clamp(0.68rem, 2.5vw, 0.9rem) / 1.15 Georgia,
    serif !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 139, 0.12),
    inset 0 -4px 8px #000 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-nest {
  margin: 0 !important;
  padding: 0 8px 8px !important;
  border: 1px solid #a97b22 !important;
  border-radius: 8px !important;
  background: rgba(3, 6, 5, 0.78) !important;
  box-shadow: inset 0 0 14px #000 !important;
  text-align: center !important;
}
.ghsb-nest-title {
  display: inline-block !important;
  min-width: 68% !important;
  margin: 0 auto 6px !important;
  padding: 4px 16px !important;
  border: 1px solid #c99a31 !important;
  border-radius: 3px !important;
  background: linear-gradient(#20190d, #080704) !important;
  color: #ffe29a !important;
  font:
    700 clamp(0.64rem, 2.4vw, 0.88rem) / 1 Georgia,
    serif !important;
}
.ghsb-nest-cards {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
}
#scoreModal:not(.showing-remaining) .ghsb-nest-card {
  --ghsb-card: min(54px, calc((100% - 20px) / 6));
  width: var(--ghsb-card) !important;
  min-width: 0 !important;
  max-width: var(--ghsb-card) !important;
  height: calc(var(--ghsb-card) * 1.45) !important;
  flex: 0 0 var(--ghsb-card) !important;
  overflow: hidden !important;
  border: 1px solid #d0a23d !important;
  border-radius: 6px !important;
  background: #f5efd9 !important;
  box-shadow: 0 2px 5px #000 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-nest-card > * {
  max-width: 100% !important;
}
.ghsb-nest-empty {
  padding: 8px;
  color: #d9c79c;
  font-size: 0.7rem;
}
#scoreModal:not(.showing-remaining) .ghsb-details {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #8d6821 !important;
  border-radius: 6px !important;
  background: linear-gradient(145deg, #0a120e, #030403) !important;
  color: #fff7dc !important;
  font:
    600 clamp(0.6rem, 2.2vw, 0.82rem) / 1.25 Georgia,
    serif !important;
  text-align: left !important;
  box-shadow: inset 0 0 12px #000 !important;
}
#scoreModal:not(.showing-remaining) .ghsb-details b {
  color: #e8ca75 !important;
}
.ghsb-made-chip {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Arial, sans-serif;
  font-weight: 800;
}
.ghsb-made-chip.is-made {
  background: #0f8a48;
  color: #fff;
}
.ghsb-made-chip.is-set {
  background: #8f211d;
  color: #fff;
}
.ghsb-trump-red {
  color: #ff5c4d !important;
}
.ghsb-trump-green {
  color: #6ee69a !important;
}
.ghsb-trump-yellow {
  color: #ffe46d !important;
}
.ghsb-trump-black {
  color: #e8e8e8 !important;
}

/* Footer: 3-up default; 2x2 when Show Remaining is present */
#scoreModal:not(.showing-remaining) .score-modal-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.12fr !important;
  gap: 7px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
#scoreModal:not(.showing-remaining) .score-modal-actions.has-reveal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
}
#scoreModal:not(.showing-remaining) .score-modal-actions .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 6px 7px !important;
  grid-column: auto !important;
  border: 2px solid #c9a24a !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #124b86, #082e5d 55%, #031a39) !important;
  color: #ffe6a0 !important;
  font:
    700 clamp(0.58rem, 2.2vw, 0.82rem) / 1.1 Georgia,
    serif !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -6px 10px rgba(0, 0, 0, 0.4),
    0 3px 5px #000 !important;
  text-shadow: 0 1px 2px #000 !important;
}
#scoreModal:not(.showing-remaining) .score-modal-actions #scoreModalNext {
  background: linear-gradient(180deg, #e0ad3d, #b87515 58%, #754308) !important;
  color: #fff3bf !important;
  border-color: #e0b84d !important;
  box-shadow:
    inset 0 1px 0 #fff0ad,
    inset 0 -8px 12px rgba(82, 42, 0, 0.4),
    0 3px 5px #000 !important;
}
#scoreModal:not(.showing-remaining) .score-modal-actions #scoreModalNext::after {
  content: '  ▶';
}
#scoreModal:not(.showing-remaining) .score-modal-actions .hidden {
  display: none !important;
}

#horThemeDiagnostic,
#horDiagnosticPreview,
#btnSolStudio {
  display: none !important;
}

@media (orientation: portrait) and (max-width: 520px) {
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal {
    width: 96vw !important;
    padding: 78px 8px 8px !important;
  }
  #scoreModal:not(.showing-remaining) #scoreModalTitle {
    top: 38px !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team {
    min-height: 80px !important;
  }
  /* 745: compact only the existing header while the portrait Scoreboard is open.
     Gameplay, Remaining/Laid Down and landscape retain their header rules. */
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow {
    gap: 3px !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow span,
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow b {
    font-size: inherit !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining))
    #matchHeader706
    #scoreRow
    > span:not(#scoreSpeed701) {
    padding: 4px 3px !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 2px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining))
    #matchHeader706
    #scoreRow
    #scoreTeamNameA,
  body:has(#scoreModal:not(.hidden):not(.showing-remaining))
    #matchHeader706
    #scoreRow
    #scoreTeamNameB,
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow #scoreA,
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow #scoreB {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* 743: this portrait Scoreboard owns its Nest geometry/materials.
     Shared faces, Remaining/Laid Down and landscape retain their own rules. */
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal {
    height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    border-color: #b89a52 !important;
    border-radius: 18px !important;
    background:
      repeating-linear-gradient(2deg, transparent 0 5px, rgba(0, 0, 0, 0.1) 6px 7px),
      linear-gradient(110deg, #24160f, #100c09 48%, #24160f) !important;
    box-shadow:
      0 12px 35px #000a,
      inset 0 1px 0 #d7be7870,
      inset 0 0 0 5px #100c09,
      inset 0 0 0 6px #b89a5280 !important;
  }
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::before {
    top: 18px !important;
    width: 36px !important;
    height: 18px !important;
  }
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::after {
    border-color: #b89a5270 !important;
    border-radius: 12px !important;
  }
  #scoreModal:not(.showing-remaining) #scoreModalTitle {
    border-radius: 5px !important;
    border-color: #b89a52 !important;
    color: #f3e7c2 !important;
    background: linear-gradient(#291b12, #100c09) !important;
  }
  #scoreModal:not(.showing-remaining) .gh-approved-scoreboard {
    background: radial-gradient(ellipse at 50% 0, #073b29, #05251b 80%) !important;
    border-color: #b89a5280 !important;
    color: #f3e7c2 !important;
    gap: 5px !important;
    box-shadow:
      inset 0 1px 3px #0008,
      inset 0 0 18px #0005 !important;
  }
  #scoreModal:not(.showing-remaining)
    .gh-approved-scoreboard:not(:has(.score-teach))
    .ghsb-result-line {
    /* Keep lower-panel positions when deleting the confirmed duplicate. */
    min-height: 0 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team {
    border-width: 1px !important;
    border-color: #b89a52 !important;
    border-radius: 6px !important;
    background: radial-gradient(ellipse at 50% 10%, #073023, #07120d 75%) !important;
    box-shadow:
      inset 0 1px 0 #d7be7830,
      inset 0 0 12px #0008,
      0 2px 4px #0008 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team .sb-label,
  #scoreModal:not(.showing-remaining) .ghsb-team .sb-total {
    color: #f3e7c2 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team-copy {
    flex: 1 1 auto !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team .sb-total {
    white-space: nowrap !important;
    font-size: clamp(1.3rem, 7vw, 2rem) !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team-icon {
    width: clamp(28px, 8vw, 38px) !important;
    height: clamp(36px, 10vw, 48px) !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest,
  #scoreModal:not(.showing-remaining) .ghsb-details {
    border-color: #b89a5280 !important;
    background: #051811 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-details {
    padding: 6px 10px !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-title {
    border-color: #b89a52 !important;
    color: #f3e7c2 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-trump-green {
    color: #0e8f3e !important;
    background: #f3e7c2;
    padding: 0 3px;
    border-radius: 2px;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-cards {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(3px, 1.8vw, 8px) !important;
    align-items: start !important;
    justify-items: center !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-empty {
    grid-column: 1 / -1;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card {
    width: 100% !important;
    max-width: 44px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 580 / 840;
    flex: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card .card-face {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    overflow: visible !important;
    box-shadow: 0 2px 3px #0008 !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card .card-face::before,
  #scoreModal:not(.showing-remaining) .ghsb-nest-card .card-face::after,
  #scoreModal:not(.showing-remaining) .ghsb-nest-card .c-trump-tag {
    display: none !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card .c-stack {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  #scoreModal:not(.showing-remaining) .score-modal-actions .btn {
    border-width: 1px !important;
    border-color: #b89a52 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    color: #f3e7c2 !important;
  }
  #scoreModal:not(.showing-remaining) .score-modal-actions .btn {
    min-height: 44px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .modal-content.scoreboard-modal {
    padding-top: 70px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 #scoreModalTitle {
    top: 38px !important;
    font-size: 1rem !important;
    padding: 3px 12px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .gh-approved-scoreboard {
    gap: 0.5px !important;
    padding: 3px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743
    .gh-approved-scoreboard:not(:has(.score-teach))
    .ghsb-result-line {
    min-height: 0 !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-team {
    min-height: 44px !important;
    padding: 4px 3px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-contract {
    padding: 4px 6px !important;
    font-size: 1rem !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-details {
    padding: 3px 7px !important;
    gap: 2px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-goal {
    padding: 3px 18px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-nest-title {
    padding: 1px 10px !important;
    margin-bottom: 4px !important;
  }
}
@media (orientation: portrait) and (max-width: 360px) {
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreRow {
    display: grid !important;
    grid-template-columns: 26px 1fr 1fr !important;
    gap: 3px !important;
    width: calc(100vw - 8px) !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreSpeed701 {
    grid-column: 1 / 3 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 #scoreSpeed701 button {
    flex: 1 !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining))
    #matchHeader706
    #portraitLastTrickButton {
    width: 100% !important;
  }
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::before {
    display: none !important;
  }
  #scoreModal:not(.showing-remaining) #scoreModalTitle {
    top: 50px !important;
    font-size: 1rem !important;
    padding: 3px 12px !important;
  }
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal,
  #scoreModal:not(.showing-remaining).score-compact743 .modal-content.scoreboard-modal {
    padding-top: 82px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 #scoreModalTitle {
    top: 50px !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .gh-approved-scoreboard {
    padding: 1px !important;
    gap: 0 !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-details {
    padding: 1px 7px !important;
    gap: 0 !important;
  }
  #scoreModal:not(.showing-remaining).score-compact743 .ghsb-contract {
    padding: 2px 6px !important;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal {
    width: min(88vw, 640px) !important;
    max-height: 96dvh !important;
    padding: 36px 10px 8px !important;
  }
  #scoreModal:not(.showing-remaining) .modal-content.scoreboard-modal::before {
    width: 48px !important;
    height: 28px !important;
    top: 3px !important;
  }
  #scoreModal:not(.showing-remaining) #scoreModalTitle {
    top: 22px !important;
    font-size: 1rem !important;
    padding: 3px 14px !important;
  }
  #scoreModal:not(.showing-remaining) .gh-approved-scoreboard {
    padding: 5px !important;
    gap: 3px !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-contract {
    padding: 3px 8px !important;
    font-size: 0.8rem !important;
  }
  .ghsb-team-icon {
    width: 32px !important;
    height: 36px !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-team .sb-total {
    font-size: 1.2rem !important;
  }
  #scoreModal:not(.showing-remaining) .ghsb-nest-card {
    --ghsb-card: min(40px, calc((100% - 20px) / 6));
  }
  #scoreModal:not(.showing-remaining) .score-modal-actions .btn {
    min-height: 30px !important;
    font-size: 0.56rem !important;
  }
}

/* ===== Rook578: table Nest scale + felt-integrated Griffin =====
   Surgical visual-only pass from the accepted Rook577 card-display baseline. */

/* The compact bidding Nest uses the exact live played-card dimensions. */
#nestArea .table-nest-pile {
  width: 98px !important;
  height: 136px !important;
}
#nestArea .table-nest-under,
#nestArea .table-nest-top,
#nestArea .table-nest-flip,
#nestArea .nest-face-up,
#nestArea .nest-stay-face {
  width: 88px !important;
  height: 126px !important;
  border-radius: 7px !important;
}
#nestArea .table-nest-flip {
  left: 6px !important;
  top: -6px !important;
}
#nestArea .table-nest-flip-inner {
  width: 88px !important;
  height: 126px !important;
}
#nestArea .table-nest-flip-face.nest-face-up,
#nestArea .table-nest-flip .nest-face-up {
  width: 100% !important;
  height: 100% !important;
}

/* Match the same responsive reductions already used by played trick cards. */
@media (max-height: 700px) {
  #nestArea .table-nest-pile {
    width: 84px !important;
    height: 116px !important;
  }
  #nestArea .table-nest-under,
  #nestArea .table-nest-top,
  #nestArea .table-nest-flip,
  #nestArea .nest-face-up,
  #nestArea .nest-stay-face {
    width: 74px !important;
    height: 106px !important;
  }
  #nestArea .table-nest-flip-inner {
    width: 74px !important;
    height: 106px !important;
  }
}
@media (max-height: 560px) {
  #nestArea .table-nest-pile {
    width: 72px !important;
    height: 98px !important;
  }
  #nestArea .table-nest-under,
  #nestArea .table-nest-top,
  #nestArea .table-nest-flip,
  #nestArea .nest-face-up,
  #nestArea .nest-stay-face {
    width: 62px !important;
    height: 88px !important;
  }
  #nestArea .table-nest-flip-inner {
    width: 62px !important;
    height: 88px !important;
  }
}

/* Approved Griffin direction: same emblem, but pressed into the felt instead of
   reading as a bright decal. Preserve its footprint and keep cards dominant. */
/* Rook582: retired Rook578 dimming override; final owner is below. */

/* ===== Rook579: approved fine-line card craftsmanship =====
   Replaces the visible dot/diagonal ornament patterns with restrained engraved detail.
   One thin inset rectangle + tiny corner accents + a minute center flourish. */
html:not(.hor-original-cards) body .card-face.green:not(.back) {
  background-color: #056a3b !important;
  background-image: linear-gradient(145deg, #0b9854 0%, #056a3b 48%, #01341e 100%) !important;
}
html:not(.hor-original-cards) body .card-face.red:not(.back) {
  background-color: #a51d18 !important;
  background-image: linear-gradient(145deg, #e0352e 0%, #a51d18 48%, #510a08 100%) !important;
}
html:not(.hor-original-cards) body .card-face.yellow:not(.back) {
  background-color: #d8a52d !important;
  background-image: linear-gradient(145deg, #ffe26d 0%, #d8a52d 50%, #8b5d0b 100%) !important;
}
html:not(.hor-original-cards) body .card-face.black:not(.back) {
  background-color: #1c1c1c !important;
  background-image: linear-gradient(145deg, #454545 0%, #1c1c1c 50%, #030303 100%) !important;
}
/* Retire the old progressive diagonal/dotted-looking ornamentation. */
html:not(.hor-original-cards) body #myHand .card-face:not(.back),
html:not(.hor-original-cards) body #trickArea .card-face:not(.back),
html:not(.hor-original-cards) body .trick .card-face:not(.back),
html:not(.hor-original-cards) body #nestArea .card-face:not(.back) {
  background-size: auto !important;
  outline: none !important;
}
/* Fine inset rectangle: visible up close, quiet at normal phone distance. */
html:not(.hor-original-cards) body .card-face.green:not(.back)::before,
html:not(.hor-original-cards) body .card-face.red:not(.back)::before,
html:not(.hor-original-cards) body .card-face.yellow:not(.back)::before,
html:not(.hor-original-cards) body .card-face.black:not(.back)::before {
  content: '' !important;
  position: absolute !important;
  inset: 5px !important;
  border: 1px solid rgba(255, 226, 132, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(34, 20, 4, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 225, 126, 0.65) 0 1px, transparent 1px) top left/7px 7px
      no-repeat,
    linear-gradient(225deg, rgba(255, 225, 126, 0.65) 0 1px, transparent 1px) top right/7px 7px
      no-repeat,
    linear-gradient(45deg, rgba(255, 225, 126, 0.65) 0 1px, transparent 1px) bottom left/7px 7px
      no-repeat,
    linear-gradient(315deg, rgba(255, 225, 126, 0.65) 0 1px, transparent 1px) bottom right/7px 7px
      no-repeat !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html:not(.hor-original-cards) body .card-face.yellow:not(.back)::before {
  border-color: rgba(73, 43, 3, 0.4) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 191, 0.2) !important;
}
/* Minute divider/flourish under the rank, above the color word. */
html:not(.hor-original-cards) body .card-face.green:not(.back) .c-color::before,
html:not(.hor-original-cards) body .card-face.red:not(.back) .c-color::before,
html:not(.hor-original-cards) body .card-face.yellow:not(.back) .c-color::before,
html:not(.hor-original-cards) body .card-face.black:not(.back) .c-color::before {
  content: '—  ❦  —' !important;
  display: block !important;
  height: 0.48rem !important;
  margin: -0.08rem 0 0.02rem !important;
  font:
    400 0.34rem/0.48rem Georgia,
    serif !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 226, 132, 0.62) !important;
  text-shadow: none !important;
}
html:not(.hor-original-cards) body .card-face.yellow:not(.back) .c-color::before {
  color: rgba(66, 38, 2, 0.56) !important;
}

/* ===== Rook580: live-card render authority + seat thinking placement =====
   Working-screen correction: played cards must use the same opaque premium
   color face as every other live card. Thinking status belongs to the active
   avatar, never the trick center. */
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face.green:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face.green:not(.back) {
  background: #056a3b linear-gradient(145deg, #0b9854 0%, #056a3b 48%, #01341e 100%) !important;
}
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face.red:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face.red:not(.back),
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face.red1:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face.red1:not(.back) {
  background: #a51d18 linear-gradient(145deg, #e0352e 0%, #a51d18 48%, #510a08 100%) !important;
}
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face.yellow:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face.yellow:not(.back) {
  background: #d8a52d linear-gradient(145deg, #ffe26d 0%, #d8a52d 50%, #8b5d0b 100%) !important;
}
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face.black:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face.black:not(.back) {
  background: #1c1c1c linear-gradient(145deg, #454545 0%, #1c1c1c 50%, #030303 100%) !important;
}
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face:not(.back),
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face:not(.back) {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  border: 2px solid #e8bd50 !important;
  outline: none !important;
  isolation: isolate !important;
}
/* Keep Rook579's quiet craftsmanship on played cards without replacing their color fill. */
html:not(.hor-original-cards) body #trickArea .trick-card-wrap .card-face:not(.back)::before,
html:not(.hor-original-cards) body .trick .trick-card-wrap .card-face:not(.back)::before {
  opacity: 1 !important;
}
/* Runtime JS supplies fixed seat-relative coordinates. This rule only owns the pill itself. */
:is(#botThinking, .auction-status).bot-thinking {
  position: fixed !important;
  width: max-content !important;
  max-width: min(11.5rem, 72vw) !important;
  margin: 0 !important;
  z-index: 300 !important;
  pointer-events: none !important;
}

/* ===== Rook582: authoritative Griffin, Nest faces, and thinking pill ===== */
.table-felt::after {
  background-image: url('assets/images/griffin-icon.png?v=631') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0.22 !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.34)) !important;
  mix-blend-mode: normal !important;
}
/* Nest uses the same premium face ownership as hand/trick cards. */
html:not(.hor-original-cards) body #nestArea .card-face.green:not(.back),
html:not(.hor-original-cards) body .discard-kitty .card-face.green:not(.back) {
  background: #056a3b linear-gradient(145deg, #0b9854 0%, #056a3b 48%, #01341e 100%) !important;
}
html:not(.hor-original-cards) body #nestArea .card-face.red:not(.back),
html:not(.hor-original-cards) body #nestArea .card-face.red1:not(.back),
html:not(.hor-original-cards) body .discard-kitty .card-face.red:not(.back),
html:not(.hor-original-cards) body .discard-kitty .card-face.red1:not(.back) {
  background: #a51d18 linear-gradient(145deg, #e0352e 0%, #a51d18 48%, #510a08 100%) !important;
}
html:not(.hor-original-cards) body #nestArea .card-face.yellow:not(.back),
html:not(.hor-original-cards) body .discard-kitty .card-face.yellow:not(.back) {
  background: #d8a52d linear-gradient(145deg, #ffe26d 0%, #d8a52d 50%, #8b5d0b 100%) !important;
}
html:not(.hor-original-cards) body #nestArea .card-face.black:not(.back),
html:not(.hor-original-cards) body .discard-kitty .card-face.black:not(.back) {
  background: #1c1c1c linear-gradient(145deg, #454545 0%, #1c1c1c 50%, #030303 100%) !important;
}
:is(#botThinking, .auction-status).bot-thinking {
  position: fixed !important;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 300 !important;
  pointer-events: none !important;
}

/* Rook584 rollback repair: large discard/trump wait rectangles are retired. */
#ptWaitBanner,
#ltKittyWait {
  display: none !important;
}
body.lt-wait-open #botThinking,
body.pt-wait-open #botThinking {
  display: block !important;
}
nn/* ===== Rook585: approved restoration pass ===== */
/* Felt Griffin: rollback-aware subtle watermark target. */
.table-felt::after {
  opacity: 0.22 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) !important;
}
/* Approved compact bid box; location remains owned by Rook550 positioning. */

/* Side/top thinking status is positioned by the actual live seat geometry in game.js. */
:is(#botThinking, .auction-status).bot-thinking {
  position: fixed !important;
  width: max-content !important;
  max-width: 8.5rem !important;
  margin: 0 !important;
  padding: 0.12rem 0.42rem !important;
  font-size: 0.54rem !important;
  line-height: 1.15 !important;
  z-index: 300 !important;
  pointer-events: none !important;
}
/* Big Trick: retire legacy brown popup while preserving capture timing/logic. */
.capture-overlay.capture-big {
  background: rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(1.5px) !important;
}
.capture-overlay.capture-big .capture-card {
  width: min(78vw, 18rem) !important;
  padding: 0.7rem 0.8rem 0.78rem !important;
  border: 2px solid #d7a844 !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, #171716, #080908 72%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 137, 0.14),
    0 12px 30px rgba(0, 0, 0, 0.58) !important;
  clip-path: none !important;
}
.capture-overlay.capture-big .capture-emoji {
  font-size: 1.75rem !important;
  margin-bottom: 0.1rem !important;
}
.capture-overlay.capture-big .capture-title {
  font-family: Georgia, serif !important;
  font-size: 1.18rem !important;
  letter-spacing: 0.06em !important;
  color: #f6d477 !important;
  text-shadow: 0 1px 2px #000 !important;
}
.capture-overlay.capture-big .capture-sub {
  font-size: 0.78rem !important;
  color: #f4dfad !important;
}

/* ===== Rook589 isolated proven presentations ===== */
/* Exact approved Shoot the Moon artwork/component. */
/* Rook649: exact hit zones aligned to the buttons painted into the approved 1024x1536 artwork. */

/* Proven Big Trick presentation from Rook588. Existing capture queue remains authoritative. */
.big-trick-approved {
  position: fixed;
  inset: 0;
  z-index: 190000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.34);
  pointer-events: none;
}
.big-trick-approved.hidden {
  display: none !important;
}
.big-trick-plaque {
  min-width: min(78vw, 19rem);
  padding: 1rem 1.2rem 1.08rem;
  text-align: center;
  border: 2px solid #d7a844;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 10%, rgba(113, 79, 25, 0.38), transparent 45%),
    linear-gradient(160deg, #171716, #080908 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 137, 0.15),
    0 16px 38px rgba(0, 0, 0, 0.66);
  transform: scale(0.72);
  opacity: 0;
}
.big-trick-approved.is-showing .big-trick-plaque {
  animation: rook588BigTrick 2.35s ease both;
}
.big-trick-kicker {
  font:
    700 0.62rem/1.1 Georgia,
    serif;
  letter-spacing: 0.18em;
  color: #b98b34;
  margin-bottom: 0.28rem;
}
.big-trick-title {
  font:
    900 1.55rem/1 Georgia,
    serif;
  letter-spacing: 0.065em;
  color: #ffe39a;
  text-shadow: 0 2px 4px #000;
}
.big-trick-points {
  font:
    900 1rem/1.2 Georgia,
    serif;
  color: #f6d477;
  margin-top: 0.36rem;
}
.big-trick-sub {
  font:
    0.76rem/1.2 system-ui,
    sans-serif;
  color: #f4dfad;
  margin-top: 0.32rem;
}
@keyframes rook588BigTrick {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(-2deg);
  }
  12% {
    opacity: 1;
    transform: scale(1.06) rotate(1deg);
  }
  22%,
  76% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Approved #4 SPINS UP. This attaches only to Rook585's existing final Trump FX hook. */
#trumpBanner.trump-spinup-approved,
#ltTrumpStamp.trump-spinup-approved {
  display: block !important;
  animation: rook589TrumpSpinUp 2.7s cubic-bezier(0.2, 0.75, 0.2, 1) both !important;
  transform-origin: 50% 50% !important;
  will-change: transform, opacity, filter;
}
#trumpBanner.trump-spinup-approved .trump-medallion,
#ltTrumpStamp.trump-spinup-approved .trump-medallion {
  animation: rook589MedallionSpin 2.35s cubic-bezier(0.18, 0.78, 0.18, 1) both !important;
  transform-style: preserve-3d !important;
}
@keyframes rook589TrumpSpinUp {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.68);
    filter: brightness(0.7);
  }
  12% {
    opacity: 1;
    transform: translateY(4px) scale(0.94);
    filter: brightness(1.25);
  }
  28%,
  78% {
    opacity: 1;
    transform: translateY(-8px) scale(1.06);
    filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 211, 96, 0.55));
  }
  90% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(0.98);
    filter: brightness(0.9);
  }
}
@keyframes rook589MedallionSpin {
  0% {
    transform: rotateY(0deg) rotateZ(-5deg);
  }
  15% {
    transform: rotateY(180deg) rotateZ(3deg);
  }
  35% {
    transform: rotateY(720deg) rotateZ(-2deg);
  }
  60% {
    transform: rotateY(1260deg) rotateZ(2deg);
  }
  82% {
    transform: rotateY(1620deg) rotateZ(0);
  }
  100% {
    transform: rotateY(1800deg) rotateZ(0);
  }
}

/* PASS geometry only; preserve Rook585 bid panel ownership and placement. */

/* ===== Rook590 surgical UI corrections ===== */
/* One finished STAMP THE TRUMP selector in both orientations; old long LT bar retired. */

@media (orientation: landscape) {
  body.in-game #actionPanel.trump-showdown:not(.hidden) {
    position: fixed !important;
    left: 50vw !important;
    top: 50vh !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(19rem, 52vw) !important;
    max-width: 52vw !important;
    padding: 0.5rem 0.58rem 0.48rem !important;
    margin: 0 !important;
    z-index: 150000 !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, #171716, #080908 72%) !important;
    border: 2px solid #d7a844 !important;
    border-radius: 16px !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 224, 137, 0.15),
      0 10px 24px rgba(0, 0, 0, 0.58) !important;
    clip-path: none !important;
  }
  #actionPanel.trump-showdown h3 {
    margin: 0 0 0.35rem !important;
    text-align: center !important;
    font:
      900 0.8rem/1 Georgia,
      serif !important;
    color: #f6d477 !important;
    letter-spacing: 0.07em !important;
  }
  #actionPanel.trump-showdown .trump-showdown-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.38rem !important;
  }
  #actionPanel.trump-showdown .trump-tile {
    min-height: 2.55rem !important;
    border: 1px solid #d8a83f !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
    clip-path: none !important;
  }
  #actionPanel.trump-showdown .trump-selector-note {
    margin: 0.28rem 0 0 !important;
    font-size: 0.58rem !important;
    text-align: center !important;
  }
}
/* Locked PLACE YOUR BID target: same owner/location, finished companion buttons. */

/* Bid badges are positioned by live per-seat geometry in game.js; neutralize old seat-specific offsets. */
.player-slot > .bid-badge,
#slot-me > .bid-badge {
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* ===== Rook591 LOCKED MEANS LOCKED surgical presentation pass ===== */
/* Approved clean Griffin back is now the authoritative Griffin card-back art. */
body.cardback-griffin {
  --card-back-bg: #090a0b !important;
  --card-back-border: #d4b24a !important;
  --card-back-pos: center center !important;
  --card-back-size: cover !important;
  --card-back-image: url('assets/images/cardback-griffin-clean.jpg?v=631') !important;
}

/* Restore the previously approved newer STAMP THE TRUMP presentation from Rook586.
   Logic remains Rook590; only presentation ownership is restored. */
#actionPanel.trump-showdown {
  position: fixed !important;
  left: 50% !important;
  bottom: clamp(5.8rem, 15vh, 8.2rem) !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  translate: none !important;
  scale: 1 !important;
  width: min(20rem, 88vw) !important;
  max-width: min(20rem, 88vw) !important;
  height: auto !important;
  max-height: none !important;
  padding: 0.62rem 0.68rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 2px solid #d5ad43 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #171814, #07110d) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 229, 145, 0.13) !important;
  z-index: 150000 !important;
  clip-path: none !important;
  animation: none !important;
}
#actionPanel.trump-showdown h3 {
  margin: 0 0 0.48rem !important;
  color: #f5d46d !important;
  font:
    900 1.02rem/1 Georgia,
    serif !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}
#actionPanel.trump-showdown .trump-showdown-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem !important;
}
#actionPanel.trump-showdown .trump-tile {
  min-height: 42px !important;
  border: 1px solid rgba(221, 183, 77, 0.72) !important;
  border-radius: 9px !important;
  color: #fff3c5 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  clip-path: none !important;
}
#actionPanel.trump-showdown .trump-selector-note {
  margin: 0.35rem 0 0 !important;
  text-align: center !important;
  font-size: 0.58rem !important;
  color: #d9c99f !important;
}
body.in-game #ltTrumpBar {
  display: none !important;
}

/* Locked PLACE YOUR BID target: preserve Rook550 position/compact S24 footprint; finish visual only. */

/* Bid badges have exactly one geometry owner: positionSeatBidBadges() in game.js. */
.player-slot > .bid-badge,
#slot-me > .bid-badge {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Human ordinary-trick win: restrained seat-owned upgrade; Big Trick remains untouched. */
#slot-me .you-took-chip {
  min-width: max-content !important;
  padding: 0.24rem 0.48rem !important;
  border: 1px solid rgba(218, 178, 72, 0.9) !important;
  border-radius: 8px !important;
  background: linear-gradient(160deg, rgba(24, 24, 21, 0.97), rgba(7, 9, 8, 0.97)) !important;
  color: #f7e8b5 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) !important;
  text-align: center !important;
  overflow: hidden !important;
}
#slot-me .you-took-chip .trick-won-kicker {
  display: block !important;
  font:
    700 0.38rem/1 system-ui,
    sans-serif !important;
  letter-spacing: 0.13em !important;
  color: #bda66e !important;
  margin-bottom: 0.08rem !important;
}
#slot-me .you-took-chip strong {
  display: block !important;
  font:
    900 0.62rem/1 Georgia,
    serif !important;
  letter-spacing: 0.055em !important;
  color: #f6d66f !important;
}
#slot-me .you-took-chip .trick-won-glint {
  position: absolute !important;
  inset: -40% auto -40% -35% !important;
  width: 24% !important;
  transform: skewX(-20deg) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 235, 160, 0.45),
    transparent
  ) !important;
  animation: rook591TrickGlint 0.62s ease-out 0.12s both !important;
}
@keyframes rook591TrickGlint {
  from {
    left: -35%;
  }
  to {
    left: 125%;
  }
}
/* Approved Trump selector visual language: icon-first suit buttons, no rule changes. */
#actionPanel.trump-showdown .trump-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.12rem !important;
  font:
    800 0.58rem/1 Georgia,
    serif !important;
  text-transform: uppercase !important;
}
#actionPanel.trump-showdown .trump-tile .trump-swatch {
  display: none !important;
}
#actionPanel.trump-showdown .trump-tile::before {
  display: block !important;
  font:
    900 1.45rem/1 Georgia,
    serif !important;
  text-shadow: 0 1px 3px #000 !important;
}
#actionPanel.trump-showdown .trump-tile.green::before {
  content: '♣';
  color: #18b86a !important;
}
#actionPanel.trump-showdown .trump-tile.red::before {
  content: '♥';
  color: #f04444 !important;
}
#actionPanel.trump-showdown .trump-tile.yellow::before {
  content: '♦';
  color: #f2c23e !important;
}
#actionPanel.trump-showdown .trump-tile.black::before {
  content: none;
  color: #b9b9b9 !important;
}
#actionPanel.trump-showdown::before {
  content: '';
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: -16px !important;
  transform: translateX(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #d5ad43 !important;
  border-radius: 50% !important;
  background: #111 url('assets/images/griffin-icon.png?v=631') center/76% no-repeat !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55) !important;
}
#actionPanel.trump-showdown {
  padding-top: 1rem !important;
}

/* Rook592 — SOL diagnostic speed control. Developer-only; no table geometry ownership. */
#btnSolFast.sol-fast-btn {
  min-width: 88px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.35px;
  white-space: nowrap;
}
#btnSolFast[data-speed='2'],
#btnSolFast[data-speed='3'],
#btnSolFast[data-speed='4'] {
  outline: 2px solid rgba(214, 178, 72, 0.72);
  outline-offset: -2px;
}

nn/* ===== Rook595 — failed-fix reset + viewport menu + approved opaque bid shell ===== */
/* Status/bid geometry is now seat-local in game.js. These rules own appearance only. */
:is(#botThinking,.auction-status).bot-thinking {
  width: max-content !important;
  max-width: 8.5rem !important;
  margin: 0 !important;
  padding: 0.14rem 0.46rem !important;
  font-size: 0.56rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.player-slot > .bid-badge,
#slot-me > .bid-badge {
  margin: 0 !important;
}
/* Decorative bid-pill end marks are retired at their historical source; no pseudo artwork. */
.table-felt .player-slot .bid-badge::before,
.table-felt .player-slot .bid-badge::after,
#slot-me > .bid-badge::before,
#slot-me > .bid-badge::after {
  content: none !important;
  display: none !important;
}

/* Approved PLACE YOUR BID: fully opaque, compact, no glass/see-through and no giant oval. */

/* GAME MENU owns the viewport. It is intentionally not table-themed. */

@media (max-width: 520px) {
}

/* Match Complete — themed presentation only; result/actions stay unchanged. */
#celePage.cele-page {
  background:
    radial-gradient(circle at 50% 12%, rgba(69, 54, 24, 0.42), transparent 32%),
    linear-gradient(180deg, #111714, #050807) !important;
  color: #f7e8b5 !important;
}
#celePage .cele-inner {
  border: 1px solid rgba(221, 177, 65, 0.62) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(24, 28, 23, 0.97), rgba(7, 10, 8, 0.98)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 231, 150, 0.08) !important;
}
#celePage .cele-kicker {
  color: #d6ae4b !important;
  letter-spacing: 0.18em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
#celePage .cele-head h1 {
  font-family: Georgia, serif !important;
  color: #ffe39a !important;
  text-shadow: 0 2px 8px #000 !important;
}
#celePage .cele-recap .recap-grid div,
#celePage .cele-trick {
  background: #0e1310 !important;
  border: 1px solid rgba(202, 158, 54, 0.42) !important;
  border-radius: 12px !important;
  color: #f3e4b8 !important;
}
#celePage .cele-actions .btn {
  border-radius: 10px !important;
  border: 1px solid #b98c34 !important;
  background: #171a17 !important;
  color: #f4e1aa !important;
}
#celePage .cele-actions .btn.primary {
  background: linear-gradient(#16854a, #08602f) !important;
  border-color: #e0b84f !important;
  color: #fff4c8 !important;
}

/* Remaining-winners decision: polished compact decision card, no behavior changes. */
#claimModal .modal-content,
#claimPrompt .modal-content {
  background: #0d100e !important;
  border: 2px solid #d7aa43 !important;
  border-radius: 16px !important;
  color: #f6e7b8 !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65) !important;
}
/* Rook595 remaining-winners decision uses the existing action-panel owner. */
#actionPanel.trump-claim-panel {
  width: min(88vw, 20rem) !important;
  padding: 0.72rem 0.78rem 0.78rem !important;
  border: 2px solid #d7aa43 !important;
  border-radius: 16px !important;
  background: #0d100e !important;
  color: #f6e7b8 !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65) !important;
  clip-path: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#actionPanel.trump-claim-panel .btn {
  min-height: 46px !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
}

/* ===== Rook596 — readable bid redesign + collapsible match board ===== */
/* Entire bid console is ~20% larger than R595. Fully opaque; temporary overlay may cover table content. */

/* Top match board collapses to a slim, readable one-line score strip. */
#btnScoreCollapse.score-collapse-btn {
  appearance: none;
  border: 1px solid rgba(225, 183, 79, 0.55);
  background: #121713;
  color: #f2d47b;
  border-radius: 8px;
  min-width: 32px;
  height: 28px;
  padding: 0 0.38rem;
  font-weight: 950;
  cursor: pointer;
  flex: 0 0 auto;
}
#topBar.score-collapsed .top-bar-main {
  min-height: 0 !important;
  padding-block: 0.18rem !important;
}
#topBar.score-collapsed #scoreRow {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#topBar.score-collapsed #scoreRow .target-label,
#topBar.score-collapsed #sandbagScore,
#topBar.score-collapsed #phaseRow,
#topBar.score-collapsed #trumpDisplay,
#topBar.score-collapsed #topNestPeek,
#topBar.score-collapsed #bidProgress {
  display: none !important;
}
#topBar.score-collapsed #btnScoreCollapse {
  transform: rotate(180deg);
}

@media (max-height: 560px) {
}

/* ===== Rook599 legacy bid skin retired by Rook630 ===== */

/* Brand-new menu presentation. No table geometry, modal skin, or legacy menu layout owns this tree. */
#hostOptionsModal.gh-menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0d1014 !important;
  overflow: hidden !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#hostOptionsModal.gh-menu-overlay.hidden {
  display: none !important;
}
#hostOptionsModal .gh-menu-shell {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(100vw, 780px) !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f4f5f7 !important;
  color: #17191c !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#hostOptionsModal .gh-menu-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: max(0.8rem, env(safe-area-inset-top)) 1rem 0.8rem !important;
  background: #171a1f !important;
  color: #fff !important;
  border-bottom: 3px solid #c99b39 !important;
}
#hostOptionsModal .gh-menu-header h2 {
  margin: 0 !important;
  color: #fff !important;
  font:
    850 1.18rem/1.1 system-ui,
    sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
#hostOptionsModal #closeHostOptionsBtn {
  min-width: 84px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border: 1px solid #d3d7dd !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #15171a !important;
  font-weight: 850 !important;
}
#hostOptionsModal .gh-menu-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.85rem 0.85rem max(1.4rem, env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain !important;
}
#hostOptionsModal .gh-menu-section {
  margin: 0 0 0.8rem !important;
  padding: 0.8rem !important;
  border: 1px solid #d9dde3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.045) !important;
}
#hostOptionsModal .gh-menu-section-title {
  margin: 0 0 0.6rem !important;
  color: #24272c !important;
  font:
    900 0.78rem/1 system-ui,
    sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#hostOptionsModal .gh-menu-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}
#hostOptionsModal .gh-menu-quick-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-height: 58px !important;
  padding: 0.55rem 0.65rem !important;
  border: 1px solid #cbd1d9 !important;
  border-radius: 11px !important;
  background: #f9fafb !important;
  color: #17191c !important;
  text-align: left !important;
}
#hostOptionsModal .gh-menu-quick-btn span:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
}
#hostOptionsModal .gh-menu-quick-btn small {
  color: #68707a !important;
}
#hostOptionsModal .gh-menu-sound {
  border-left: 5px solid #c99b39 !important;
}
#hostOptionsModal .gh-sound-panel {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#hostOptionsModal .gh-menu-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.35rem !important;
  margin: 0 0 0.75rem !important;
  padding: 0.35rem !important;
  background: #e5e8ec !important;
  border-radius: 12px !important;
}
#hostOptionsModal .gh-menu-nav .opt-tab {
  min-height: 44px !important;
  padding: 0.35rem 0.25rem !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #4a5059 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}
#hostOptionsModal .gh-menu-nav .opt-tab.active {
  background: #171a1f !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16) !important;
}
#hostOptionsModal .gh-menu-pane {
  margin: 0 0 0.8rem !important;
  padding: 0.85rem !important;
  border: 1px solid #d9dde3 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #17191c !important;
}
#hostOptionsModal .gh-menu-pane.hidden {
  display: none !important;
}
#hostOptionsModal .option-label {
  color: #1d2024 !important;
}
#hostOptionsModal .option-hint {
  color: #59616b !important;
}
#hostOptionsModal .select-input {
  max-width: 100% !important;
  min-height: 40px !important;
  background: #fff !important;
  color: #17191c !important;
  border: 1px solid #bfc6cf !important;
  border-radius: 8px !important;
}
#hostOptionsModal .gh-menu-diagnostics {
  margin-top: 1.2rem !important;
  background: #eef0f3 !important;
  border-style: dashed !important;
}
#hostOptionsModal .gh-menu-diag-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.45rem !important;
}
#hostOptionsModal .gh-menu-diag-btn {
  min-height: 44px !important;
  border: 1px solid #aeb6c0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #17191c !important;
  font-weight: 850 !important;
  padding: 0.45rem !important;
}
#hostOptionsModal .gh-menu-diag-btn.is-recording {
  background: #a81919 !important;
  color: #fff !important;
}
.menu-diag-state {
  margin-top: 0.5rem !important;
  color: #5b626b !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
}
@media (max-width: 520px) {
  #hostOptionsModal .gh-menu-body {
    padding: 0.65rem 0.6rem max(1.1rem, env(safe-area-inset-bottom)) !important;
  }
  #hostOptionsModal .gh-menu-quick-grid {
    grid-template-columns: 1fr !important;
  }
  #hostOptionsModal .gh-menu-nav {
    grid-template-columns: 1fr 1fr !important;
  }
  #hostOptionsModal .gh-menu-diag-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hand History: large readable results sheet, presentation only. */
#historyModal.history-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  background: rgba(3, 6, 8, 0.84) !important;
  backdrop-filter: blur(5px) !important;
}
#historyModal.history-modal.hidden {
  display: none !important;
}
#historyModal .history-sheet {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 520px) !important;
  max-height: 90dvh !important;
  padding: 1rem !important;
  border: 2px solid #d6aa43 !important;
  border-radius: 18px !important;
  background: #0d100e !important;
  color: #f5e8c1 !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.72) !important;
}
#historyModal .history-title {
  margin: 0 !important;
  color: #f4d36d !important;
  font:
    900 1.45rem/1.1 Georgia,
    serif !important;
}
#historyModal .history-subtitle {
  margin: 0.2rem 0 0.8rem !important;
  color: #bdb28f !important;
  font-size: 0.78rem !important;
}
#historyModal .history-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: grid !important;
  gap: 0.6rem !important;
  padding: 0.05rem 0.05rem 0.3rem !important;
}
#historyModal .history-item {
  padding: 0.7rem !important;
  border: 1px solid rgba(214, 170, 67, 0.42) !important;
  border-radius: 12px !important;
  background: #151916 !important;
}
#historyModal .history-hand-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.history-hand-no {
  font:
    900 0.95rem/1 Georgia,
    serif !important;
  color: #f5d97f !important;
}
.history-result {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #b8c8b9 !important;
}
#historyModal .history-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.38rem 0.7rem !important;
}
.history-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.08rem !important;
}
.history-field span {
  font-size: 0.62rem !important;
  color: #9f9b8b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.history-field b {
  font-size: 0.86rem !important;
  color: #fff0c0 !important;
}
.history-running {
  grid-column: 1/-1 !important;
  margin-top: 0.2rem !important;
  padding-top: 0.45rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  font-weight: 900 !important;
  color: #f5d97f !important;
}
#historyModal .history-actions {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 0.55rem !important;
  margin-top: 0.8rem !important;
}
#historyModal .history-actions .btn {
  min-height: 46px !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
}
.history-copy-btn {
  background: #171a1f !important;
  color: #f0dfad !important;
  border: 1px solid #8e7439 !important;
}
.history-close-btn {
  background: #8b671f !important;
  color: #fff4c5 !important;
  border: 1px solid #d6aa43 !important;
}

/* ===== Rook599 authoritative UI ownership reset ===== */
/* Permanent viewport host for temporary bidding decision UI. Functional dock is never reparented at runtime. */
#bidOverlayHost.bid-overlay-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
  isolation: isolate !important;
}
#bidOverlayHost #feltBidDock {
  pointer-events: auto !important;
  opacity: 1 !important;
  background-color: #090806 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 21rem !important;
  width: min(92vw, 21rem) !important;
}
#bidOverlayHost #feltBidDock,
#bidOverlayHost #feltBidDock * {
  box-sizing: border-box;
}
/* Nothing decorative may visually bleed through the amount readout. */
#bidOverlayHost #bidValue {
  background: #050504 !important;
  background-image: none !important;
  opacity: 1 !important;
  isolation: isolate !important;
}
/* Retire the old expandable brown toolbar/menu. The table toolbar is now only core play controls. */
#topToolbar .game-more,
#topToolbar .developer-only {
  display: none !important;
}
/* New menu owns utility controls. */
#hostOptionsModal .gh-menu-utility-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}
#hostOptionsModal .gh-menu-util-btn {
  min-height: 48px !important;
  padding: 0.55rem 0.65rem !important;
  border: 1px solid #cbd1d9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #17191c !important;
  font:
    800 0.84rem/1.15 system-ui,
    sans-serif !important;
  text-align: left !important;
}
@media (max-width: 520px) {
  #hostOptionsModal .gh-menu-utility-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Seat attachments have one geometry writer in game.js. Neutralize historical fixed-coordinate ownership. */
.player-slot > .bid-badge,
#slot-me > .bid-badge,
:is(#botThinking, .auction-status).bot-thinking {
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* ===== Rook600 — compact match score + seat status + reliable diagnostics ===== */
/* Collapsed scoreboard owns no large brown/header slab: only arrow + compact score plate. */
#topBar.score-collapsed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 4px 6px !important;
  pointer-events: none !important;
}
#topBar.score-collapsed .top-bar-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}
#topBar.score-collapsed #scoreRow {
  width: max-content !important;
  max-width: calc(100vw - 12px) !important;
  padding: 0 !important;
  gap: 5px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#topBar.score-collapsed #scoreRow > span:not(.target-label) {
  background: rgba(10, 12, 12, 0.82) !important;
  border: 1px solid rgba(213, 174, 77, 0.42) !important;
  border-radius: 7px !important;
  padding: 5px 7px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}
#topBar.score-collapsed #topToolbar,
#topBar.score-collapsed .toolbar {
  display: none !important;
}
#topBar.score-collapsed #btnScoreCollapse {
  pointer-events: auto !important;
  background: rgba(10, 12, 12, 0.88) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

/* One compact status pill directly above its avatar. JS moves it above LEAD when LEAD is present. */
:is(#botThinking, .auction-status).bot-thinking {
  width: max-content !important;
  max-width: 8.5rem !important;
  padding: 0.13rem 0.44rem !important;
  font-size: 0.56rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  z-index: 300 !important;
  pointer-events: none !important;
}
:is(#botThinking, .auction-status).bot-thinking[data-human-turn='1'] {
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  border-color: #e2bb56 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42) !important;
}

/* Retire the experimental seat-pip objects that produced the unexplained stray dots. */
.hor-seat-pip {
  display: none !important;
}

/* Emergency DIAG is viewport-owned{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:fixed!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  z-index:2147483646!important;
}


/* ===== ROOK611 COMPACT LAYOUT TOOL ===== */
#ghcText611 {
  width: 100% !important;
  height: 38px !important;
  background: #000 !important;
  color: #fff !important;
  font: 9px monospace !important;
}

/* =====================================================================
   ROOK629 — CLEAN RECOVERY FROM PHYSICALLY CONFIRMED ROOK627
   No side-seat geometry overrides. Rook627 seat positions are restored.
   ===================================================================== */
/* Felt Griffin: same size/position; opacity only. */
.table-felt::after {
  opacity: 0.187 !important;
}

/* Top/bottom identity only: rank under name. Avatar positioning untouched. */
@media (orientation: portrait) {
  #slot-me .seat-identity-copy,
  #slot-partner .seat-identity-copy {
    display: inline-grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 1px !important;
    width: auto !important;
    max-width: 11.8rem !important;
  }
  #slot-me .seat-identity-copy .player-name-text,
  #slot-partner .seat-identity-copy .player-name-text {
    grid-row: 1 !important;
    max-width: 9.55rem !important;
  }
  #slot-me .seat-identity-copy .hor-career-badge,
  #slot-partner .seat-identity-copy .hor-career-badge {
    grid-row: 2 !important;
    margin: 0 !important;
    justify-self: center !important;
  }
}

/* Small permanent live speed switch. */
.hor-game-speed {
  position: fixed;
  top: max(5px, env(safe-area-inset-top));
  right: max(7px, env(safe-area-inset-right));
  z-index: 2147483000;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border: 1px solid rgba(213, 173, 67, 0.45);
  border-radius: 999px;
  background: rgba(8, 9, 8, 0.78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  font:
    800 8px/1 system-ui,
    sans-serif;
  color: #cdbd8e;
  letter-spacing: 0.06em;
}
body.in-game .hor-game-speed {
  display: flex;
}
.hor-game-speed span {
  padding: 0 3px;
  opacity: 0.75;
}
.hor-game-speed button {
  min-width: 27px;
  height: 25px;
  padding: 0 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d8cfb0;
  font:
    900 10px/1 system-ui,
    sans-serif;
}
.hor-game-speed button.active {
  background: rgba(190, 145, 42, 0.9);
  color: #fff7d2;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 145, 0.45);
}

/* Approved premium Hand History direction, real data only. */
#historyModal.history-modal {
  background: radial-gradient(
    circle at 50% 34%,
    rgba(83, 22, 27, 0.22),
    rgba(2, 4, 5, 0.92) 58%
  ) !important;
  backdrop-filter: blur(7px) !important;
}
#historyModal .history-sheet {
  width: min(94vw, 430px) !important;
  max-height: 91dvh !important;
  padding: 14px !important;
  border: 2px solid #d8ad4b !important;
  border-radius: 20px !important;
  background: linear-gradient(155deg, #17120e 0%, #0b0d0d 43%, #150b0d 100%) !important;
  box-shadow:
    0 0 0 1px #5c4319,
    0 22px 58px rgba(0, 0, 0, 0.8),
    inset 0 0 24px rgba(129, 88, 27, 0.08) !important;
}
#historyModal .history-title {
  font:
    900 1.55rem/1 Georgia,
    serif !important;
  letter-spacing: 0.025em !important;
  color: #f3d276 !important;
  text-shadow: 0 2px 3px #000 !important;
}
#historyModal .history-subtitle {
  margin: 0.25rem 0 0.85rem !important;
  color: #b8aa84 !important;
  letter-spacing: 0.04em !important;
}
#historyModal .history-item {
  padding: 0.75rem !important;
  border: 1px solid rgba(216, 173, 75, 0.55) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(25, 28, 24, 0.96), rgba(12, 14, 13, 0.96)) !important;
}
.history-result {
  padding: 0.18rem 0.42rem !important;
  border: 1px solid rgba(216, 173, 75, 0.28) !important;
  border-radius: 999px !important;
}
.history-result.made {
  color: #bfe0bf !important;
}
.history-result.set {
  color: #e3b1ae !important;
}
#historyModal .history-actions {
  grid-template-columns: 1fr 1.35fr !important;
}
.history-copy-btn {
  background: linear-gradient(#1d1d1c, #0c0d0d) !important;
}
.history-close-btn {
  background: linear-gradient(#a17a25, #6d4c12) !important;
}

/* Approved portrait Leave Table treatment. Applies only to this confirmation. */
#confirmSheet.leave-table-confirm {
  background: rgba(2, 4, 6, 0.82) !important;
  backdrop-filter: blur(8px) !important;
}
#confirmSheet.leave-table-confirm .modal-content {
  position: relative !important;
  overflow: visible !important;
  width: min(92vw, 390px) !important;
  padding: 58px 22px 20px !important;
  border: 2px solid #e0b64e !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, #17130d 0%, #080b0d 45%, #16090c 100%) !important;
  box-shadow:
    0 0 0 2px #4b3210,
    0 22px 60px rgba(0, 0, 0, 0.82),
    inset 0 0 0 1px rgba(255, 221, 124, 0.18) !important;
  text-align: center !important;
}
#confirmSheet.leave-table-confirm .modal-content::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: -44px !important;
  transform: translateX(-50%) !important;
  width: 88px !important;
  height: 88px !important;
  border: 3px solid #dcae42 !important;
  border-radius: 50% !important;
  background: #160b08 url('assets/images/griffin-icon.png?v=631') center/72% auto no-repeat !important;
  box-shadow:
    0 0 0 4px #4a2e0b,
    0 6px 18px rgba(0, 0, 0, 0.6) !important;
}
#confirmSheet.leave-table-confirm #confirmTitle {
  margin: 0.1rem 0 0.7rem !important;
  font:
    900 1.75rem/1 Georgia,
    serif !important;
  color: #f4ce69 !important;
  text-shadow: 0 2px 3px #000 !important;
}
#confirmSheet.leave-table-confirm #confirmBody {
  margin: 0 auto 1rem !important;
  max-width: 19rem !important;
  color: #eee3c4 !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}
#confirmSheet.leave-table-confirm .btn-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
#confirmSheet.leave-table-confirm #confirmOk {
  min-height: 52px !important;
  background: linear-gradient(#a42a2d, #68171a) !important;
  color: #fff0cf !important;
  border: 2px solid #d8ad47 !important;
  font:
    900 1.05rem Georgia,
    serif !important;
}
#confirmSheet.leave-table-confirm #confirmCancel {
  min-height: 52px !important;
  background: linear-gradient(#191d20, #090b0d) !important;
  color: #fff0cf !important;
  border: 2px solid #d8ad47 !important;
  font:
    900 1.05rem Georgia,
    serif !important;
}

/* =====================================================================
   ROOK630 — SINGLE AUTHORITATIVE BID / STAMP-TRUMP VISUAL OWNER
   Old Bid/Trump skins retired. #feltBidDock is the sole portrait console.
   Approved physical footprint: X13 Y388 W331 H191 on 360x641 portrait.
   ===================================================================== */
body.in-game #bidOverlayHost {
  position: static !important;
  pointer-events: none !important;
}
body.in-game #feltBidDock:not(.hidden) {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 13px !important;
  top: 388px !important;
  right: auto !important;
  bottom: auto !important;
  width: 331px !important;
  min-width: 331px !important;
  max-width: 331px !important;
  height: 191px !important;
  min-height: 191px !important;
  max-height: 191px !important;
  margin: 0 !important;
  padding: 13px 12px 10px !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 2147483400 !important;
  pointer-events: auto !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 15px !important;
  color: #fff0bd !important;
  background: linear-gradient(180deg, #21190d 0%, #0d0b08 42%, #050504 100%) !important;
  box-shadow:
    0 0 0 2px #51350c,
    0 14px 30px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 226, 141, 0.26),
    inset 0 -18px 35px rgba(0, 0, 0, 0.38) !important;
  isolation: isolate !important;
}
body.in-game #feltBidDock.hidden {
  display: none !important;
}
body.in-game #feltBidDock::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px solid rgba(232, 190, 88, 0.38) !important;
  border-radius: 9px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
body.in-game #feltBidDock::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 7px !important;
  width: 44px !important;
  height: 11px !important;
  transform: translateX(-50%) !important;
  border-top: 1px solid rgba(255, 220, 125, 0.5) !important;
  border-bottom: 1px solid rgba(93, 61, 15, 0.9) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}
body.in-game #feltBidDock .felt-bid-name,
body.in-game #feltBidDock .bid-meta {
  display: none !important;
}
body.in-game #feltBidDock .bid-console-title,
body.in-game #feltBidDock .decision-console-title {
  display: block !important;
  margin: 1px 0 8px !important;
  text-align: center !important;
  color: #f7d477 !important;
  font:
    900 17px/1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.075em !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
}
body.in-game #feltBidDock .bid-console-title img {
  display: none !important;
}
body.in-game #feltBidDock .bid-stepper {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 0 8px !important;
}
body.in-game #feltBidDock #bidMinus,
body.in-game #feltBidDock #bidPlus {
  height: 51px !important;
  min-height: 51px !important;
  padding: 0 !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  color: #fff4c9 !important;
  font:
    950 1.5rem/1 Georgia,
    serif !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 3px 7px rgba(0, 0, 0, 0.32) !important;
}
body.in-game #feltBidDock #bidMinus {
  background: linear-gradient(#bd2529, #761417) !important;
}
body.in-game #feltBidDock #bidPlus {
  background: linear-gradient(#139452, #08632f) !important;
}
body.in-game #feltBidDock #bidValue {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 47px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  background: linear-gradient(#0d0e0d, #030403) !important;
  color: #f8d46e !important;
  font:
    900 2.15rem/1 Georgia,
    serif !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.65) !important;
}
body.in-game #feltBidDock .bid-buttons {
  display: grid !important;
  grid-template-columns: 1.18fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}
body.in-game #feltBidDock #bidConfirm,
body.in-game #feltBidDock #bidPassBtn {
  height: 47px !important;
  min-height: 47px !important;
  padding: 0 5px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 11px !important;
  color: #fff2c7 !important;
  font:
    900 1.03rem/1 Georgia,
    serif !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 3px 7px rgba(0, 0, 0, 0.3) !important;
}
body.in-game #feltBidDock #bidConfirm {
  background: linear-gradient(#149554, #08632f) !important;
}
body.in-game #feltBidDock #bidPassBtn {
  background: linear-gradient(#292929, #111) !important;
}
body.in-game #feltBidDock #bidConfirm.bid-shoot-moon {
  background: linear-gradient(180deg, #b38a2d, #65470f) !important;
  color: #fff6cf !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.035em !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 173, 0.35),
    0 0 10px rgba(218, 177, 64, 0.22) !important;
}
body.in-game #feltBidDock button:active {
  transform: translateY(1px) !important;
  filter: brightness(0.92) !important;
}

/* Same physical console changes function for Trump; no #actionPanel Trump box. */
body.in-game #feltBidDock.decision-mode-trump {
  padding: 13px 12px 10px !important;
}
body.in-game #feltBidDock .stamp-trump-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
body.in-game #feltBidDock .stamp-trump-choice {
  position: relative !important;
  height: 58px !important;
  min-height: 58px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  color: #fff4c8 !important;
  font:
    900 0.92rem/1 Georgia,
    serif !important;
  letter-spacing: 0.045em !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -10px 16px rgba(0, 0, 0, 0.22),
    0 3px 7px rgba(0, 0, 0, 0.32) !important;
}
body.in-game #feltBidDock .stamp-trump-choice::before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  margin-right: 7px !important;
  border: 2px solid rgba(255, 230, 157, 0.75) !important;
  border-radius: 50% !important;
  vertical-align: -2px !important;
  background: var(--stamp-color, #222) !important;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25) !important;
}
body.in-game #feltBidDock .stamp-trump-choice.green {
  --stamp-color: #15935a;
  background: linear-gradient(#137a4b, #07552f) !important;
}
body.in-game #feltBidDock .stamp-trump-choice.red {
  --stamp-color: #c22b31;
  background: linear-gradient(#a82127, #6d1418) !important;
}
body.in-game #feltBidDock .stamp-trump-choice.yellow {
  --stamp-color: #e0b73e;
  background: linear-gradient(#b98c22, #74540e) !important;
  color: #fff4c8 !important;
}
body.in-game #feltBidDock .stamp-trump-choice.black {
  --stamp-color: #171717;
  background: linear-gradient(#292929, #0b0b0b) !important;
}
body.in-game #feltBidDock .stamp-trump-note {
  margin: 6px 0 0 !important;
  text-align: center !important;
  color: #cdbd8f !important;
  font:
    700 0.58rem/1.1 system-ui,
    sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* Speed control: production pacing, live 1x/2x/3x/4x/MAX. */
.hor-game-speed button[data-pace='99'] {
  min-width: 35px !important;
  font-size: 8px !important;
  letter-spacing: 0.02em !important;
}

/* Rook630 live animation pacing. Decision screens themselves never auto-dismiss. */
body[data-game-pace='2'] #trumpBanner.trump-spinup-approved,
body[data-game-pace='2'] #ltTrumpStamp.trump-spinup-approved {
  animation-duration: 1.35s !important;
}
body[data-game-pace='3'] #trumpBanner.trump-spinup-approved,
body[data-game-pace='3'] #ltTrumpStamp.trump-spinup-approved {
  animation-duration: 0.9s !important;
}
body[data-game-pace='4'] #trumpBanner.trump-spinup-approved,
body[data-game-pace='4'] #ltTrumpStamp.trump-spinup-approved {
  animation-duration: 0.675s !important;
}
body[data-game-pace='max'] #trumpBanner.trump-spinup-approved,
body[data-game-pace='max'] #ltTrumpStamp.trump-spinup-approved {
  animation-duration: 0.18s !important;
}
body[data-game-pace='2'] #trumpBanner .trump-medallion,
body[data-game-pace='2'] #ltTrumpStamp .trump-medallion {
  animation-duration: 1.175s !important;
}
body[data-game-pace='3'] #trumpBanner .trump-medallion,
body[data-game-pace='3'] #ltTrumpStamp .trump-medallion {
  animation-duration: 0.783s !important;
}
body[data-game-pace='4'] #trumpBanner .trump-medallion,
body[data-game-pace='4'] #ltTrumpStamp .trump-medallion {
  animation-duration: 0.588s !important;
}
body[data-game-pace='max'] #trumpBanner .trump-medallion,
body[data-game-pace='max'] #ltTrumpStamp .trump-medallion {
  animation-duration: 0.16s !important;
}

@media (orientation: landscape) {
  body.in-game #feltBidDock:not(.hidden) {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ===== ROOK631 — AUTHORITATIVE DECISION CONSOLE / KITTY / DISCARD ===== */
/* The historical #feltBidDock body no longer exists in markup. This is the sole live owner. */
body.in-game #decisionConsole.hidden {
  display: none !important;
}
body.in-game #decisionConsole:not(.hidden) {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 4px !important;
  top: auto !important;
  right: auto !important;
  bottom: 84px !important;
  width: 331px !important;
  min-width: 331px !important;
  max-width: 331px !important;
  height: 191px !important;
  min-height: 191px !important;
  max-height: 191px !important;
  margin: 0 !important;
  padding: 13px 12px 10px !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 2147483400 !important;
  pointer-events: auto !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 15px !important;
  color: #fff0bd !important;
  background: linear-gradient(180deg, #17130c 0%, #0b0b08 45%, #040504 100%) !important;
  box-shadow:
    0 0 0 2px #51350c,
    0 14px 30px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 226, 141, 0.26),
    inset 0 -18px 35px rgba(0, 0, 0, 0.38) !important;
  isolation: isolate !important;
}
body.in-game #decisionConsole:not(.hidden)::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(232, 190, 88, 0.38);
  border-radius: 9px;
  pointer-events: none;
  z-index: -1;
}
/* Small visual bridge makes console + hand enclosure read as one piece without moving cards. */
body.in-game #decisionConsole:not(.hidden)::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -9px;
  height: 11px;
  border-left: 2px solid #b98b31;
  border-right: 2px solid #b98b31;
  background: linear-gradient(180deg, #090907, #11100b);
  pointer-events: none;
  z-index: -2;
}
body.in-game #decisionConsole .felt-bid-name,
body.in-game #decisionConsole .bid-meta {
  display: none !important;
}
body.in-game #decisionConsole .bid-console-title,
body.in-game #decisionConsole .decision-console-title {
  display: block !important;
  margin: 1px 0 8px !important;
  text-align: center !important;
  color: #f7d477 !important;
  font:
    900 17px/1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.075em !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
}
body.in-game #decisionConsole .bid-console-title img {
  display: none !important;
}
body.in-game #decisionConsole .bid-stepper {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 0 8px !important;
}
body.in-game #decisionConsole #bidMinus,
body.in-game #decisionConsole #bidPlus {
  height: 51px !important;
  min-height: 51px !important;
  padding: 0 !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  color: #fff4c9 !important;
  font:
    950 1.5rem/1 Georgia,
    serif !important;
  text-shadow: 0 2px 2px #000 !important;
}
body.in-game #decisionConsole #bidMinus {
  background: linear-gradient(#bd2529, #761417) !important;
}
body.in-game #decisionConsole #bidPlus {
  background: linear-gradient(#139452, #08632f) !important;
}
body.in-game #decisionConsole #bidValue {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 47px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  background: #070807 !important;
  color: #f8d46e !important;
  font:
    900 2.15rem/1 Georgia,
    serif !important;
  text-shadow: 0 2px 2px #000 !important;
}
body.in-game #decisionConsole .bid-buttons {
  display: grid !important;
  grid-template-columns: 1.18fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}
body.in-game #decisionConsole #bidConfirm,
body.in-game #decisionConsole #bidPassBtn {
  height: 47px !important;
  min-height: 47px !important;
  padding: 0 5px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 11px !important;
  color: #fff2c7 !important;
  font:
    900 1.03rem/1 Georgia,
    serif !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000 !important;
}
body.in-game #decisionConsole #bidConfirm {
  background: linear-gradient(#149554, #08632f) !important;
}
body.in-game #decisionConsole #bidPassBtn {
  background: linear-gradient(#292929, #111) !important;
}
body.in-game #decisionConsole #bidConfirm.bid-shoot-moon {
  background: linear-gradient(#149554, #08632f) !important;
  color: #fff6cf !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.025em !important;
}
body.in-game #decisionConsole .stamp-trump-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
body.in-game #decisionConsole .stamp-trump-choice {
  height: 58px !important;
  min-height: 58px !important;
  border: 2px solid #e6bd58 !important;
  border-radius: 12px !important;
  color: #fff4c8 !important;
  font:
    900 0.92rem/1 Georgia,
    serif !important;
  letter-spacing: 0.045em !important;
  text-shadow: 0 2px 2px #000 !important;
}
body.in-game #decisionConsole .stamp-trump-choice.green {
  background: linear-gradient(#137a4b, #07552f) !important;
}
body.in-game #decisionConsole .stamp-trump-choice.red {
  background: linear-gradient(#a82127, #6d1418) !important;
}
body.in-game #decisionConsole .stamp-trump-choice.yellow {
  background: linear-gradient(#b98c22, #74540e) !important;
}
body.in-game #decisionConsole .stamp-trump-choice.black {
  background: linear-gradient(#292929, #0b0b0b) !important;
}
body.in-game #decisionConsole .stamp-trump-note {
  margin: 6px 0 0;
  text-align: center;
  color: #cdbd8f;
  font:
    700 0.58rem/1.1 system-ui,
    sans-serif;
}
body.in-game #actionPanel.trump-showdown {
  display: none !important;
}

/* Global room exit/menu stays above full-screen gameplay states. */
body.in-game .in-game-leave {
  position: fixed !important;
  z-index: 2147483646 !important;
  pointer-events: none !important;
}
body.in-game .in-game-leave .leave-exit-btn,
body.in-game .in-game-leave .leave-menu-btn {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 0.96 !important;
}

/* Approved Kitty Added presentation — real Rook cards only. */
#discardOverlay {
  background: rgba(4, 6, 7, 0.76) !important;
  backdrop-filter: blur(2px);
  padding: 42px 8px 8px !important;
}
#discardOverlay .discard-sheet {
  width: min(720px, 100%) !important;
  border: 2px solid #d9ad45;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 15, 12, 0.98), rgba(4, 7, 7, 0.98));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.68),
    inset 0 0 0 1px rgba(255, 225, 139, 0.15);
  padding: 10px 10px 8px !important;
}
#discardOverlay .gh-kitty-page {
  justify-content: flex-start;
  align-items: stretch;
  gap: 7px !important;
  overflow: hidden;
}
#discardOverlay .gh-kitty-crest {
  text-align: center;
  color: #d9ad45;
  font-size: 18px;
  line-height: 16px;
}
#discardOverlay .gh-kitty-title {
  margin: 0;
  text-align: center;
  color: #f3cf6a;
  font:
    900 25px/1 Georgia,
    serif;
  letter-spacing: 0.06em;
}
#discardOverlay .gh-kitty-sub {
  margin: 0;
  text-align: center;
  color: #eadcae;
  font:
    700 12px/1.2 system-ui,
    sans-serif;
}
#discardOverlay .gh-kitty-page .discard-kitty {
  background: transparent !important;
  border: 0 !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#discardOverlay .gh-kitty-page .kitty-cards {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
#discardOverlay .gh-kitty-page .kitty-flash-card {
  width: 45px !important;
  height: 65px !important;
  flex: 0 0 45px !important;
}
#discardOverlay .gh-kitty-page .kitty-hint {
  margin: 1px 0 !important;
  text-align: center;
  color: #e7d49a !important;
  font:
    700 11px/1.2 system-ui,
    sans-serif !important;
}
#discardOverlay .gh-kitty-continue {
  align-self: center;
  width: min(92%, 310px);
  min-height: 43px !important;
  margin: 2px 0 1px !important;
  border: 2px solid #d9ad45 !important;
  border-radius: 12px !important;
  background: linear-gradient(#159856, #086341) !important;
  color: #fff4cb !important;
  font:
    900 15px/1 Georgia,
    serif !important;
}
#discardOverlay .gh-kitty-hand-label {
  text-align: center;
  color: #e7c85f;
  font:
    900 10px/1 Georgia,
    serif;
  letter-spacing: 0.08em;
  margin-top: 1px;
}
#discardOverlay .gh-kitty-hand {
  display: flex;
  justify-content: center;
  gap: 1px;
  width: 100%;
  overflow: hidden;
  padding: 2px 0 1px;
}
#discardOverlay .gh-kitty-hand .kitty-hand-card {
  width: calc((100% - 15px) / 16) !important;
  height: 56px !important;
  min-width: 0 !important;
  flex: 0 1 calc((100% - 15px) / 16) !important;
  border-width: 1px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
#discardOverlay .gh-kitty-hand .kitty-hand-card .c-num {
  font-size: 15px !important;
}
#discardOverlay .gh-kitty-hand .kitty-hand-card .c-color {
  font-size: 5px !important;
}

/* Approved Select 6 presentation; selection mechanics remain existing source of truth. */
#discardOverlay .gh-discard-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(217, 173, 69, 0.35);
  padding: 0 2px 7px;
}
#discardOverlay .gh-discard-head .discard-title {
  text-align: left !important;
  color: #f3cf6a !important;
  font:
    900 20px/1 Georgia,
    serif !important;
  letter-spacing: 0.045em;
}
#discardOverlay .gh-discard-instruction {
  margin: 4px 0 0;
  color: #e8ddb8;
  font:
    700 9px/1.15 system-ui,
    sans-serif;
}
#discardOverlay .gh-discard-count {
  min-width: 56px;
  padding: 6px 7px;
  border: 1px solid #d9ad45;
  border-radius: 10px;
  background: #0b0c0a;
  text-align: center;
  color: #fff1bd;
}
#discardOverlay .gh-discard-count strong {
  display: block;
  font:
    900 16px/1 system-ui,
    sans-serif;
}
#discardOverlay .gh-discard-count span {
  display: block;
  margin-top: 3px;
  font:
    700 8px/1 system-ui,
    sans-serif;
}
#discardOverlay .discard-groups {
  gap: 5px !important;
  padding: 0 !important;
  overflow: auto !important;
}
#discardOverlay .discard-color-row {
  display: grid !important;
  grid-template-columns: 55px 1fr !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(217, 173, 69, 0.42) !important;
  border-radius: 10px !important;
  background: rgba(13, 16, 14, 0.93) !important;
}
#discardOverlay .discard-color-green {
  background: linear-gradient(90deg, rgba(4, 72, 39, 0.72), rgba(7, 25, 17, 0.94)) !important;
}
#discardOverlay .discard-color-red {
  background: linear-gradient(90deg, rgba(112, 20, 18, 0.72), rgba(31, 7, 7, 0.94)) !important;
}
#discardOverlay .discard-color-yellow {
  background: linear-gradient(90deg, rgba(125, 91, 8, 0.72), rgba(32, 24, 4, 0.94)) !important;
}
#discardOverlay .discard-color-black {
  background: linear-gradient(90deg, rgba(38, 38, 38, 0.9), rgba(8, 8, 8, 0.96)) !important;
}
#discardOverlay .discard-color-label {
  margin: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.03em !important;
}
#discardOverlay .discard-color-cards {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
  padding: 2px 0 !important;
}
#discardOverlay .discard-pick {
  width: 38px !important;
  height: 55px !important;
  flex: 0 0 38px !important;
  border-radius: 5px !important;
}
#discardOverlay .discard-pick.selected {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 0 2px #ffe07b,
    0 0 12px rgba(255, 210, 78, 0.7) !important;
}
#discardOverlay .discard-actions {
  padding: 5px 0 0 !important;
}
#discardOverlay #confirmDiscard {
  width: min(94%, 300px) !important;
  min-height: 42px !important;
  border: 2px solid #d9ad45 !important;
  border-radius: 11px !important;
  background: linear-gradient(#159856, #086341) !important;
  color: #fff2c0 !important;
  font:
    900 14px/1 Georgia,
    serif !important;
}
#discardOverlay #confirmDiscard:disabled {
  filter: grayscale(0.8);
  opacity: 0.48 !important;
}

@media (orientation: landscape) {
  body.in-game #decisionConsole:not(.hidden) {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  #discardOverlay .gh-kitty-title {
    font-size: 22px;
  }
  #discardOverlay .gh-kitty-page .kitty-flash-card {
    width: 42px !important;
    height: 61px !important;
    flex-basis: 42px !important;
  }
  #discardOverlay .discard-pick {
    width: 35px !important;
    height: 51px !important;
    flex-basis: 35px !important;
  }
}

/* R640 exact restored full-game compact mapper CSS from working R624 */
.ghc-names {
  display: none !important;
  margin-top: 5px !important;
  padding: 6px !important;
  border: 1px solid #8e6c2b !important;
  border-radius: 5px !important;
  background: #111 !important;
  color: #eee !important;
  font-size: 10px !important;
}
.ghc-names.show {
  display: block !important;
}
.ghc-names-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: #f3d889;
}
.ghc-names label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}
.ghc-names input {
  width: 110px;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #222;
  color: #fff;
  font-size: 10px;
}
.ghc-name-actions {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
@media (max-width: 430px) {
}

/* ===== Rook647 — authoritative phone geometry bake =====
   360x641 live capture, 2026-09-30. Preserve final visible portrait geometry
   while retiring transform-owned avatar movement. Bid Dock intentionally untouched. */
@media (orientation: portrait) and (max-width: 430px) {
  #slot-partner .seat-avatar {
    translate: 0 -5.12px !important;
    transform: none !important;
    animation: none !important;
  }
  #slot-me .seat-avatar {
    translate: 0 4.8px !important;
    transform: none !important;
    animation: none !important;
  }
  #slot-left .seat-avatar-side {
    translate: -33.8391px 0 !important;
    transform: none !important;
    animation: none !important;
  }
  #slot-right .seat-avatar-side {
    translate: 33.8391px 0 !important;
    transform: none !important;
    animation: none !important;
    margin-right: -2px !important;
  }
  /* Recovered exact mapper placements. */
  #slot-partner .name {
    translate: -10px 15px !important;
  }
  #slot-me .name {
    translate: -13px 25px !important;
  }
}

/* Keep portrait-image personality/thinking motion from changing geometry. */
body.in-game .player-slot .seat-avatar-img,
body.in-game .player-slot.hor-thinking-pulse .seat-avatar-img {
  animation: none !important;
  transform: none !important;
}

/* The existing speed DOM is moved, not duplicated{align-items:center!important;gap:4px!important;white-space:nowrap!important}

/* ===== Rook654 — QUIET PREMIUM BID DOCK =====
   Rook653's full-panel artwork has been removed. The live 331x191 Rook631
   geometry remains authoritative. Ornament is intentionally subordinate. */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
  box-sizing: border-box !important;
  width: 331px !important;
  min-width: 331px !important;
  max-width: 331px !important;
  height: 191px !important;
  min-height: 191px !important;
  max-height: 191px !important;
  padding: 8px 9px 8px !important;
  overflow: hidden !important;
  border: 2px solid #cda94d !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #062116 0%, #06150f 34%, #050806 100%) !important;
  box-shadow:
    0 0 0 1px #4f390f,
    0 10px 24px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 230, 147, 0.14) !important;
}
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::before {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid rgba(223, 184, 77, 0.38) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::after {
  content: none !important;
}

body.in-game #decisionConsole.decision-mode-bid .bid-console-title {
  height: 31px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #f4d579 !important;
  font:
    900 18px/1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.055em !important;
  text-shadow: 0 2px 2px #000 !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(214, 172, 67, 0.42) !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-console-title img {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 1px 1px #000) !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-console-title img.bid-title-griffin-right {
  transform: scaleX(-1) !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-stepper {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) 66px !important;
  gap: 7px !important;
  align-items: center !important;
  height: 59px !important;
  margin: 0 0 7px !important;
  position: static !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidMinus,
body.in-game #decisionConsole.decision-mode-bid #bidPlus {
  width: 100% !important;
  height: 57px !important;
  min-height: 57px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #d9b44f !important;
  border-radius: 10px !important;
  color: #fff0bd !important;
  font:
    950 1.65rem/1 Georgia,
    'Times New Roman',
    serif !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 178, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidMinus {
  background: linear-gradient(180deg, #b51e27, #731016) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidPlus {
  background: linear-gradient(180deg, #0e8b4d, #075c34) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidValue,
body.in-game #decisionConsole.decision-mode-bid #bidValue.is-moon {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 57px !important;
  margin: 0 !important;
  padding: 0 45px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 2px solid #cfa844 !important;
  border-radius: 15px !important;
  background:
    linear-gradient(90deg, transparent 0 24%, #050505 29% 71%, transparent 76%),
    url('assets/images/bid-plaque-quiet-r654.png') center/100% 100% no-repeat !important;
  color: #f7d36d !important;
  font:
    950 2.35rem/0.95 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.01em !important;
  text-shadow:
    0 2px 2px #000,
    0 0 4px rgba(255, 213, 103, 0.42) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidValue::before,
body.in-game #decisionConsole.decision-mode-bid #bidValue::after {
  content: none !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons {
  display: grid !important;
  grid-template-columns: 1.28fr 1fr !important;
  gap: 8px !important;
  height: 55px !important;
  margin: 0 !important;
  position: static !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm,
body.in-game #decisionConsole.decision-mode-bid #bidPassBtn {
  position: relative !important;
  width: 100% !important;
  height: 55px !important;
  min-height: 55px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 2px solid #d9b44f !important;
  border-radius: 10px !important;
  color: #f8d982 !important;
  font:
    950 1.16rem/1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px #000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 174, 0.13),
    0 2px 4px rgba(0, 0, 0, 0.48) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm:not(.bid-shoot-moon) {
  background: linear-gradient(180deg, #0c8248, #075b35) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidPassBtn {
  background: linear-gradient(180deg, #252525, #0b0b0b) !important;
}
/* =====================================================================
   ROOK656 — CLEAN 200-STATE SHOOT-THE-MOON BUTTON REBUILD
   One visual owner only. Normal BID and PASS are unchanged. The supplied
   approved reference is used only for the Moon orb visual language.
   ===================================================================== */
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 7px !important;
  padding: 0 9px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #0d8a4c 0%, #08713e 48%, #075a34 100%) !important;
  border: 2px solid #d9b44f !important;
  border-radius: 10px !important;
  color: #f8d982 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 174, 0.16),
    inset 0 8px 14px rgba(255, 255, 255, 0.035),
    0 2px 4px rgba(0, 0, 0, 0.48) !important;
  text-shadow: 0 2px 2px #000 !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon .moon-orb {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url('assets/images/shoot-moon-orb-r656.png') center/contain no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon .moon-action-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  color: #ffe39a !important;
  font:
    950 0.94rem/0.86 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.015em !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow:
    0 2px 2px #000,
    0 0 2px rgba(255, 219, 124, 0.28) !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon::before,
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon::after {
  content: none !important;
}
/* PASS at 200 remains the existing real right-side Pass control. */

/* ===== ROOK666 SURGICAL BID DOCK POSITION / EDGE / SHARPNESS FIX =====
   Visual authority: supplied approved reference only.
   Reference design preserved; widened and bottom-anchored immediately above the hand.
   One reference-derived shell owns all static pixels; live bid/action copy stays HTML. */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
  position: fixed !important;
  left: 4px !important;
  top: auto !important;
  right: auto !important;
  bottom: 84px !important;
  width: min(420px, calc(100vw - 8px)) !important;
  min-width: 0 !important;
  max-width: 420px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1614/540 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url('assets/images/bid-dock-cleanroom-r668.png?v=668') center/100% 100% no-repeat !important;
  isolation: isolate !important;
  z-index: 2147483400 !important;
  pointer-events: auto !important;
}
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::before,
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::after {
  content: none !important;
  display: none !important;
}
body.in-game #decisionConsole.decision-mode-bid .felt-bid-name,
body.in-game #decisionConsole.decision-mode-bid .bid-meta {
  display: none !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-console-title {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 25.2% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  display: block !important;
  pointer-events: none !important;
}

body.in-game #decisionConsole.decision-mode-bid .bid-stepper {
  position: absolute !important;
  left: 2.48% !important;
  top: 25.37% !important;
  width: 95.04% !important;
  height: 36.3% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidMinus,
body.in-game #decisionConsole.decision-mode-bid #bidPlus {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidMinus {
  left: 0 !important;
  width: 23.2% !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidPlus {
  right: 0 !important;
  width: 23.2% !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidValue,
body.in-game #decisionConsole.decision-mode-bid #bidValue.is-moon {
  position: absolute !important;
  left: 25.1% !important;
  top: 0 !important;
  width: 49.8% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #ffd86b !important;
  font:
    950 clamp(2.2rem, 12vw, 3.45rem) / 1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: -0.025em !important;
  text-shadow:
    0 2px 1px #5b3100,
    0 0 2px #fff0a4 !important;
  pointer-events: none !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidValue::before,
body.in-game #decisionConsole.decision-mode-bid #bidValue::after {
  content: none !important;
  display: none !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons {
  position: absolute !important;
  left: 2.48% !important;
  top: 64.45% !important;
  width: 95.04% !important;
  height: 30% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm,
body.in-game #decisionConsole.decision-mode-bid #bidPassBtn {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm {
  left: 0 !important;
  width: 53.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffdc7c !important;
  font:
    950 clamp(1.05rem, 5.6vw, 1.65rem) / 1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.005em !important;
  text-shadow:
    0 2px 1px #4c2b00,
    0 0 2px #fff0a4 !important;
  text-transform: uppercase !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidPassBtn {
  right: 0 !important;
  width: 45% !important;
  font-size: 0 !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffdc7c !important;
  font:
    950 clamp(0.72rem, 3.8vw, 1.08rem) / 0.9 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.02em !important;
  text-shadow:
    0 2px 1px #4c2b00,
    0 0 2px #fff0a4 !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon .moon-orb {
  display: none !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon .moon-action-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
@media (orientation: landscape) {
  body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ===== ROOK668 OPAQUE ORNAMENTAL EDGE + INDEPENDENT LOWER CONNECTOR =====
   R666 geometry retained. No alpha masking. The ornamental edge covers the old rectangular
   source boundary. Connector is a visual child below the dock and does not change dock size. */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
  background-image: url('assets/images/bid-dock-cleanroom-r668.png?v=668') !important;
  overflow: visible !important;
}
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 10% !important;
  top: calc(100% - 2px) !important;
  width: 80% !important;
  height: 30px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, #10271d 0%, #071510 58%, #030907 100%) !important;
  border-top: 3px solid #e5bd59 !important;
  border-bottom: 3px solid #7b5415 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 232, 153, 0.22),
    inset 0 -4px 7px rgba(0, 0, 0, 0.78),
    0 3px 5px rgba(0, 0, 0, 0.48) !important;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%) !important;
}
/* Keep live controls above the connector and keep the existing R666 dock anchor untouched. */

/* =====================================================================
   ROOK674 — CLEAN HQ BID DOCK RECONSTRUCTION
   Source baseline: untouched Rook668. Visual authority: supplied crisp
   reference image. No image generation and no R669-R673 patch stack.
   The reference owns the ornamental frame / title / griffins / +/- / PASS.
   Only genuinely dynamic content is overlaid once, opaquely, at runtime.
   ===================================================================== */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
  /* Preserve the proven R668 game anchor; use the crisp reference crop. */
  left: 4px !important;
  right: auto !important;
  top: auto !important;
  bottom: 84px !important;
  width: min(420px, calc(100vw - 8px)) !important;
  max-width: 420px !important;
  aspect-ratio: 1614/557 !important;
  background: url('assets/images/bid-dock-reference-hq-r674.png?v=674') center/100% 100% no-repeat !important;
  overflow: visible !important;
}
/* Crisp static reference title: do not redraw/stack PLACE YOUR BID. */
body.in-game #decisionConsole.decision-mode-bid .bid-console-title {
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-console-title img {
  display: none !important;
}

/* Exact live hit regions over the reference controls. */
body.in-game #decisionConsole.decision-mode-bid .bid-stepper {
  left: 2.45% !important;
  top: 25% !important;
  width: 95.1% !important;
  height: 36.1% !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidMinus {
  left: 0 !important;
  width: 23% !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidPlus {
  right: 0 !important;
  width: 23% !important;
}

/* Cover ONLY the baked center digits, then draw one live value. Wings/frame stay reference-sharp. */
body.in-game #decisionConsole.decision-mode-bid #bidValue,
body.in-game #decisionConsole.decision-mode-bid #bidValue.is-moon {
  left: 37% !important;
  top: 8% !important;
  width: 26% !important;
  height: 84% !important;
  color: #ffe083 !important;
  background: radial-gradient(ellipse at center, #080808 0%, #050505 68%, #030303 100%) !important;
  font:
    950 clamp(2.35rem, 12.5vw, 3.6rem) / 1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: -0.025em !important;
  text-shadow:
    0 2px 1px #5a3100,
    0 0 1px #fff0a4 !important;
}

/* Bottom-row hit region aligned to the crisp reference. */
body.in-game #decisionConsole.decision-mode-bid .bid-buttons {
  left: 2.45% !important;
  top: 64% !important;
  width: 95.1% !important;
  height: 31% !important;
}
/* BID is a COMPLETE sibling of PASS: same clipped-corner language, thin inner gold line.
   The reference outer frame remains visible; this opaque face removes baked BID 105 cleanly. */
body.in-game #decisionConsole.decision-mode-bid #bidConfirm:not(.bid-shoot-moon) {
  left: 0.9% !important;
  top: 7% !important;
  width: 52.1% !important;
  height: 86% !important;
  box-sizing: border-box !important;
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 0 16%) !important;
  background: linear-gradient(180deg, #078f50 0%, #057c45 45%, #046b3c 100%) !important;
  border: 1px solid #f2cf65 !important;
  box-shadow:
    inset 0 0 0 2px #18451f,
    inset 0 0 0 3px #d5a83e,
    inset 0 5px 8px rgba(255, 255, 255, 0.08),
    inset 0 -7px 10px rgba(0, 0, 0, 0.28) !important;
  color: #ffe79b !important;
  font:
    950 clamp(1.1rem, 5.8vw, 1.7rem) / 1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: 0.01em !important;
  text-shadow:
    0 2px 1px #4b2a00,
    0 0 1px #fff0a4 !important;
  text-transform: uppercase !important;
}
/* Guarantee BID + visible space + live number without touching auction math. */
body.in-game
  #decisionConsole.decision-mode-bid
  #bidConfirm:not(.bid-shoot-moon)
  #bidConfirmVal::before {
  content: '\00a0' !important;
}
/* PASS remains the crisp reference art; keep only its live click target. */
body.in-game #decisionConsole.decision-mode-bid #bidPassBtn {
  right: 0 !important;
  width: 45% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* 200-state: same complete green control, with existing dynamic Shoot the Moon content. */
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon {
  left: 0.9% !important;
  top: 7% !important;
  width: 52.1% !important;
  height: 86% !important;
  box-sizing: border-box !important;
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 0 16%) !important;
  background: linear-gradient(180deg, #078f50 0%, #057c45 45%, #046b3c 100%) !important;
  border: 1px solid #f2cf65 !important;
  box-shadow:
    inset 0 0 0 2px #18451f,
    inset 0 0 0 3px #d5a83e,
    inset 0 5px 8px rgba(255, 255, 255, 0.08),
    inset 0 -7px 10px rgba(0, 0, 0, 0.28) !important;
  color: #ffe79b !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidConfirm.bid-shoot-moon .moon-orb {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  background: url('assets/images/shoot-moon-orb-r656.png') center/contain no-repeat !important;
}

/* Independent connector: shorter, narrower, tapered into card holder. Never changes dock geometry. */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 14% !important;
  top: calc(100% - 1px) !important;
  width: 72% !important;
  height: 17px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, #10291e 0%, #081a13 52%, #040b08 100%) !important;
  border-top: 1px solid #efcf69 !important;
  border-bottom: 1px solid #8d641d !important;
  box-shadow:
    inset 0 1px 0 #6e4c14,
    inset 0 -3px 5px rgba(0, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%) !important;
}
/* Tiny attached shoulder ornaments — not floating diamonds. */
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::before,
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::after {
  content: '◆' !important;
  position: absolute !important;
  top: calc(100% + 7px) !important;
  width: 14px !important;
  height: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #e9c65f !important;
  font:
    700 8px/1 Georgia,
    serif !important;
  text-shadow: 0 1px 0 #4a2b00 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::before {
  left: 13% !important;
  transform: rotate(-18deg) !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::after {
  right: 13% !important;
  transform: rotate(18deg) !important;
}

/* =====================================================================
   ROOK675 — LOCKED BID DOCK / OUTER-SEAM + CONNECTOR FINISH ONLY
   Interior geometry/content from R674 is frozen. No image generation.
   Conservative CSS silhouette on the reference art; ornamental gold edge
   expands over that seam. Connector only: attached shoulder accents.
   ===================================================================== */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid {
  background: none !important;
}
/* Reference art on its own layer so silhouette cleanup cannot punch holes
   through live controls or the opaque dock interior. */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: url('assets/images/bid-dock-reference-hq-r674.png?v=674') center/100% 100% no-repeat !important;
  /* Conservative corner trim only — stays outside the ornamental frame. */
  clip-path: polygon(2% 0, 98% 0, 100% 7%, 100% 93%, 98% 100%, 2% 100%, 0 93%, 0 7%) !important;
  filter: drop-shadow(0 0 1px #f3cf68) drop-shadow(0 0 1px #8d5a12) !important;
}
/* Expanded ornamental perimeter hides the conservative trim seam.  It is
   deliberately outside the locked dock face and does not mask the interior. */
body.in-game #decisionConsole.decision-mode-bid .bid-console-title::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -0.35% !important;
  top: -1.5% !important;
  width: 100.7% !important;
  height: 397% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border: 2px solid #d9a63b !important;
  border-radius: 15px 15px 12px 12px !important;
  clip-path: polygon(
    2.2% 0,
    97.8% 0,
    100% 7%,
    100% 93%,
    97.8% 100%,
    2.2% 100%,
    0 93%,
    0 7%
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 142, 0.82),
    0 0 0 1px rgba(74, 39, 4, 0.88) !important;
}
/* Keep all locked live content above the reference-art layer. */
body.in-game #decisionConsole.decision-mode-bid .bid-console-title,
body.in-game #decisionConsole.decision-mode-bid .bid-stepper,
body.in-game #decisionConsole.decision-mode-bid .bid-buttons {
  z-index: 2 !important;
}

/* Connector geometry stays R674. Replace floating marks with two attached,
   restrained gold shoulder strokes at the connector's upper taper points. */
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::before,
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::after {
  content: '' !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  width: 18px !important;
  height: 3px !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: linear-gradient(90deg, #8b5b12, #f1cf67, #9b6819) !important;
  border-radius: 2px !important;
  box-shadow:
    0 1px 0 #3f2505,
    0 0 2px rgba(255, 222, 116, 0.42) !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::before {
  left: 13.5% !important;
  transform: rotate(-20deg) !important;
  transform-origin: right center !important;
}
body.in-game #decisionConsole.decision-mode-bid .bid-buttons::after {
  right: 13.5% !important;
  transform: rotate(20deg) !important;
  transform-origin: left center !important;
}

/* =====================================================================
   ROOK676 EXPERIMENT — TRUE TRANSPARENT PNG OUTER SILHOUETTE
   Baseline remains Rook675. Experimental only. The approved dock interior,
   anchor, live controls and connector geometry are untouched.
   ===================================================================== */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::before {
  background: url('assets/images/bid-dock-transparent-r676.png?v=676') center/100% 100% no-repeat !important;
  clip-path: none !important;
  filter: none !important;
}
/* Remove R675's thick seam-covering perimeter for this experiment. The PNG
   alpha edge itself owns the silhouette. */
body.in-game #decisionConsole.decision-mode-bid .bid-console-title::before {
  content: none !important;
  display: none !important;
}

/* ===== Rook677 RECOVERY — diagnostics belong in upper Settings menu =====
   Surgical recovery from Rook676. No table, card, Bid Dock{
  position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;width:100%!important;max-width:none!important;margin:.65rem 0 0!important;
  z-index:auto!important;box-sizing:border-box!important;
}
/* Speed stays in its original .hor-speed-menu-setting home in Settings. */
#hostOptionsModal #optPaneSettings > .hor-speed-menu-setting #horGameSpeed {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: auto !important;
}

/* =====================================================================
   ROOK684 — BID DOCK SURGICAL FINISH
   Source: Rook683 recovery. Bid Dock only.
   - Uses the measured Rook678 border-isolated alpha asset to remove only
     the unwanted outermost rectangular frame band.
   - Preserves the next ornamental gold frame and all dock interior art.
   - Reduces only the live center bid number; hit regions/logic unchanged.
   ===================================================================== */
body.in-game #decisionConsole:not(.hidden).decision-mode-bid::before {
  background: url('assets/images/bid-dock-transparent-r684.png?v=684') center/100% 100% no-repeat !important;
  clip-path: none !important;
  filter: none !important;
}
body.in-game #decisionConsole.decision-mode-bid #bidValue,
body.in-game #decisionConsole.decision-mode-bid #bidValue.is-moon {
  font:
    950 clamp(1.65rem, 6.5vw, 1.95rem) / 1 Georgia,
    'Times New Roman',
    serif !important;
  letter-spacing: -0.015em !important;
}
#ghTopTools693 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin: 0.22rem 0 0.05rem !important;
  padding: 0.18rem 0.25rem !important;
  border-top: 1px solid rgba(201, 162, 39, 0.28) !important;
}
#ghTopTools693 .gh-top-tools-label {
  font:
    850 0.62rem/1 system-ui,
    sans-serif !important;
  color: #ead28d !important;
  letter-spacing: 0.05em !important;
}
#ghTopTools693 button {
  appearance: none !important;
  min-width: 32px !important;
  min-height: 26px !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(211, 173, 75, 0.58) !important;
  border-radius: 7px !important;
  background: rgba(12, 15, 17, 0.78) !important;
  color: #f3e4b5 !important;
  font:
    850 0.68rem/1 system-ui,
    sans-serif !important;
}
#ghTopTools693 button.active {
  background: #b88b2f !important;
  color: #101010 !important;
  border-color: #f0d47b !important;
}
#ghTopLayout693 {
  min-width: 62px !important;
}
#topBar.score-collapsed #ghTopTools693 {
  display: none !important;
}

/* R706: the permanent header below owns score/speed geometry. */
/* Only gameplay presentation animations are paced. No menu/decision timeout. */
body[data-game-pace]:not([data-game-pace='1']) .shuffle-overlay.shuffling .sc1 {
  animation-duration: calc(0.45s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .shuffle-overlay.shuffling .sc2 {
  animation-duration: calc(0.45s * var(--hor-pace-factor)) !important;
  animation-delay: calc(0.05s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .shuffle-overlay.shuffling .sc3 {
  animation-duration: calc(0.5s * var(--hor-pace-factor)) !important;
  animation-delay: calc(0.1s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .shuffle-overlay.shuffling .sc4 {
  animation-duration: calc(0.42s * var(--hor-pace-factor)) !important;
  animation-delay: calc(0.08s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .shuffle-overlay.shuffling .sc5 {
  animation-duration: calc(0.48s * var(--hor-pace-factor)) !important;
  animation-delay: calc(0.12s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .deal-in {
  animation-duration: calc(0.28s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .table-nest-flip.is-reveal {
  animation-duration: calc(1.8s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .table-nest-flip.is-reveal::after {
  animation-duration: calc(1.8s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .claim-laid-card {
  animation-duration: calc(0.72s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .claim-laydown-layer.fade-out {
  transition-duration: calc(0.8s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .gh-nest-card {
  animation-duration: calc(0.45s * var(--hor-pace-factor)) !important;
}
body[data-game-pace]:not([data-game-pace='1']) .gh-nest-anim.out {
  transition-duration: calc(0.5s * var(--hor-pace-factor)) !important;
}

body[data-game-pace]:not([data-game-pace='1']) .big-trick-approved.is-showing .big-trick-plaque {
  animation-duration: calc(2.35s * var(--hor-pace-factor)) !important;
}

/* R706 runtime ownership: a permanent compact match header. */
#matchHeader706 {
  display: none;
  position: fixed;
  left: 8px;
  top: 6px;
  z-index: 2147483601;
  pointer-events: auto;
}
body.in-game #matchHeader706 {
  display: block !important;
}
#matchHeader706 #scoreRow {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  font:
    700 0.72rem/1.2 system-ui,
    sans-serif !important;
  color: #f3e4b5 !important;
  white-space: nowrap !important;
}
#matchHeader706 #scoreRow > span:not(#scoreSpeed701) {
  padding: 5px !important;
  border: 1px solid rgba(211, 173, 75, 0.65) !important;
  border-radius: 8px !important;
  background: rgba(12, 15, 17, 0.78) !important;
}
#matchHeader706 #scoreRow > .target-label,
#matchHeader706 #sandbagScore {
  display: none !important;
}
#matchHeader706 #scoreSpeed701 {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
#matchHeader706 #btnScoreCollapse {
  height: 29px !important;
  min-width: 26px !important;
  padding: 0 6px !important;
  pointer-events: auto !important;
}
body.in-game #topBar {
  position: fixed !important;
  top: 42px !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483500 !important;
}
body.in-game #topBar.score-collapsed {
  display: none !important;
}
body:not(.in-game) > #topBar {
  display: none !important;
}
#topBar #ghTopTools693 {
  display: flex !important;
}
body.in-game #bidOverlayHost {
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  transform: none !important;
  z-index: 2147483400 !important;
}
body.in-game #decisionConsole {
  visibility: visible !important;
}
@media (max-width: 430px) {
  #matchHeader706 {
    left: 4px !important;
    right: 4px !important;
  }
  #matchHeader706 #scoreRow {
    gap: 3px !important;
    font-size: 0.65rem !important;
  }
  #matchHeader706 #scoreSpeed701 {
    gap: 3px !important;
  }
  #matchHeader706 #scoreSpeed701 button {
    min-width: 28px !important;
    padding: 1px 5px !important;
    font-size: 0.65rem !important;
  }
}
/* Approved alpha art is preloaded, decoded before reveal, and precached offline. */
body.in-game #decisionConsole.decision-mode-bid:not(.hidden)::before {
  background: url('assets/images/bid-dock-transparent-r684.png') center/100% 100% no-repeat !important;
}

#headerClearance706 {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  pointer-events: none;
}
@media (orientation: landscape) {
  body.in-game #bidOverlayHost #decisionConsole.decision-mode-bid:not(.hidden) {
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(420px, calc(100vw - 8px)) !important;
  }
}

@media (orientation: portrait) {
  body.r706-bid-open #nestArea {
    translate: 0 var(--r706-nest-rise, 0px) !important;
    scale: var(--r706-nest-scale, 1) !important;
  }
}

/* TABLE-003 perspective correction: uniform scene paint; protected UI unchanged. */
@media (orientation: portrait) {
  body.in-game #hor-room-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: url('assets/table003/room-table-perspective.png') center top / cover no-repeat;
  }
  body.in-game #game .table-felt {
    background: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  body.in-game #game .table-felt::before,
  body.in-game #game .table-felt::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
  }
}

/* ROOK012 — explicit Last Trick header control + compact persistent popover. */
#portraitLastTrickButton {
  appearance: none !important;
  height: 29px !important;
  min-width: 42px !important;
  padding: 1px 6px !important;
  border: 1px solid rgba(211, 173, 75, 0.65) !important;
  border-radius: 8px !important;
  background: rgba(12, 15, 17, 0.78) !important;
  color: #f3e4b5 !important;
  font:
    850 0.6rem/1 system-ui,
    sans-serif !important;
  letter-spacing: 0.02em !important;
  pointer-events: auto !important;
}
#portraitLastTrickButton:active {
  transform: scale(0.97);
}
.portrait-last-trick-popover {
  position: fixed;
  top: 48px;
  right: 8px;
  z-index: 2147483600;
  width: 176px;
  padding: 22px 8px 8px;
  border: 1px solid rgba(211, 173, 75, 0.72);
  border-radius: 12px;
  background: rgba(9, 15, 12, 0.96);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.portrait-last-trick-popover.hidden {
  display: none !important;
}
.portrait-last-trick-close {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(211, 173, 75, 0.62);
  border-radius: 50%;
  background: rgba(22, 24, 18, 0.96);
  color: #f3e4b5;
  font:
    800 18px/20px system-ui,
    sans-serif;
}
.portrait-last-trick-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: center;
  justify-items: center;
}
.portrait-last-trick-mini-card {
  width: 36px;
  height: 52px;
  overflow: hidden;
  border-radius: 4px;
}
.portrait-last-trick-mini-card .card-face {
  width: 36px !important;
  height: 52px !important;
  min-width: 36px !important;
  min-height: 52px !important;
  transform: none !important;
  margin: 0 !important;
}
@media (orientation: landscape) {
  #portraitLastTrickButton,
  .portrait-last-trick-popover {
    display: none !important;
  }
}
@media (max-width: 390px) {
  #portraitLastTrickButton {
    min-width: 36px !important;
    padding: 1px 4px !important;
    font-size: 0.56rem !important;
  }
  .portrait-last-trick-popover {
    right: 5px;
    width: 168px;
  }
}

/* ROOK014 — phone-tested ROOK013 Last Trick popover placement refinement only.
   Smaller and higher/right over the upper-right wall plaque area. */
@media (orientation: portrait) {
  .portrait-last-trick-popover {
    top: 112px !important;
    right: 10px !important;
    width: 150px !important;
    padding: 18px 6px 6px !important;
    border-radius: 10px !important;
  }
  .portrait-last-trick-close {
    right: 3px !important;
    top: 2px !important;
    width: 21px !important;
    height: 21px !important;
    font-size: 16px !important;
    line-height: 18px !important;
  }
  .portrait-last-trick-cards {
    gap: 3px !important;
  }
  .portrait-last-trick-mini-card {
    width: 31px !important;
    height: 45px !important;
    border-radius: 3px !important;
  }
  .portrait-last-trick-mini-card .card-face {
    width: 31px !important;
    height: 45px !important;
    min-width: 31px !important;
    min-height: 45px !important;
  }
}
@media (orientation: portrait) and (max-width: 390px) {
  .portrait-last-trick-popover {
    right: 7px !important;
    width: 146px !important;
  }
}

/* ROOK019 — portrait Last Trick placement + simplified review faces only. */
@media (orientation: portrait) {
  .portrait-last-trick-popover {
    left: 48px !important;
    right: auto !important;
    top: 410px !important;
    width: 150px !important;
    min-height: 118px !important;
    padding: 18px 6px 6px !important;
    box-sizing: border-box !important;
  }
  .portrait-last-trick-cards {
    display: grid !important;
    grid-template-columns: 31px 31px 31px !important;
    grid-template-rows: 45px 45px 45px !important;
    gap: 2px 4px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .portrait-last-trick-mini-card {
    width: 31px !important;
    height: 45px !important;
    overflow: visible !important;
  }
  .portrait-last-trick-mini-card.seat-north {
    grid-column: 2;
    grid-row: 1;
  }
  .portrait-last-trick-mini-card.seat-west {
    grid-column: 1;
    grid-row: 2;
  }
  .portrait-last-trick-mini-card.seat-east {
    grid-column: 3;
    grid-row: 2;
  }
  .portrait-last-trick-mini-card.seat-south {
    grid-column: 2;
    grid-row: 3;
  }
  .portrait-last-simple-face {
    width: 31px;
    height: 45px;
    border-radius: 3px;
    background: #f4eedf;
    border: 1px solid rgba(25, 22, 16, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font:
      900 22px/1 system-ui,
      sans-serif;
    text-transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  }
  .portrait-last-simple-face.red {
    color: #e11d2e;
  }
  .portrait-last-simple-face.green {
    color: #0e8f3e;
  }
  .portrait-last-simple-face.yellow {
    color: #b49300;
  }
  .portrait-last-simple-face.black,
  .portrait-last-simple-face.rook {
    color: #0b0b0b;
  }
}

/* ROOK020 — compact table-plane Last Trick review. No container box. */
@media (orientation: portrait) {
  .portrait-last-trick-popover {
    left: 42px !important;
    right: auto !important;
    top: auto !important;
    bottom: 126px !important;
    width: 104px !important;
    height: 112px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  .portrait-last-trick-cards {
    position: absolute !important;
    inset: 0 !important;
    width: 104px !important;
    height: 112px !important;
    display: grid !important;
    grid-template-columns: 28px 28px 28px !important;
    grid-template-rows: 39px 39px 39px !important;
    column-gap: 3px !important;
    row-gap: 0 !important;
    justify-content: center !important;
    align-content: center !important;
    transform: perspective(220px) rotateX(14deg) !important;
    transform-origin: 50% 100% !important;
    pointer-events: none !important;
  }
  .portrait-last-trick-mini-card {
    width: 28px !important;
    height: 39px !important;
    overflow: visible !important;
  }
  .portrait-last-simple-face {
    width: 28px !important;
    height: 39px !important;
    border-radius: 3px !important;
    font-size: 20px !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.32) !important;
  }
  .portrait-last-trick-close {
    position: absolute !important;
    top: -8px !important;
    right: -7px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    line-height: 17px !important;
    pointer-events: auto !important;
  }
}

/* ROOK021 — direct screen tap coordinate readout. Diagnostic only; does not intercept taps. */
#horTapCoordinates021 {
  position: fixed !important;
  left: 50% !important;
  top: 8px !important;
  transform: translateX(-50%) !important;
  z-index: 2147483600 !important;
  pointer-events: none !important;
  background: rgba(8, 8, 10, 0.88) !important;
  color: #fff !important;
  border: 1px solid rgba(212, 175, 55, 0.8) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font:
    700 14px/1.1 system-ui,
    sans-serif !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
#horTapCoordinateMark021 {
  position: fixed !important;
  z-index: 2147483599 !important;
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
  transform: translate(-50%, -50%) !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7) !important;
}
#horTapCoordinateMark021::before,
#horTapCoordinateMark021::after {
  content: '';
  position: absolute;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#horTapCoordinateMark021::before {
  width: 26px;
  height: 1px;
}
#horTapCoordinateMark021::after {
  width: 1px;
  height: 26px;
}

/* ROOK022 — coordinate readout visibility repair. Keep diagnostic above every game layer. */
#horTapCoordinates021 {
  z-index: 2147483647 !important;
  top: 74px !important;
  padding: 9px 14px !important;
  background: #050505 !important;
  color: #fff !important;
  border: 2px solid #ffd51a !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.85) !important;
  font:
    900 18px/1.1 system-ui,
    sans-serif !important;
}
#horTapCoordinateMark021 {
  z-index: 2147483646 !important;
  border-color: #ffd51a !important;
  box-shadow:
    0 0 0 2px #050505,
    0 0 10px rgba(0, 0, 0, 0.8) !important;
}
#horTapCoordinateMark021::before,
#horTapCoordinateMark021::after {
  background: #ffd51a !important;
}

/* ROOK023 — owner-tapped exact center for the complete Last Trick group.
   Coordinate authority from physical-phone tap: X68 Y389 (CSS viewport coordinates). */
@media (orientation: portrait) {
  .portrait-last-trick-popover {
    left: 68px !important;
    top: 389px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ROOK024 — final Last Trick positioning repair.
   Physical Android authority: rendered center of the FOUR-CARD GROUP = clientX 68 / clientY 389.
   The shell and close button are not the measured/movable card group. */
@media (orientation: portrait) {
  .portrait-last-trick-popover {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483600 !important;
  }
  #portraitLastTrickGroup {
    position: fixed !important;
    left: 68px !important;
    top: 389px !important;
    right: auto !important;
    bottom: auto !important;
    width: 82px !important;
    height: 82px !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 50% !important;
    pointer-events: none !important;
  }
  #portraitLastTrickCards {
    position: absolute !important;
    inset: 0 !important;
    width: 82px !important;
    height: 82px !important;
    display: block !important;
    transform: perspective(240px) rotateX(12deg) !important;
    transform-origin: 50% 50% !important;
    pointer-events: none !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card {
    position: absolute !important;
    width: 26px !important;
    height: 36px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card.seat-north {
    left: 28px !important;
    top: 0 !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card.seat-west {
    left: 0 !important;
    top: 23px !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card.seat-east {
    left: 56px !important;
    top: 23px !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card.seat-south {
    left: 28px !important;
    top: 46px !important;
  }
  #portraitLastTrickCards .portrait-last-simple-face {
    width: 26px !important;
    height: 36px !important;
    border-radius: 3px !important;
    background: #f4eedf !important;
    border: 1px solid rgba(25, 22, 16, 0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font:
      900 19px/1 system-ui,
      sans-serif !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) !important;
  }
  .portrait-last-trick-close {
    position: fixed !important;
    left: 101px !important;
    top: 350px !important;
    right: auto !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    line-height: 17px !important;
  }
}
@media (orientation: landscape) {
  #portraitLastTrickGroup {
    display: none !important;
  }
}

/* ROOK025: remove inherited grid slots and disable retired debug visuals. */
@media (orientation: portrait) {
  #portraitLastTrickGroup {
    inset: auto !important;
    left: 68px !important;
    top: 389px !important;
    display: block !important;
  }
  #portraitLastTrickCards .portrait-last-trick-mini-card {
    grid-area: auto !important;
    transform: none !important;
  }
}
#horTapCoordinates021,
#horTapCoordinateMark021 {
  display: none !important;
}

/* ===== ROOK026 — locked Brain H numbered-card production assets =====
   Regular numbered faces are real PNG assets. Runtime owns only sizing,
   clipping, elevation and interaction. Premium bird cards remain unchanged. */
.card-face:not(.rook):not(.red2):not(.red1) {
  background: #f6edda;
  border-color: #b89249;
  padding: 0;
}
.card-face:not(.rook):not(.red2):not(.red1)::before {
  display: none;
}
.card-face .numbered-asset-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
}
.card-face .numbered-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
}
.card-face .numbered-card-fallback {
  position: absolute;
  inset: 8px 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
/* The asset owns the printed border/color identity; suppress legacy bars. */
.card-face .numbered-asset-stack ~ .c-bar,
.card-face .numbered-asset-stack .c-bar {
  display: none !important;
}

/* ROOK027 — portrait TABLE-003 reviewed played-card presentation. */
@media (orientation: portrait) {
  body.in-game #trickArea {
    contain: layout style !important;
    overflow: visible !important;
  }
  body.in-game #trickArea .trick-stack {
    overflow: visible !important;
  }
  body.in-game #trickArea .table003-played {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    overflow: visible !important;
  }
  .played-scene {
    width: 88px;
    height: 126px;
    transform: scale(var(--rook027-scale, 1));
    transform-origin: 0 0;
  }
  .played-plane,
  .played-orientation,
  .played-size {
    width: 88px;
    height: 126px;
    transform-origin: 44px 63px;
    overflow: visible;
  }
  .played-size {
    transform: scale(0.85);
  }
  html body.in-game #trickArea .table003-played .card-face {
    width: 88px !important;
    height: 126px !important;
    min-width: 88px !important;
    min-height: 126px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
    clip-path: none !important;
    border-radius: 7px !important;
  }
  html body.in-game #trickArea .table003-played .card-face:has(.numbered-card-img) {
    background: #f6edda !important;
    border: 0 !important;
    outline: none !important;
  }
  html body.in-game #trickArea .table003-played .card-face:has(.numbered-card-img)::before,
  html body.in-game #trickArea .table003-played .card-face:has(.numbered-card-img)::after {
    display: none !important;
  }
  .table003-played .trick-card-name {
    display: none !important;
  }
  .trick-flight-card .played-size .card-face {
    width: 88px !important;
    height: 126px !important;
    min-width: 88px !important;
    min-height: 126px !important;
    transform: none !important;
  }
}
@media (orientation: portrait) {
  html body .trick-flight-card .played-size .card-face:has(.numbered-card-img) {
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #f6edda !important;
    border: 0 !important;
    outline: none !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }
  html body .trick-flight-card .played-size .card-face:has(.numbered-card-img)::before,
  html body .trick-flight-card .played-size .card-face:has(.numbered-card-img)::after {
    display: none !important;
  }
}

/* ROOK028: asset faces fill their existing footprint; no legacy text inset. */
@media (orientation: portrait) {
  html body.in-game #trickArea .table003-played .card-face .c-stack.numbered-asset-stack,
  html body .trick-flight-card .played-size .card-face .c-stack.numbered-asset-stack {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}

/* ROOK029: accessible close target beside the locked Last Trick cards. */
@media (orientation: portrait) {
  #portraitLastTrickGroup > #portraitLastTrickClose {
    position: absolute !important;
    left: auto !important;
    right: -8px !important;
    top: -8px !important;
    bottom: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    z-index: 2 !important;
    color: #f3e4b5 !important;
    background: #121b14 !important;
    border: 1px solid #b89249 !important;
    border-radius: 50% !important;
    font:
      700 20px/1 system-ui,
      sans-serif !important;
  }
}

/* ROOK031: every Nest state shares the felt plane; flip stays inside that plane. */
@media (orientation: portrait) {
  body.in-game #nestArea .table-nest-pile {
    transform: matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.00115, 0, 0, 1, 0, 0, 0, 0, 1) rotate(-7deg) !important;
    transform-origin: 50% 50% !important;
    overflow: visible !important;
  }
  body.in-game #nestArea .card-back {
    box-sizing: border-box !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    outline: none !important;
    overflow: hidden !important;
  }
  body.in-game #nestArea .card-back::before,
  body.in-game #nestArea .card-back::after {
    display: none !important;
  }
}

/* LAST can be opened before the first trick; the locked mini-card layout is unchanged. */
@media (orientation: portrait) {
  #portraitLastTrickStatus031 {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 128px !important;
    padding: 6px !important;
    border: 1px solid #b89249 !important;
    border-radius: 6px !important;
    background: #121b14 !important;
    color: #f3e4b5 !important;
    font:
      600 12px/1.3 system-ui,
      sans-serif !important;
    transform: none !important;
    pointer-events: none !important;
  }
  #portraitLastTrickStatus031.hidden {
    display: none !important;
  }
}

/* ROOK033: approved Brain H artwork; crop only the reference image's outside margin.
   The image bytes are unchanged. The single gold keyline stays inside the card. */
.shuffle-card.wash-extra {
  display: none;
}
@media (orientation: portrait) {
  body.in-game #nestArea .card-back,
  body.in-game #shuffleOverlay .shuffle-card {
    background-image: url('assets/images/cardback-griffin-approved-133.png') !important;
    background-color: #151515 !important;
    background-size: 111.3% 111.9% !important;
    background-position: 58% 40.5% !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    outline: 0 !important;
    box-sizing: border-box !important;
  }
  body.in-game #shuffleOverlay {
    background: transparent !important;
    pointer-events: none !important;
  }
  body.in-game:has(#shuffleOverlay.shuffling:not(.hidden)) #nestArea {
    visibility: hidden !important;
  }
  body.in-game #shuffleOverlay .shuffle-stage {
    position: fixed !important;
    left: var(--rook033-wash-x) !important;
    top: var(--rook033-wash-y) !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
  }
  body.in-game #shuffleOverlay .shuffle-deck {
    position: absolute !important;
    left: -120px !important;
    top: -100px !important;
    width: 240px !important;
    height: 200px !important;
    margin: 0 !important;
    transform: scale(var(--rook033-wash-scale, 1)) !important;
    transform-origin: 120px 100px !important;
  }
  body.in-game #shuffleOverlay .shuffle-plane033 {
    position: absolute;
    width: 240px;
    height: 200px;
    transform: matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.00115, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50%;
    overflow: visible;
  }
  body.in-game #shuffleOverlay .shuffle-card {
    display: block !important;
    width: 74px !important;
    height: 106px !important;
    left: 50% !important;
    top: 50% !important;
    margin: -53px 0 0 -37px !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    animation: none !important;
  }
  body.in-game #shuffleOverlay.shuffling .shuffle-card {
    animation: rook033DealerWash var(--rook033-wash-duration, 1600ms) ease-in-out 0s 1 normal both !important;
  }
  body.in-game #shuffleOverlay .shuffle-label {
    display: none !important;
  }
  body.in-game.reduce-motion #shuffleOverlay.shuffling .shuffle-card {
    animation: none !important;
  }
}
@keyframes rook033DealerWash {
  0%,
  100% {
    transform: translate(var(--stack-x), var(--stack-y)) rotate(0deg);
  }
  18% {
    transform: translate(var(--wash-x), var(--wash-y)) rotate(var(--wash-r));
  }
  42% {
    transform: translate(var(--mix-x), var(--mix-y)) rotate(var(--mix-r));
  }
  65% {
    transform: translate(var(--wash-x), var(--mix-y)) rotate(var(--wash-r));
  }
  82% {
    transform: translate(var(--mix-x), var(--wash-y)) rotate(var(--mix-r));
  }
}

.shuffle-plane033 {
  display: contents;
}
@media (orientation: portrait) {
  body.in-game #shuffleOverlay .shuffle-plane033 {
    display: block;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc1 {
    --stack-x: 0px;
    --stack-y: 0px;
    --wash-x: -68px;
    --wash-y: -28px;
    --wash-r: -24deg;
    --mix-x: 48px;
    --mix-y: 20px;
    --mix-r: 18deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc2 {
    --stack-x: 0.6px;
    --stack-y: -0.5px;
    --wash-x: 64px;
    --wash-y: -22px;
    --wash-r: 27deg;
    --mix-x: -54px;
    --mix-y: 30px;
    --mix-r: -20deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc3 {
    --stack-x: 1.2px;
    --stack-y: -1px;
    --wash-x: -34px;
    --wash-y: 38px;
    --wash-r: 48deg;
    --mix-x: 62px;
    --mix-y: -12px;
    --mix-r: -39deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc4 {
    --stack-x: 1.8px;
    --stack-y: -1.5px;
    --wash-x: 24px;
    --wash-y: -42px;
    --wash-r: -18deg;
    --mix-x: -60px;
    --mix-y: -30px;
    --mix-r: 32deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc5 {
    --stack-x: 2.4px;
    --stack-y: -2px;
    --wash-x: -70px;
    --wash-y: 12px;
    --wash-r: -55deg;
    --mix-x: 38px;
    --mix-y: 32px;
    --mix-r: 24deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc6 {
    --stack-x: 3px;
    --stack-y: -2.5px;
    --wash-x: 62px;
    --wash-y: 24px;
    --wash-r: 58deg;
    --mix-x: -42px;
    --mix-y: -26px;
    --mix-r: -34deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc7 {
    --stack-x: 3.6px;
    --stack-y: -3px;
    --wash-x: -14px;
    --wash-y: -34px;
    --wash-r: 15deg;
    --mix-x: 52px;
    --mix-y: 2px;
    --mix-r: -47deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc8 {
    --stack-x: 4.2px;
    --stack-y: -3.5px;
    --wash-x: 38px;
    --wash-y: 32px;
    --wash-r: -38deg;
    --mix-x: -54px;
    --mix-y: 14px;
    --mix-r: 41deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc9 {
    --stack-x: 4.8px;
    --stack-y: -4px;
    --wash-x: -52px;
    --wash-y: -12px;
    --wash-r: 36deg;
    --mix-x: 24px;
    --mix-y: -38px;
    --mix-r: -17deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc10 {
    --stack-x: 5.4px;
    --stack-y: -4.5px;
    --wash-x: 52px;
    --wash-y: -34px;
    --wash-r: -46deg;
    --mix-x: -26px;
    --mix-y: 40px;
    --mix-r: 33deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc11 {
    --stack-x: 6px;
    --stack-y: -5px;
    --wash-x: -38px;
    --wash-y: 26px;
    --wash-r: -12deg;
    --mix-x: 68px;
    --mix-y: -6px;
    --mix-r: 52deg;
  }
}
@media (orientation: portrait) {
  #shuffleOverlay .sc12 {
    --stack-x: 6.6px;
    --stack-y: -5.5px;
    --wash-x: 28px;
    --wash-y: 4px;
    --wash-r: 64deg;
    --mix-x: -62px;
    --mix-y: 6px;
    --mix-r: -29deg;
  }
}

/* Decorative opening mugs retired; optional buy-a-beer gameplay remains available. */
.seat-glass {
  display: none !important;
}
/* Repaint only the fire opening with a smaller, dimmer sample of the same art.
   Table, room source image, stone surround and all foreground UI stay intact. */
#quietFire034 {
  display: none;
}
@media (orientation: portrait) {
  body.in-game #quietFire034 {
    display: block;
    position: fixed;
    width: 190px;
    height: 145px;
    z-index: 1;
    pointer-events: none;
    transform-origin: 0 0;
    overflow: hidden;
    border-radius: 2px;
    background: radial-gradient(ellipse at 50% 90%, #251306 0%, #0b0806 65%, #090705 100%);
    mask-image:
      linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
      linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect;
  }
  body.in-game #quietFire034 .quiet-fire-sample034 {
    position: absolute;
    inset: 0;
    background: url('assets/table003/room-table-perspective.png') -610px -390px / 875px 1797px
      no-repeat;
    transform: scale(1);
    transform-origin: 50% 100%;
    filter: brightness(0.72) saturate(0.85);
    opacity: 0.85;
  }
}

/* A small compositor-only fireplace glow follows the cabin ambience state. */
#fireGlow059 {
  display: none;
  position: fixed;
  width: 190px;
  height: 145px;
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
body.in-game #fireGlow059 {
  display: block;
}
body.in-game.cabin-fire-active041 #fireGlow059 {
  opacity: 0.46;
}
#fireGlow059 .fire-glow-pulse059 {
  position: absolute;
  inset: 0;
  opacity: 0.82;
  transform: scale(0.98);
  background:
    radial-gradient(
      ellipse 38% 34% at 52% 36%,
      rgba(255, 177, 75, 0.44) 0%,
      rgba(255, 119, 28, 0.22) 48%,
      transparent 100%
    ),
    radial-gradient(ellipse 66% 54% at 50% 46%, rgba(255, 104, 20, 0.16) 0%, transparent 100%);
  transform-origin: 52% 40%;
}
body.in-game.cabin-fire-active041 #fireGlow059 .fire-glow-pulse059 {
  animation: fire-glow-breathe059 2.9s ease-in-out infinite alternate;
}
@keyframes fire-glow-breathe059 {
  0% {
    opacity: 0.42;
    transform: scale(0.97) translateY(1px);
  }
  38% {
    opacity: 0.6;
    transform: scale(1.01) translateY(0);
  }
  72% {
    opacity: 0.47;
    transform: scale(0.99) translateY(-1px);
  }
  100% {
    opacity: 0.64;
    transform: scale(1.015) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game.cabin-fire-active041 #fireGlow059 .fire-glow-pulse059 {
    animation: none;
  }
}

/* ROOK035: brass marks recessed into the front-right wooden rail. */
@media (orientation: portrait) {
  body.in-game .in-game-leave {
    gap: 2px !important;
    width: 44px !important;
  }
  body.in-game .in-game-leave .leave-menu-btn,
  body.in-game .in-game-leave .leave-exit-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #bd985e !important;
    opacity: 0.88 !important;
    font-size: 24px !important;
    text-shadow:
      0 1px 0 rgba(15, 7, 2, 0.95),
      0 -1px 0 rgba(238, 203, 132, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.in-game .in-game-leave button:active {
    opacity: 1 !important;
    color: #d1b17a !important;
  }
  body.in-game.dealing035 #nestArea .table-nest-pile {
    visibility: hidden !important;
  }
}
.deal-flight035 {
  position: fixed;
  width: 50px;
  height: 72px;
  pointer-events: none;
  z-index: 2147483500;
  background: url('assets/images/cardback-griffin-approved-133.png') 58% 40.5% / 111.3% 111.9%
    no-repeat;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  transform-origin: 0 0;
  transform: scale(var(--deal-scale035))
    matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.00115, 0, 0, 1, 0, 0, 0, 0, 1) rotate(-7deg);
}

/* ROOK036: actual metal strokes inside a recessed groove, not tinted text. */
.in-game-leave .rail-inlay036 {
  display: none;
  width: 24px;
  height: 24px;
  overflow: visible;
  pointer-events: none;
}
@media (orientation: portrait) {
  body.in-game .in-game-leave .leave-menu-btn,
  body.in-game .in-game-leave .leave-exit-btn {
    text-shadow: none !important;
    opacity: 1 !important;
  }
  body.in-game .in-game-leave .rail-symbol-legacy036 {
    display: none;
  }
  body.in-game .in-game-leave .rail-inlay036 {
    display: block;
    width: 28px;
    height: 28px;
    transform: rotate(-16deg) scaleY(0.84);
  }
  body.in-game .in-game-leave button:active .rail-inlay036 {
    filter: brightness(1.12);
  }
}

@media (orientation: portrait) {
  body.in-game.dealing035 #nestArea .table-nest-pile {
    visibility: visible !important;
  }
}

/* Very thin orientation marks sit directly under printed 6s and 9s. */
.card-face .number-orientation-mark036 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.numbered-card-fallback[style*='flex'] ~ .number-orientation-mark036 {
  display: none !important;
}
.card-face .number-ambiguous036 {
  text-decoration-line: underline;
  text-decoration-thickness: 0.6px;
  text-underline-offset: 0.08em;
}

/* ROOK037: a compact screwed brass placard on the wood, portrait only. */
.rail-screw037 {
  display: none;
}
@media (orientation: portrait) {
  body.in-game .in-game-leave {
    width: 46px !important;
    height: 74px !important;
    gap: 0 !important;
    padding: 5px 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(
      110deg,
      #6a4822 0%,
      #b7965e 24%,
      #c7ab75 44%,
      #937039 73%,
      #67451f 100%
    ) !important;
    border: 1px solid #543719 !important;
    border-radius: 7px !important;
    box-shadow:
      inset 0 1px 0 #e2ca94,
      inset 0 -1px 0 #513516,
      0 2px 3px #241006b3 !important;
  }
  body.in-game .in-game-leave .leave-menu-btn,
  body.in-game .in-game-leave .leave-exit-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
  }
  body.in-game .in-game-leave .rail-inlay036 {
    width: 25px !important;
    height: 25px !important;
    transform: none !important;
  }
  body.in-game .in-game-leave .rail-screw037 {
    display: block;
    position: absolute;
    left: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e2c98f, #77603a);
    border: 1px solid #624722;
    box-shadow: 0 1px 1px #39230d;
    pointer-events: none;
  }
  body.in-game .in-game-leave .rail-screw037::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    height: 1px;
    background: #594225;
    transform: rotate(-30deg);
  }
  body.in-game .in-game-leave .screw-top037 {
    top: 4px;
  }
  body.in-game .in-game-leave .screw-bottom037 {
    bottom: 4px;
    left: auto;
    right: 4px;
  }
}

/* ROOK038: discreet brass marks on wood, full separate finger targets. */
@media (orientation: portrait) {
  body.in-game .in-game-leave {
    width: 44px !important;
    height: 94px !important;
    padding: 0 !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.in-game .in-game-leave .leave-menu-btn,
  body.in-game .in-game-leave .leave-exit-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    position: relative !important;
    border: 1px solid #71552c !important;
    border-radius: 15px 5px 15px 5px !important;
    background: linear-gradient(130deg, #66502e, #c3a56b 42%, #8c6b3b) !important;
    box-shadow:
      inset 0 1px 0 #ead5a0,
      0 2px 3px #160b07 !important;
  }
  body.in-game .in-game-leave .rail-inlay036 {
    width: 19px !important;
    height: 19px !important;
    opacity: 0.95;
  }
  body.in-game .in-game-leave .leave-menu-btn .rail-inlay036 {
    transform: rotate(-16deg) scaleY(0.84) !important;
  }

  body.in-game .in-game-leave button:active .rail-inlay036 {
    opacity: 1;
  }
}

/* ROOK039: flip in place; no reveal lift/reposition of the landed card. */
@media (orientation: portrait) {
  body.in-game #nestArea .table-nest-flip.is-reveal {
    animation: none !important;
    transform: none !important;
  }
}

.discard-return-card040 {
  background: url('assets/images/cardback-griffin-approved-133.png') 58% 40.5% / 111.3% 111.9%
    no-repeat;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  transform-origin: center;
}

.deal-flight035.face-up-flight040 {
  background: none !important;
}
.deal-flight035.face-up-flight040 > .card-face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

/* ROOK041: legal marks change without moving the portrait hand. */
@media (orientation: portrait) {
  body #myHand .card-face.playable,
  body #myHand .card-face.playable:hover,
  body #myHand .card-face.playable:active,
  body #myHand .card-face.disabled {
    transform: none !important;
  }
  body.gfx-playFly #trickArea .table003-played.latest {
    animation: none !important;
  }
}

/* Separate cabin ambience controls in existing Sound options. */
.cabin-volume-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.cabin-volume-option input[type='range'] {
  min-width: 120px;
  max-width: 100%;
  width: 180px;
}

/* Rook062 — quick, table-centered duel when the black Rook captures the Red 2.
   Reuses the approved premium card faces; no new card art or touch layer. */
.rook-bird-duel062 {
  position: fixed;
  inset: 0;
  z-index: 19990;
  display: block;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  isolation: isolate;
}
.rook-bird-duel062 img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(58px, 19vw, 104px);
  height: auto;
  aspect-ratio: 580/840;
  object-fit: cover;
  border-radius: 7px;
  box-shadow:
    0 5px 17px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(223, 187, 89, 0.62);
  will-change: transform, opacity, filter;
}
.rook-bird-duel062-black {
  animation: rookDuelBlack062 1.18s cubic-bezier(0.18, 0.72, 0.18, 1) both;
}
.rook-bird-duel062-red {
  animation: rookDuelRed062 1.18s cubic-bezier(0.2, 0.7, 0.18, 1) both;
}
.rook-bird-duel062-impact {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(70px, 24vw, 130px);
  aspect-ratio: 1;
  border: 2px solid rgba(240, 205, 105, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 22px rgba(233, 187, 70, 0.6),
    inset 0 0 18px rgba(255, 225, 143, 0.32);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18);
  animation: rookDuelImpact062 0.66s 0.43s ease-out both;
}
@keyframes rookDuelBlack062 {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 42vw), calc(-50% + 3vh)) rotate(-17deg) scale(0.68);
  }
  18% {
    opacity: 1;
    transform: translate(calc(-50% - 9vw), -50%) rotate(-7deg) scale(0.98);
  }
  43% {
    transform: translate(calc(-50% - 2vw), -50%) rotate(-3deg) scale(1.04);
  }
  59% {
    transform: translate(calc(-50% + 7vw), calc(-50% - 1vh)) rotate(9deg) scale(0.98);
  }
  76% {
    transform: translate(-50%, -50%) rotate(0) scale(1.07);
    filter: drop-shadow(0 0 12px rgba(228, 190, 87, 0.72));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
    filter: none;
  }
}
@keyframes rookDuelRed062 {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 42vw), calc(-50% + 3vh)) rotate(17deg) scale(0.68);
  }
  18% {
    opacity: 1;
    transform: translate(calc(-50% + 9vw), -50%) rotate(7deg) scale(0.98);
  }
  43% {
    transform: translate(calc(-50% + 2vw), -50%) rotate(3deg) scale(1.04);
  }
  59% {
    transform: translate(calc(-50% - 8vw), calc(-50% - 3vh)) rotate(-16deg) scale(0.98);
  }
  77% {
    opacity: 0.84;
    transform: translate(calc(-50% + 12vw), calc(-50% - 10vh)) rotate(42deg) scale(0.58);
    filter: saturate(0.72) brightness(0.82);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 21vw), calc(-50% - 15vh)) rotate(88deg) scale(0.12);
    filter: saturate(0.25) brightness(0.45);
  }
}
@keyframes rookDuelImpact062 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  28% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.32);
  }
}
body.reduce-motion .rook-bird-duel062 img,
body.reduce-motion .rook-bird-duel062-impact {
  animation-duration: 0.24s !important;
}
@media (prefers-reduced-motion: reduce) {
  .rook-bird-duel062 img,
  .rook-bird-duel062-impact {
    animation-duration: 0.24s !important;
  }
}

/* Persona access stays available while bidding, thinking, and after PASS. */
#botStyleTip.bot-style-tip {
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
.player-slot .name[data-botname],
.player-slot .seat-avatar-side[data-botname] {
  pointer-events: auto !important;
}
.player-slot > .bid-badge,
.player-slot > .seat-lead-tag {
  pointer-events: none !important;
}

/* HOLDER049 — replaces the rejected HOLDER047/048 block completely.
 * Both layers use identical pixels from the same unchanged asset.
 * Bed/back below live cards; clipped front face above the card bottoms.
 * No hand sizing, card positioning, Bid Box or landscape changes.
 */
@media (orientation: portrait) {
  body.in-game .game-room > .hand-area {
    --holder049-height: clamp(28px, 11.5vw, 60px);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  body.in-game .game-room > .hand-area > .hand-rail,
  body.in-game .game-room > .hand-area::after {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--holder049-height) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: url('assets/cardholder/holder047.png') 50% 49.2% / 104.458% 253.333% no-repeat !important;
    pointer-events: none !important;
  }
  body.in-game .game-room > .hand-area > .hand-rail {
    z-index: 0 !important;
  }
  body.in-game .game-room > .hand-area::after {
    content: '';
    display: block;
    /* Expose only the original wooden front face and bottom brass edge. */
    clip-path: polygon(0 58%, 4% 61%, 96% 61%, 100% 58%, 100% 100%, 0 100%);
    z-index: 10 !important;
  }
}

/* Nest capture: cards land flat on the felt, overlap as a small pile, then turn over. */
#ghNestAnim.gh-nest-table-drop {
  position: fixed;
  z-index: 80;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  perspective: 850px;
}
#ghNestAnim.gh-nest-table-drop.out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
#ghNestAnim .gh-nest-card {
  position: absolute;
  left: calc(var(--nest-w) / -2);
  top: calc(var(--nest-h) / -2);
  width: var(--nest-w);
  height: var(--nest-h);
  animation: gh-nest-flight 520ms cubic-bezier(0.16, 0.8, 0.25, 1) var(--nest-delay) both;
}
#ghNestAnim .gh-nest-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.48s cubic-bezier(0.2, 0.72, 0.25, 1);
}
#ghNestAnim .gh-nest-card-inner.revealed {
  transform: rotateY(180deg);
}
#ghNestAnim .gh-nest-card-back,
#ghNestAnim .gh-nest-card-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  backface-visibility: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.58);
}
#ghNestAnim .gh-nest-card-back {
  border: 2px solid #c9a44c;
  background: #10151d url('assets/images/cardback-raven.jpg') center/cover no-repeat;
}
#ghNestAnim .gh-nest-card-front {
  transform: rotateY(180deg);
}
#ghNestAnim .gh-nest-card-front .card-face {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  aspect-ratio: 58/84;
}
@keyframes gh-nest-flight {
  from {
    opacity: 0.45;
    transform: translate3d(calc(var(--nest-x) - 8px), -115px, 70px) rotateX(17deg)
      rotateZ(calc(var(--nest-rot) - 9deg)) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--nest-x), var(--nest-y), 0) rotateX(0) rotateZ(var(--nest-rot))
      scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ghNestAnim .gh-nest-card {
    animation-duration: 1ms;
  }
  #ghNestAnim .gh-nest-card-inner {
    transition-duration: 1ms;
  }
}

/* 063: animate the existing flame artwork within its registered fireplace opening. */
@media (orientation: portrait) {
  body.in-game.cabin-fire-active041 #quietFire034 .quiet-fire-sample034 {
    animation: hearthFlame063 1.7s ease-in-out infinite alternate;
  }
}
@keyframes hearthFlame063 {
  0% {
    transform: scale(1, 0.98);
    filter: brightness(0.65) saturate(0.9);
  }
  35% {
    transform: scale(1.015, 1.015);
    filter: brightness(0.86) saturate(1.05);
  }
  67% {
    transform: scale(0.995, 1);
    filter: brightness(0.74) saturate(0.95);
  }
  100% {
    transform: scale(1.01, 1.025);
    filter: brightness(0.9) saturate(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game.cabin-fire-active041 #quietFire034 .quiet-fire-sample034 {
    animation: none;
  }
}
body.reduce-motion #quietFire034 .quiet-fire-sample034 {
  animation: none !important;
}

@media (orientation: portrait) {
  body.in-game .in-game-leave button::before,
  body.in-game .in-game-leave button::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #5c4629;
    box-shadow: inset 0 1px 0 #ead4a5;
    pointer-events: none;
  }
  body.in-game .in-game-leave button::before {
    left: 4px;
    top: 5px;
  }
  body.in-game .in-game-leave button::after {
    right: 4px;
    bottom: 5px;
  }
}

body.he064-open {
  overflow: hidden;
}
body.he064-open .is-turn,
body.he064-open .lt-your-turn,
body.he064-open .to-bid,
body.he064-open .bid-high {
  visibility: hidden !important;
}
#houseEffects064 {
  position: fixed;
  inset: 0;
  z-index: 400000;
  background: rgba(8, 6, 4, 0.72);
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: auto;
}
#houseEffects064[hidden] {
  display: none !important;
}
.he064-shell {
  width: min(520px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1a120c;
  color: #f3e6cf;
  border-left: 1px solid #8a6a32;
  border-right: 1px solid #8a6a32;
  box-shadow: 0 0 0 2px #3a2a16 inset;
}
.he064-head,
.he064-foot {
  flex: 0 0 auto;
  padding: 12px 14px;
  background: #24180f;
  border-color: #8a6a32;
}
.he064-head {
  border-bottom: 1px solid #8a6a32;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.he064-head small {
  display: block;
  color: #c8b48a;
}
.he064-tabs {
  display: flex;
  gap: 6px;
}
.he064-tabs button,
.he064-foot button,
.he064-row button,
#openHouseEffects064,
#he064StopStage {
  background: #3b2a18;
  color: #f3e6cf;
  border: 1px solid #c4a15a;
  border-radius: 8px;
  padding: 8px 10px;
}
.he064-tabs button.is-on {
  background: #c4a15a;
  color: #1a120c;
}
.he064-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 14px;
  -webkit-overflow-scrolling: touch;
}
.he064-foot {
  border-top: 1px solid #8a6a32;
}
#he064Done {
  width: 100%;
  min-height: 44px;
  font-weight: 700;
}
.he064-row,
.he064-vols label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
#he064Stage {
  position: fixed;
  inset: 0;
  z-index: 399000;
  pointer-events: none;
}
#he064Stage .he064-card {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 92px;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.8);
}
#he064Stage .he064-red.is-in {
  opacity: 1;
  transform: translate(-70%, -50%) rotate(-8deg);
  transition:
    transform 0.45s ease,
    opacity 0.3s;
}
#he064Stage .he064-black.is-in {
  opacity: 1;
  transform: translate(-30%, -50%) rotate(8deg);
  transition:
    transform 0.45s ease,
    opacity 0.3s;
}
#he064Stage.is-fight .he064-card {
  transform: translate(-50%, -50%) rotate(0);
}
#he064StopStage {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}
#openHouseEffects064 {
  margin: 10px 0;
}

/* 067: recess the two right-rail fittings only. Visible plate about 30% smaller.
   Symbols stay the existing SVG inlays. Hit area stays 44px. No other layout moves. */
body.in-game .in-game-leave .leave-menu-btn,
body.in-game .in-game-leave .leave-exit-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}
body.in-game .in-game-leave .leave-menu-btn::before,
body.in-game .in-game-leave .leave-exit-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31px;
  height: 31px;
  transform: translate(-50%, -50%);
  border-radius: 8px 4px 8px 4px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 14% 16%, rgba(92, 68, 34, 0.95) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 86% 16%, rgba(92, 68, 34, 0.95) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 14% 84%, rgba(92, 68, 34, 0.95) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 86% 84%, rgba(92, 68, 34, 0.95) 0 1.1px, transparent 1.5px),
    linear-gradient(
      160deg,
      rgba(54, 36, 18, 0.62),
      rgba(22, 12, 6, 0.88) 62%,
      rgba(42, 28, 14, 0.72)
    );
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.78),
    inset 0 -1px 0 rgba(214, 184, 128, 0.26),
    inset 0 0 0 1px rgba(74, 52, 24, 0.95);
}
body.in-game .in-game-leave .leave-menu-btn .rail-inlay036,
body.in-game .in-game-leave .leave-exit-btn .rail-inlay036 {
  position: relative;
  z-index: 1;
  width: 13px !important;
  height: 13px !important;
}
body.in-game .in-game-leave .leave-menu-btn:active::before,
body.in-game .in-game-leave .leave-exit-btn:active::before {
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, 0.86),
    inset 0 0 0 1px rgba(74, 52, 24, 0.95);
}

/* 069: engraved rail symbols; no plates, rivets, or raised fittings. */
@media (orientation: portrait) {
  body.in-game .in-game-leave {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 44px !important;
    height: 88px !important;
  }
  body.in-game .in-game-leave .leave-menu-btn,
  body.in-game .in-game-leave .leave-exit-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
  }
  body.in-game .in-game-leave .leave-menu-btn::before,
  body.in-game .in-game-leave .leave-menu-btn::after,
  body.in-game .in-game-leave .leave-exit-btn::before,
  body.in-game .in-game-leave .leave-exit-btn::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }
  body.in-game .in-game-leave .rail-screw037 {
    display: none !important;
  }
  body.in-game .in-game-leave .leave-menu-btn .rail-inlay036,
  body.in-game .in-game-leave .leave-exit-btn .rail-inlay036 {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0.87 !important;
    transform: rotate(-16deg) scaleY(0.84) !important;
    filter: drop-shadow(0 1px 0 rgba(17, 8, 2, 0.7)) !important;
    pointer-events: none !important;
  }
  body.in-game .in-game-leave button:active .rail-inlay036 {
    opacity: 1 !important;
  }
}

/* 070 phone review: lower upper engraving only, soften brass, preserve arrow. */
@media (orientation: portrait) {
  body.in-game .in-game-leave .leave-menu-btn .rail-inlay036 {
    transform: translateY(8px) scaleY(0.88) !important;
  }
  body.in-game .in-game-leave .leave-exit-btn .rail-inlay036 {
    transform: rotate(-16deg) scaleY(0.84) !important;
  }
  body.in-game .in-game-leave .rail-inlay036 {
    opacity: 0.78 !important;
    filter: drop-shadow(0 1px 0 rgba(25, 12, 4, 0.45)) !important;
  }
}

/* 074: House Effects modal containment, mobile layout and reliable tap targets. */
body.he064-open #houseEffects064 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(5, 4, 3, 0.94) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}
body.he064-open #houseEffects064[hidden] {
  display: none !important;
}
#houseEffects064,
#houseEffects064 * {
  box-sizing: border-box;
}
#houseEffects064 .he064-shell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(540px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  transform: none !important;
  background: #1a120c !important;
  color: #f3e6cf !important;
  box-shadow:
    0 0 0 1px #8a6a32 inset,
    0 15px 65px #000 !important;
}
#houseEffects064 .he064-head {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  min-height: 70px !important;
}
#houseEffects064 .he064-head > div:first-child {
  flex: 1 1 130px;
}
#houseEffects064 .he064-tabs {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#houseEffects064 .he064-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 16px 22px !important;
  overscroll-behavior: contain !important;
}
#houseEffects064 .he064-foot {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom)) !important;
  background: #24180f !important;
  z-index: 1 !important;
}
#houseEffects064 button,
#houseEffects064 select {
  position: relative !important;
  min-height: 44px !important;
  max-width: 100%;
  font: inherit;
  touch-action: manipulation;
  cursor: pointer;
}
#houseEffects064 .he064-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(196, 161, 90, 0.22);
  margin: 0 !important;
}
#houseEffects064 .he064-row > select {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  background: #291d12;
  color: #f3e6cf;
  border: 1px solid #a78a54;
  border-radius: 7px;
  padding: 6px;
}
#houseEffects064 .he064-row > button:first-of-type {
  grid-column: 2;
  grid-row: 2;
}
#houseEffects064 .he064-row > button:last-of-type {
  grid-column: 3;
  grid-row: 2;
}
#houseEffects064 .he064-vols label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}
#houseEffects064 .he064-vols input {
  max-width: 55vw;
}
#houseEffects064 [data-he-pane][hidden] {
  display: none !important;
}
#houseEffects064 [data-he-pane='animations'] button {
  display: block;
  width: 100%;
  margin: 10px 0;
  text-align: left;
}
@media (max-width: 380px) {
  #houseEffects064 .he064-head {
    padding: 9px 12px !important;
  }
  #houseEffects064 .he064-body {
    padding: 10px 12px !important;
  }
  #houseEffects064 .he064-tabs button {
    padding: 7px 9px;
  }
}

/* 747: Scoreboard owns portrait presentation; controls restore on dismissal.
   Laid Down and frozen landscape deliberately retain their existing layout. */
@media (orientation: portrait) {
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:has(#scoreModal:not(.hidden):not(.showing-remaining)) #matchHeader706 * {
    pointer-events: none !important;
  }
}

/* 845: bound the complete QR and its four-module white quiet zone to the viewport. */
body #qrBox {
  height: 100dvh !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 48px 18px 18px !important;
  overflow: hidden;
  align-items: center;
  justify-items: center;
}
#qrGraphic845 {
  width: min(100%, 420px, calc(100dvh - 200px));
  aspect-ratio: 1;
  background: white;
  padding: 16px;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}
#qrGraphic845 canvas,
#qrGraphic845 img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
}
#qrBox .qr-info845 {
  text-align: center;
  min-width: 0;
}
#qrBox .qr-info845 h2 {
  color: #000;
  font: 700 24px/1.2 system-ui;
  margin: 0 0 10px;
}
#qrBox .option-hint {
  font: 600 16px/1.35 system-ui;
  margin: 8px 0;
  max-width: 340px;
}
#qrBox #closeQrBtn {
  width: 44px !important;
  height: 44px !important;
  top: max(4px, env(safe-area-inset-top));
  right: max(4px, env(safe-area-inset-right));
  font-size: 30px;
}
@media (orientation: landscape) {
  body #qrBox {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 16px max(54px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)) !important;
    gap: 24px;
  }
  #qrGraphic845 {
    width: min(100%, 420px, calc(100dvh - 32px));
  }
  #qrBox .qr-info845 {
    justify-self: start;
  }
}