html {
  max-width: 100%;
  overflow-x: hidden;
}

.room-ranking-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.room-ranking-picker button {
  display: grid;
  gap: 0.2rem;
  text-align: left;
}

.room-ranking-picker button.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.room-ranking-picker small,
.ranked-result-panel span {
  color: var(--ink-muted);
}

.ranked-result-panel {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
}

.ranked-result-panel[hidden] {
  display: none;
}

.ranking-history {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

@media (max-width: 520px) {
  .room-ranking-picker {
    grid-template-columns: 1fr;
  }
}

.room-role-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid rgba(249, 215, 127, 0.28);
  border-radius: 14px;
}

.room-role-choice legend {
  padding: 0 0.3rem;
  font-weight: 800;
}

.room-role-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.room-seat-controls,
.room-table-talk,
.table-talk-panel {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(249, 215, 127, 0.24);
  border-radius: 14px;
  background: rgba(7, 30, 30, 0.56);
}

.room-seat-controls > div,
.room-quick-phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.room-seat-controls button {
  display: grid;
  min-width: 92px;
  gap: 0.1rem;
}

.room-seat-controls button[aria-pressed="true"] {
  outline: 2px solid #f9d77f;
}

.room-table-talk ul,
.table-talk-panel ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-table-talk li,
.table-talk-panel li {
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
}

.table-talk-panel {
  margin: 0 auto 0.65rem;
  width: min(100%, 760px);
}

.spectator-hand-note {
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(249, 215, 127, 0.42);
  border-radius: 14px;
  text-align: center;
}

.auction-panel {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(245, 193, 92, 0.42);
  border-radius: 14px;
  background: rgba(16, 44, 38, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auction-panel__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.auction-panel__status span {
  color: var(--honey-gold, #f2c15f);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auction-panel__status strong {
  color: #fff9df;
  font-size: 0.86rem;
  text-align: right;
}

.bid-ladder,
.auction-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.bid-ladder span {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.bid-ladder span.is-past {
  opacity: 0.42;
  text-decoration: line-through;
}

.bid-ladder span.is-current {
  background: #f2c15f;
  color: #15382f;
}

.auction-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.auction-actions button {
  min-height: 34px;
  padding: 5px 7px;
}

.trump-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.called-trump {
  display: grid;
  min-width: 62px;
  min-height: 82px;
  place-items: center;
  padding: 6px;
  border: 1px solid rgba(245, 193, 92, 0.35);
  border-radius: 10px;
  background: rgba(10, 35, 29, 0.84);
  color: #fff8dc;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

.is-auction-setup .forty-fives-zones,
.is-auction-setup .turn-action-bar {
  display: none;
}

@media (max-width: 620px) {
  .auction-panel {
    margin: 4px 0;
    padding: 7px;
  }

  .auction-panel__status {
    display: grid;
    gap: 2px;
  }

  .auction-panel__status strong {
    font-size: 0.76rem;
    text-align: left;
  }

  .bid-ladder,
  .auction-actions {
    gap: 4px;
    margin-top: 5px;
  }

  .auction-actions button {
    min-height: 30px;
    padding: 3px;
    font-size: 0.72rem;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background: #efe2ca;
  color: #241b12;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

button,
a,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.game-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 8px;
}

.landing-shell,
.game-surface {
  overflow: hidden;
  border: 1px solid rgb(74 50 23 / 0.24);
  border-radius: 8px;
  background: #123f2b;
  box-shadow: 0 20px 44px rgb(54 33 12 / 0.22);
}

.game-surface {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  padding: 12px;
  overflow: hidden;
  color: #fff4d6;
  background: linear-gradient(180deg, #071711, #0b3022);
}

body.buzz-table-honey-teal .game-surface,
body.buzz-table-honey-teal .landing-shell {
  background: #061f24 var(--buzz-honey-teal-table) center / 420px repeat;
}

.game-surface[hidden],
.landing-shell[hidden] {
  display: none;
}

.hero-copy {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  min-height: calc(100vh - 20px);
  align-content: start;
  overflow: hidden;
  padding: 12px;
  background: #092719;
}

.hero-depth-bg,
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-depth-bg {
  z-index: 0;
  opacity: 0.92;
  transform: scale(1.06);
}

.hero-bg {
  z-index: 1;
  opacity: 0.42;
  mix-blend-mode: screen;
}

.hero-copy::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    radial-gradient(circle at 50% 42%, rgb(255 226 148 / 0.06), transparent 34%),
    linear-gradient(180deg, rgb(8 18 12 / 0.26), rgb(7 30 21 / 0.18) 42%, rgb(8 20 14 / 0.76));
  pointer-events: none;
}

.hero-copy > :not(.hero-depth-bg, .hero-bg) {
  position: relative;
  z-index: 3;
}

.hero-commandbar,
.play-toolbar,
.top-actions,
.hero-branding,
.hero-utilities,
.landing-secondary-actions,
.play-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.hero-commandbar,
.play-toolbar {
  justify-content: space-between;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hero-commandbar {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  overflow-x: auto;
  justify-content: flex-start;
  min-height: 76px;
  padding: 8px;
  border: 1px solid rgb(255 238 190 / 0.22);
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(3 20 17 / 0.96), rgb(3 31 23 / 0.92));
  box-shadow: 0 18px 38px rgb(0 0 0 / 0.34);
  scrollbar-width: thin;
}

.hero-commandbar,
.hero-title-lane,
.hero-landing-actions,
.buzz-footer--landing {
  min-width: 0;
  max-width: 100%;
}

.hero-branding {
  flex: 0 0 auto;
}

.hero-commandbar > * {
  flex: 0 0 auto;
}

.hero-home-link,
.bee-link,
.buzz-footer__mark,
.play-footer__home,
.provenance-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe59a, #f4b93b);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.3);
  overflow: hidden;
}

.hero-home-link img,
.bee-link img,
.buzz-footer__mark img,
.play-footer__home img,
.provenance-icon img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.provenance-icon img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.hero-commandbar :is(.hero-home-link, .provenance-icon) {
  width: 52px;
  height: 52px;
}

.hero-commandbar .hero-home-link img {
  width: 44px;
  height: 44px;
}

.hero-commandbar .provenance-icon img {
  width: 52px;
  height: 52px;
}

.hero-title-lane {
  position: relative;
  display: grid;
  align-items: end;
  width: 100%;
  min-height: clamp(180px, 24vh, 300px);
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgb(255 226 148 / 0.34);
  border-radius: 8px;
  background: #0b2c1f;
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.28);
}

.game-titlemark {
  display: block;
  height: auto;
}

.game-titlemark--landing {
  position: relative;
  z-index: 1;
  width: auto;
  height: 250px;
  max-width: min(50vw, calc(100% - 24px));
  margin: clamp(12px, 2.5vw, 26px);
  border-radius: 32px;
  object-fit: cover;
  object-position: left bottom;
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.42));
}

.game-titlemark--compact {
  width: min(230px, 30vw);
  max-height: 66px;
  object-fit: contain;
  object-position: left center;
}

.hero-title-stage__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-title-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.12) 58%, rgb(0 0 0 / 0.3));
}

.hero-landing-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 8px;
  background: rgb(5 18 13 / 0.74);
  backdrop-filter: blur(8px);
}

.setup-label,
.mode-description,
.title-block p,
.module-panel p {
  margin: 0;
}

.setup-label {
  color: #f8d464;
  font-size: 0.88rem;
  font-weight: 950;
  text-transform: uppercase;
}

.mode-description {
  max-width: 68ch;
  color: #fff1c7;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.mode-picker,
.opponent-picker,
.variant-picker {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-landing-actions > .mode-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mode-picker > button:nth-child(-n + 2) {
  grid-column: span 3;
}

.mode-picker > button:nth-child(n + 3) {
  grid-column: span 2;
}

.opponent-picker {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

button,
.landing-secondary-actions a,
.daily-banner--toolbar {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgb(255 230 164 / 0.28);
  border-radius: 8px;
  background: #fff8e8;
  color: #18211b;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.rules-button,
.music-settings-button,
.icon-button {
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.25rem;
}

.hero-utilities > button {
  border-color: rgb(112 74 10 / 0.5);
  background: linear-gradient(180deg, #ffe59a, #f4b93b);
}

.account-button {
  min-width: 152px;
  min-height: 56px;
  color: #fff8e8;
  background: rgb(255 248 232 / 0.12);
  box-shadow: inset 0 0 24px rgb(255 255 255 / 0.05), 0 10px 24px rgb(0 0 0 / 0.22);
}

#dailyChallengeButton {
  margin-left: auto;
}

.mode-picker button.is-active,
.opponent-picker button.is-active,
.variant-picker button.is-active,
.primary-action,
.daily-banner {
  background: #f8d464;
}

.mode-picker button,
.opponent-picker button,
.variant-picker button {
  min-height: 50px;
  font-size: 1.02rem;
}

.start-game-button {
  justify-self: stretch;
  min-height: 54px;
  font-size: 1.05rem;
  border-color: rgb(147 255 172 / 0.52);
  background: linear-gradient(180deg, #8ff0a0, #18a85a);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.42), 0 12px 24px rgb(0 0 0 / 0.24);
}

.opponent-roster-panel,
.score-strip div,
.records-panel,
.module-panel {
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 8px;
  background: rgb(4 18 14 / 0.82);
}

.opponent-roster-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  width: 100%;
  min-width: 0;
  align-items: center;
  padding: 12px;
}

.opponent-roster-heading,
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.opponent-roster-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  grid-column: 1;
}

.opponent-roster-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #fff8e8;
  font-weight: 950;
}

.opponent-roster-label {
  width: 100%;
  color: #fff1c7;
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.opponent-avatar {
  display: inline-block;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border: 2px solid #ffe59a;
  border-radius: 50%;
  background-image: var(--avatar-image);
  background-position: var(--avatar-position);
  background-repeat: no-repeat;
  background-size: 400% 500%;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.34);
}

.opponent-avatar--tiny {
  width: 42px;
  height: 42px;
}

.opponent-avatar--medium {
  width: 62px;
  height: 62px;
}

.opponent-roster-panel p,
.module-panel p,
.room-status {
  color: #f6dfaa;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.opponent-roster-panel p {
  grid-column: 1;
}

.opponent-roster-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 58px;
  background: #f8d464;
}

.account-profile-body,
.profile-section {
  display: grid;
  gap: 10px;
}

.profile-section {
  padding: 12px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 10px;
  background: rgb(4 18 14 / 0.62);
}

.profile-section :is(h3, p) {
  margin: 0;
}

.music-intent-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.35fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 8px;
  background: rgb(4 18 14 / 0.82);
}

.music-intent-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(116px, 1fr));
  gap: 8px;
  min-width: 0;
}

.music-intent-controls--table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.music-intent-button {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 50px;
  white-space: normal;
  text-align: center;
}

.music-intent-button span,
.music-intent-button small {
  display: block;
  line-height: 1.05;
}

.music-intent-button small {
  color: #5f5232;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.music-intent-button.is-active {
  border-color: rgb(112 74 10 / 0.5);
  background: #f8d464;
}

.music-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.play-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  min-height: 58px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid rgb(255 230 164 / 0.18);
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(7 24 18 / 0.96), rgb(16 58 39 / 0.92));
  scrollbar-width: thin;
}

.play-toolbar > * {
  flex: 0 0 auto;
}

.play-toolbar .bee-link {
  width: 44px;
  height: 44px;
}

.play-toolbar .bee-link img {
  width: 38px;
  height: 38px;
}

.play-toolbar .title-block {
  min-width: 188px;
}

.play-toolbar .game-titlemark--compact {
  width: min(188px, 24vw);
  max-height: 44px;
}

.play-toolbar button,
.play-toolbar .daily-banner--toolbar {
  min-height: 38px;
  padding: 6px 10px;
}

.play-toolbar .rules-button,
.play-toolbar .music-settings-button,
.play-toolbar .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  font-size: 1rem;
}

.daily-banner {
  display: grid;
  align-content: center;
  min-width: 230px;
  min-height: 58px;
  margin-left: auto;
  text-align: center;
}

.daily-banner strong,
.daily-banner span {
  display: block;
  line-height: 1.05;
}

.daily-banner span {
  font-size: 0.78rem;
}

.title-block {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 240px;
}

.title-block p {
  color: #dcc797;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.top-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.daily-banner--toolbar {
  display: inline-flex;
  align-items: center;
  min-width: 178px;
  background: #f8d464;
}

.score-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.score-strip div {
  min-width: 0;
  padding: 7px 9px;
}

.score-strip span,
.panel-heading span,
.module-checklist span {
  display: block;
  color: #dcc797;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.score-strip strong,
.panel-heading strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fff8e8;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.1;
}

.completion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgb(248 212 100 / 0.72);
  border-radius: 6px;
  color: #fff4d6;
  background: rgb(30 80 49 / 0.94);
}

.completion-panel span {
  display: block;
  margin: 0;
  color: #dcc797;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.completion-panel p {
  margin: 0;
  color: #fff4d6;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
}

.completion-panel strong {
  display: block;
  color: #fff8e8;
  font-size: 0.92rem;
}

.completion-panel button {
  min-height: 34px;
  padding: 5px 12px;
}

.seat-status-rail {
  display: grid;
  grid-template-columns: repeat(var(--seat-columns, 2), minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.seat-status-rail[data-seat-count="3"],
.seat-status-rail[data-seat-count="4"] {
  --seat-columns: 4;
}

.seat-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 6px;
  background: rgb(3 24 18 / 0.78);
}

.seat-status-card.is-current {
  border-color: rgb(248 212 100 / 0.76);
  background: rgb(34 72 46 / 0.86);
}

.seat-status-card__identity,
.seat-status-card__metrics {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.seat-status-card__identity strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-status-card__identity span,
.seat-status-card__metrics {
  color: #dcc797;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.seat-status-card__metrics {
  justify-content: flex-end;
  white-space: nowrap;
}

.seat-status-card__metrics b {
  color: #fff8e8;
}

.seat-status-card__avatar {
  width: 23px;
  min-width: 23px;
  height: 23px;
}

.module-board {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(260px, 0.75fr);
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgb(255 230 164 / 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #0b2c20, #061913 58%, #0c3726);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.02);
}

.module-panel {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.module-panel--table {
  grid-row: span 3;
}

.module-panel--status {
  grid-column: 2;
  grid-row: 1;
}

.module-board .module-panel:not(.module-panel--table):not(.module-panel--status) {
  min-height: 0;
  max-height: 78px;
  align-content: center;
}

.module-board .module-panel:not(.module-panel--table):not(.module-panel--status) > :not(.panel-heading) {
  display: none;
}

.card-row,
.hand-actions,
.bid-row,
.chat-compose {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.turn-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgb(248 212 100 / 0.28);
  border-radius: 6px;
  background: rgb(20 62 40 / 0.76);
}

.turn-action-bar p {
  margin: 0;
  color: #fff4d6;
  font-size: 0.78rem;
  font-weight: 750;
}

.turn-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 6px;
}

.turn-action-buttons button {
  min-height: 32px;
  padding: 4px 10px;
}

.hand-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  max-height: 176px;
  overflow: visible;
}

.hand button,
.card-row button {
  min-height: auto;
  padding: 3px;
  background: transparent;
}

.hand button.is-legal {
  border-color: #7df0bd;
  box-shadow: 0 0 0 3px rgb(125 240 189 / 0.16);
}

.hand button.is-suggested {
  border-color: #ffd65c;
  box-shadow: 0 0 0 4px rgb(255 214 92 / 0.22), 0 12px 24px rgb(0 0 0 / 0.22);
  transform: translateY(-3px);
}

.hand button.is-selected {
  z-index: 2;
  border-color: #ffd65c;
  box-shadow: 0 0 0 3px #1d1308, 0 0 0 6px #ffd65c, 0 14px 24px rgb(0 0 0 / 0.32);
  transform: translateY(-8px) scale(1.025);
}

.hand button.is-selected:focus-visible {
  outline: 3px solid #fff8d3;
  outline-offset: 7px;
}

.hand button.is-locked {
  opacity: 0.52;
  filter: saturate(0.55);
}

.module-board .buzz-card::after,
.module-board .buzz-zone::after,
.module-board .buzz-board-cell::after,
.module-board .buzz-point::after {
  content: none !important;
}

.dice-slot {
  min-height: 68px;
}

.timer-track {
  height: 16px;
  overflow: hidden;
  border: 1px solid rgb(255 230 164 / 0.24);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.24);
}

.timer-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7df0bd, #f8d464);
}

.bet-control {
  display: grid;
  gap: 8px;
  color: #fff8e8;
  font-weight: 850;
}

.chat-log,
.leaderboard-panel,
.module-checklist {
  display: grid;
  gap: 6px;
}

.chat-log {
  min-height: 76px;
  max-height: 110px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.chat-compose {
  grid-template-columns: minmax(0, 1fr) auto;
}

.chat-compose input {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgb(255 230 164 / 0.28);
  border-radius: 8px;
  background: #fff8e8;
}

.leaderboard-panel ol {
  margin: 0;
  padding-left: 22px;
  color: #fff8e8;
  font-weight: 750;
}

.records-panel {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  overflow: hidden;
}

.music-library-list,
.opponent-dialog .dialog-body {
  display: grid;
  gap: 8px;
}

.music-library-summary,
.music-playlist-draft,
.music-lab-callout {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(74 50 23 / 0.16);
  border-radius: 8px;
  background: rgb(248 212 100 / 0.16);
}

.music-library-summary p,
.music-playlist-draft p,
.music-lab-callout p {
  margin: 0;
  color: #352f22;
  font-weight: 750;
}

.music-library-summary small {
  color: #6b5625;
  font-weight: 800;
}

.music-playlist-draft,
.music-lab-callout {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.music-library-list article,
.opponent-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.08);
}

.music-library-list article {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgb(74 50 23 / 0.16);
  background: #fffdf8;
  color: #29242a;
}

.music-library-list span,
.music-library-list small {
  display: block;
  color: #4c463a;
  font-weight: 750;
}

.music-library-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.music-library-actions button {
  min-height: 36px;
}

.opponent-choice span {
  display: grid;
  gap: 4px;
  color: #18211b;
}

.opponent-choice small {
  display: block;
  color: #4c463a;
  font-weight: 700;
}

.opponent-choice input {
  position: absolute;
  opacity: 0;
}

.opponent-choice.is-active {
  border-color: #f8d464;
  box-shadow: inset 0 0 0 2px rgb(248 212 100 / 0.28);
}

.play-footer,
.buzz-footer {
  overflow-x: auto;
  padding: 10px;
  border: 1px solid rgb(255 230 164 / 0.16);
  border-radius: 8px;
  background: rgb(2 10 10 / 0.48);
}

.play-footer--minimal {
  display: grid;
  width: 100%;
  justify-content: center;
  place-items: center;
  min-height: 50px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.play-footer--minimal .play-footer__home {
  width: 48px;
  height: 48px;
}

.play-footer--minimal .play-footer__home img {
  width: 42px;
  height: 42px;
}

.buzz-footer--landing {
  display: grid;
  justify-self: stretch;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  place-items: center;
}

.landing-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-secondary-actions :is(button, a) {
  display: inline-grid;
  min-height: 58px;
  place-items: center;
  color: #fff8e8;
  background: rgb(255 255 255 / 0.06);
}

.collection-dialog {
  box-sizing: border-box;
  width: min(820px, calc(100vw - 24px));
}

.collection-status,
.collection-notice,
.collection-wallet,
.collection-card,
.collection-footnote {
  margin: 0;
  padding: 14px;
  border: 1px solid rgb(70 63 51 / 0.18);
  border-radius: 8px;
  background: #fffdf8;
  color: #29242a;
}

.collection-notice,
.collection-card > div {
  display: grid;
  gap: 8px;
}

.collection-notice p,
.collection-card p,
.collection-footnote {
  margin: 0;
  color: #514a3e;
  line-height: 1.45;
}

.collection-wallet,
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collection-wallet span {
  display: grid;
  gap: 3px;
}

.collection-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.collection-card.is-equipped {
  border-color: #28745d;
  box-shadow: inset 0 0 0 2px rgb(40 116 93 / 0.18);
}

.collection-card img {
  width: 78px;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 7px 16px rgb(0 0 0 / 0.2);
}

.collection-dialog h3 {
  margin: 1rem 0 0.5rem;
}

.collection-card--audio {
  min-height: 8.25rem;
}

.collection-audio-glyph {
  display: grid;
  place-items: center;
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(13, 70, 68, 0.12);
  color: #0d4644;
  font-size: 2rem;
}

.collection-card button,
.collection-notice button {
  min-height: 44px;
}

.collection-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collection-card-actions button {
  flex: 1 1 8rem;
}

.collection-card button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 620px) {
  .landing-secondary-actions,
  .collection-wallet {
    grid-template-columns: 1fr 1fr;
  }

  .collection-grid {
    grid-template-columns: 1fr;
  }

  .collection-card {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 10px;
  }

  .collection-card img {
    width: 60px;
  }
}

.room-dialog {
  width: min(920px, calc(100vw - 24px));
}

.room-form,
.room-policy-note,
.room-status-message,
.room-status-line,
.room-code-entry,
.room-password {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(70 63 51 / 0.18);
  border-radius: 8px;
  background: #fffdf8;
  color: #29242a;
}

.room-policy-note p,
.room-status-message {
  margin: 0;
  color: #4c463a;
  font-weight: 720;
}

.room-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgb(70 63 51 / 0.18);
  border-radius: 8px;
  background: #fff8e8;
  color: #29242a;
}

.room-card--summary,
.room-card--music {
  grid-column: span 2;
}

.room-card legend,
.room-card span,
.room-policy-note strong,
.room-status-line strong {
  color: #2b2416;
  font-weight: 950;
}

.room-card legend,
.room-card > span {
  font-size: 0.78rem;
  text-transform: uppercase;
}

.room-card small {
  color: #5a5346;
  font-weight: 700;
}

.live-room-state ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.live-room-state li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.live-room-state li span {
  color: #5a5346;
  font-size: 0.8rem;
  text-transform: none;
}

.live-room-state button {
  min-height: 38px;
  border: 1px solid rgb(70 63 51 / 0.22);
  border-radius: 8px;
  background: #f3d064;
  color: #20130a;
  font-weight: 950;
}

.room-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid rgb(70 63 51 / 0.16);
  border-radius: 8px;
  background: #fffdf8;
  color: #29242a;
  font-weight: 900;
}

.room-code-entry input,
.room-code-entry select,
.room-password input,
.room-password select,
.room-select-label select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgb(70 63 51 / 0.22);
  border-radius: 8px;
  background: #fffaf1;
  color: #29242a;
  font: inherit;
  font-weight: 850;
}

.room-code-entry,
.room-password,
.room-select-label {
  color: #29242a;
  font-weight: 900;
}

.room-status-line {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.room-status-line span {
  color: #7a4f00;
  font-weight: 950;
}

.room-host-summary {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgb(20 106 83 / 0.24);
  border-radius: 14px;
  background: rgb(225 249 238 / 0.72);
  color: #173f35;
}

.room-host-summary span {
  color: #35665a;
  font-weight: 750;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dialog-actions button {
  flex: 1 1 150px;
}

dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(78vh, 680px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgb(74 50 23 / 0.24);
  border-radius: 8px;
  color: #1d1c20;
  background: #fffaf1;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.34);
}

dialog h2 {
  margin-top: 0;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.58);
}

dialog li + li,
dialog details + details {
  margin-top: 8px;
}

.dialog-body {
  display: grid;
  gap: 10px;
}

.rules-preferences {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.rules-preferences button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.rules-close {
  margin-bottom: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .mode-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .opponent-picker {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .score-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seat-status-rail[data-seat-count="3"],
  .seat-status-rail[data-seat-count="4"] {
    --seat-columns: 2;
  }

  .module-board {
    grid-template-columns: 1fr;
  }

  .module-panel--table,
  .module-panel--status {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .hero-commandbar {
    display: grid;
    grid-template-columns: 28px 28px minmax(78px, 1fr) repeat(4, 28px);
    grid-template-areas:
      "home provenance account sound music settings help"
      "make make make join join daily daily";
    gap: 4px;
    min-height: 68px;
    padding: 4px;
    overflow: hidden;
    overscroll-behavior-x: none;
  }

  .hero-commandbar .hero-branding,
  .hero-commandbar .hero-utilities {
    display: contents;
  }

  .hero-commandbar .hero-home-link {
    grid-area: home;
    width: 28px;
    min-width: 28px;
    height: 28px;
  }

  .hero-commandbar .hero-home-link img {
    width: 26px;
    height: 26px;
  }

  .hero-commandbar .provenance-icon {
    display: inline-grid;
    grid-area: provenance;
    width: 28px;
    min-width: 28px;
    height: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    place-self: center;
  }

  .hero-commandbar .provenance-icon img {
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .hero-commandbar #landingAccountButton {
    grid-area: account;
    min-width: 0;
    min-height: 34px;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-commandbar #landingSoundButton,
  .hero-commandbar #landingMusicButton,
  .hero-commandbar #landingMusicSettingsButton,
  .hero-commandbar #howToPlayButton {
    display: inline-grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    place-self: center;
    font-size: 0.82rem;
  }

  .hero-commandbar #landingSoundButton { grid-area: sound; }
  .hero-commandbar #landingMusicButton { grid-area: music; }
  .hero-commandbar #landingMusicSettingsButton { grid-area: settings; }
  .hero-commandbar #howToPlayButton { grid-area: help; }

  .hero-commandbar #makeRoomButton,
  .hero-commandbar #joinRoomButton,
  .hero-commandbar .daily-banner {
    display: inline-grid;
    min-width: 0;
    min-height: 28px;
    padding: 3px 5px;
    line-height: 1;
  }

  .hero-commandbar #makeRoomButton {
    grid-area: make;
    font-size: 0.78rem;
  }

  .hero-commandbar #joinRoomButton {
    grid-area: join;
    font-size: 0.64rem;
  }

  .hero-commandbar .daily-banner {
    grid-area: daily;
    margin-left: 0;
    padding-inline: 2px;
    font-size: 0;
  }

  .hero-commandbar .daily-banner strong {
    font-size: 0;
    line-height: 1;
  }

  .hero-commandbar .daily-banner strong::after {
    content: "Daily";
    font-size: 0.62rem;
  }

  .hero-commandbar .daily-banner span { display: none; }

  .game-shell {
    padding: 8px;
  }

  .game-surface {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 6px;
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 8px;
  }

  .hero-copy {
    min-height: calc(100vh - 16px);
    padding: 12px;
  }

  .hero-title-lane {
    width: 100%;
    min-height: clamp(96px, 13vh, 116px);
    margin-top: 4px;
  }

  .game-titlemark--landing {
    width: min(64vw, 300px);
    margin: 10px;
  }

  .game-titlemark--compact {
    width: 170px;
  }

  .score-strip,
  .records-panel,
  .play-footer,
  .card-row,
  .hand-actions,
  .bid-row {
    grid-template-columns: 1fr;
  }

  .hero-commandbar,
  .play-toolbar,
  .hero-utilities {
    align-items: center;
    justify-content: flex-start;
  }

  .mode-picker,
  .opponent-picker,
  .landing-secondary-actions {
    width: 100%;
    min-width: 0;
  }

  .hero-landing-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-landing-actions > * {
    min-width: 0;
  }

  .start-game-button {
    white-space: normal;
    line-height: 1.15;
  }

  .play-toolbar .top-actions {
    display: contents;
    margin-left: 0;
  }

  .play-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) repeat(4, auto);
    gap: 5px;
    align-items: center;
    min-height: 0;
    padding: 5px;
    overflow: hidden;
  }

  .play-toolbar .bee-link,
  .play-toolbar #returnMainButton,
  .play-toolbar #roomButton,
  .play-toolbar #soundButton,
  .play-toolbar #musicButton,
  .play-toolbar #playRulesButton {
    display: inline-grid;
  }

  .play-toolbar #newGameButton,
  .play-toolbar #playRecordsButton,
  .play-toolbar #playAccountButton,
  .play-toolbar #playSupportButton,
  .play-toolbar #musicSettingsButton,
  .play-toolbar .daily-banner--toolbar {
    display: none;
  }

  .play-toolbar .title-block {
    min-width: 0;
  }

  .play-toolbar .game-titlemark--compact {
    width: min(128px, 34vw);
  }

  .play-toolbar button {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 0.78rem;
  }

  .play-toolbar .bee-link,
  .play-toolbar .rules-button,
  .play-toolbar .music-settings-button,
  .play-toolbar .icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .play-toolbar .bee-link img {
    width: 30px;
    height: 30px;
  }

  .score-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .score-strip div {
    padding: 5px 6px;
  }

  .score-strip span {
    font-size: 0.62rem;
  }

  .score-strip strong {
    font-size: 0.78rem;
  }

  .completion-panel {
    gap: 6px;
    padding: 6px 7px;
  }

  .completion-panel span {
    font-size: 0.58rem;
  }

  .completion-panel p {
    font-size: 0.62rem;
  }

  .completion-panel strong {
    font-size: 0.76rem;
  }

  .completion-panel button {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 0.74rem;
  }

  .seat-status-rail {
    gap: 5px;
  }

  .seat-status-card {
    gap: 5px;
    padding: 5px 6px;
  }

  .seat-status-card__identity strong {
    font-size: 0.73rem;
  }

  .seat-status-card__identity span,
  .seat-status-card__metrics {
    font-size: 0.58rem;
  }

  .seat-status-card__avatar {
    width: 19px;
    min-width: 19px;
    height: 19px;
  }

  .module-board {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }

  .module-board .module-panel:not(.module-panel--table) {
    display: none;
  }

  .module-panel--table {
    grid-row: auto;
    min-height: 0;
    padding: 8px;
  }

  .module-panel--table .panel-heading strong {
    display: none;
  }

  .card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .hand {
    gap: 5px;
    max-height: 94px;
    overflow: hidden;
  }

  .hand-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .turn-action-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    padding: 5px 6px;
  }

  .turn-action-bar p {
    font-size: 0.69rem;
  }

  .turn-action-buttons {
    grid-template-columns: repeat(2, minmax(53px, 1fr));
    gap: 4px;
  }

  .turn-action-buttons button {
    min-height: 30px;
    padding: 3px 6px;
    font-size: 0.74rem;
  }

  .hand-actions button {
    min-height: 34px;
    padding: 4px 5px;
    font-size: 0.78rem;
  }

  .hand-actions #suggestButton,
  .hand-actions #playCardButton {
    min-height: 44px;
  }

  .module-board .buzz-card {
    inline-size: clamp(48px, 14vw, 58px);
  }

  .module-board .buzz-zone {
    min-block-size: 78px;
  }

  .records-panel {
    display: none;
  }

  .play-footer--minimal {
    display: grid;
    min-height: 42px;
    padding: 0;
  }

  .play-footer--minimal .play-footer__home {
    width: 42px;
    height: 42px;
  }

  .play-footer--minimal .play-footer__home img {
    width: 36px;
    height: 36px;
  }

  .mode-picker,
  .opponent-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-picker,
  .variant-picker {
    grid-template-columns: 1fr;
  }

  .landing-secondary-actions {
    grid-template-columns: 1fr;
  }

  .opponent-roster-panel {
    grid-template-columns: 1fr;
  }

  .music-intent-panel,
  .music-playlist-draft,
  .music-lab-callout,
  .music-library-list article {
    grid-template-columns: 1fr;
  }

  .music-intent-controls,
  .music-intent-controls--table {
    grid-template-columns: 1fr 1fr;
  }

  .music-inline-actions,
  .music-library-actions {
    justify-content: stretch;
  }

  .music-inline-actions button,
  .music-library-actions button {
    flex: 1 1 120px;
  }

  .opponent-roster-button {
    grid-column: 1;
    grid-row: auto;
  }

  .room-setup-grid {
    grid-template-columns: 1fr;
  }

  .room-card--summary,
  .room-card--music {
    grid-column: auto;
  }

  #dailyChallengeButton {
    margin-left: auto;
  }

  .daily-banner {
    margin-left: 0;
  }

  .account-button {
    min-width: 138px;
  }
}

.hero-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(430px, 34vw);
  min-width: 280px;
}

.hero-room-actions > :is(#joinRoomButton, .daily-banner) {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 6px 10px;
  text-align: center;
}

.hero-room-actions #joinRoomButton { grid-area: auto; font-size: 0.82rem; }
.hero-room-actions .daily-banner { grid-area: auto; }

/* Active tables use the compact War/Forty-Fives/HCD utility rail, not the landing command bar. */
.play-toolbar--canonical {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) auto;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px;
  overflow: visible;
}

.play-toolbar--canonical .bee-link {
  width: 42px;
  min-width: 42px;
  height: 42px;
}

.play-toolbar--canonical .bee-link img {
  width: 36px;
  height: 36px;
}

.play-toolbar--canonical .title-block {
  min-width: 0;
}

.play-toolbar--canonical .game-titlemark--compact {
  width: min(156px, 18vw);
  max-width: 100%;
  max-height: 38px;
}

.play-toolbar--canonical .top-actions {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  justify-content: flex-end;
  margin-left: 0;
}

.play-toolbar--canonical .top-actions > :is(#returnMainButton, #roomButton, #newGameButton, #playRecordsButton, #playAccountButton) {
  border-color: rgb(255 230 164 / 0.3);
  color: #fff4d6;
  background: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.play-toolbar--canonical .top-actions > :is(#soundButton, #musicButton, #musicSettingsButton, #playRulesButton) {
  border: 1px solid rgb(122 79 0 / 0.58);
  color: #2c1b00;
  background: linear-gradient(180deg, #ffe9a9, #f0bd43);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

.play-toolbar--canonical .top-actions #roomButton {
  border-color: rgb(147 255 172 / 0.48);
}

.play-toolbar--canonical .daily-banner--toolbar,
.play-toolbar--canonical #playSupportButton {
  display: none;
}

.play-footer--minimal {
  align-self: end;
  justify-self: stretch;
  min-height: 48px;
  margin: 0;
}

@media (max-width: 620px) {
  .play-toolbar--canonical {
    grid-template-columns: auto minmax(78px, 1fr) auto;
    gap: 4px;
    min-height: 42px;
    padding: 4px;
    overflow: hidden;
    overscroll-behavior-x: none;
  }

  .play-toolbar--canonical .title-block p {
    display: none;
  }

  .play-toolbar--canonical .game-titlemark--compact {
    width: min(106px, 27vw);
    max-height: 32px;
  }

  .play-toolbar--canonical .top-actions {
    gap: 4px;
    overflow: hidden;
  }

  .play-toolbar--canonical .top-actions > :is(#newGameButton, #playRecordsButton, #playAccountButton, #playSupportButton, #musicSettingsButton, .daily-banner--toolbar) {
    display: none;
  }

  .play-toolbar--canonical .top-actions > :is(#roomButton, #soundButton, #musicButton, #playRulesButton) {
    display: inline-grid;
    flex: 0 0 auto;
  }

  .play-toolbar--canonical .top-actions #roomButton {
    min-height: 34px;
    padding: 4px 7px;
    font-size: 0.74rem;
  }

  .play-toolbar--canonical .top-actions > :is(#soundButton, #musicButton, #playRulesButton) {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
  }

  .play-footer--minimal {
    min-height: 42px;
  }
}

/* Canonical active-room rail: identity belongs in the footer dock, not the play controls. */
.play-toolbar--canonical {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 52px;
}

.play-toolbar--canonical .top-actions {
  align-items: center;
}

.play-toolbar--canonical .top-actions #roomButton {
  flex: 0 0 82px;
  min-width: 82px;
  min-height: 34px;
  padding: 4px 6px;
  font-size: 0.7rem;
}

.play-toolbar--canonical .top-actions #returnMainButton {
  flex: 0 0 82px;
  min-width: 82px;
  min-height: 36px;
  padding: 5px 8px;
  font-size: 0.78rem;
}

.play-toolbar--canonical .top-actions > :is(#soundButton, #musicButton, #musicSettingsButton, #playRulesButton) {
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.play-toolbar--canonical .top-actions > :is(#soundButton, #musicButton, #musicSettingsButton, #playRulesButton) > span[aria-hidden] {
  display: grid;
  place-items: center;
  line-height: 1;
}

.play-footer--minimal {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 5px 10px;
  border: 1px solid rgb(255 230 164 / 0.16);
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(3 20 17 / 0.98), rgb(9 45 30 / 0.98));
  box-shadow: 0 -8px 20px rgb(0 0 0 / 0.2);
}

.play-footer--minimal .play-footer__home {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

.play-footer--minimal .play-footer__home img {
  width: 36px;
  height: 36px;
}

.game-surface {
  position: relative;
}

.active-title-watermark {
  position: absolute;
  z-index: 2;
  top: 53%;
  left: 50%;
  width: min(360px, 44vw);
  max-height: 22%;
  object-fit: contain;
  opacity: 0.07;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.game-surface > :not(.active-title-watermark) {
  position: relative;
  z-index: 1;
}

@media (max-width: 620px) {
  .play-toolbar--canonical {
    grid-template-columns: 34px minmax(56px, 1fr) minmax(56px, 1fr) repeat(4, 34px);
    min-height: 42px;
  }

  .play-toolbar--canonical .top-actions {
    display: contents;
  }

  .play-toolbar--canonical .bee-link { grid-column: 1; grid-row: 1; }
  .play-toolbar--canonical #returnMainButton { grid-column: 2; grid-row: 1; }
  .play-toolbar--canonical #roomButton { grid-column: 3; grid-row: 1; }
  .play-toolbar--canonical #soundButton { grid-column: 4; grid-row: 1; }
  .play-toolbar--canonical #musicButton { grid-column: 5; grid-row: 1; }
  .play-toolbar--canonical #musicSettingsButton { grid-column: 6; grid-row: 1; }
  .play-toolbar--canonical #playRulesButton { grid-column: 7; grid-row: 1; }

  .play-toolbar--canonical .top-actions #returnMainButton {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 4px 3px;
    font-size: 0.68rem;
  }

  .play-toolbar--canonical .top-actions #roomButton {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 4px 6px;
    font-size: 0.72rem;
  }

  .play-toolbar--canonical .top-actions > :is(#soundButton, #musicButton, #musicSettingsButton, #playRulesButton) {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 50%;
  }

  .play-footer--minimal {
    min-height: 48px;
  }

  .active-title-watermark {
    width: min(260px, 68vw);
    max-height: 18%;
    opacity: 0.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Lobby and active-room composition: table art provides depth without taking controls away. */
.hero-table-watermark {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-copy > .hero-table-watermark {
  position: absolute;
  z-index: 2;
}

.hero-copy > :not(.hero-depth-bg, .hero-bg, .hero-table-watermark) {
  position: relative;
  z-index: 3;
}

.hero-commandbar .hero-utilities > button,
.hero-commandbar .hero-utilities > button > span[aria-hidden] {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  text-align: center;
}

.hero-commandbar #joinRoomButton {
  min-width: 142px;
}

.hero-commandbar .daily-banner {
  min-width: 250px;
}

@media (max-width: 620px) {
  .hero-commandbar {
    grid-template-columns: 28px 28px minmax(78px, 1fr) repeat(4, 28px);
    grid-template-areas:
      "home provenance account sound music settings help"
      "room-actions room-actions room-actions room-actions room-actions room-actions room-actions";
  }

  .hero-room-actions {
    display: grid;
    grid-area: room-actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .hero-room-actions > :is(#joinRoomButton, .daily-banner) {
    grid-area: auto;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
  }

  .hero-room-actions #joinRoomButton { font-size: 0.78rem; }
  .hero-room-actions .daily-banner strong { font-size: 0; }
  .hero-room-actions .daily-banner strong::after { content: "Daily"; font-size: 0.78rem; }
  .hero-room-actions .daily-banner span { display: none; }

  .hero-commandbar #joinRoomButton,
  .hero-commandbar .daily-banner {
    display: inline-grid;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
    line-height: 1;
  }

  .hero-commandbar #joinRoomButton {
    grid-area: join;
    font-size: 0.8rem;
  }

  .hero-commandbar .daily-banner {
    grid-area: daily;
    margin-left: 0;
  }

  .hero-commandbar .daily-banner strong {
    font-size: 0;
  }

  .hero-commandbar .daily-banner strong::after {
    content: "Daily";
    font-size: 0.78rem;
  }

  .hero-table-watermark {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.12;
  }
}

.hero-commandbar .hero-room-actions #joinRoomButton,
.hero-commandbar .hero-room-actions .daily-banner {
  min-width: 0;
  grid-area: auto !important;
}

.hero-room-actions #joinRoomButton {
  align-content: center;
  justify-items: center;
  text-align: center;
}

@media (max-width: 620px) {
  .hero-room-actions .daily-banner[data-daily-reward] strong::after { content: "Daily"; }
}

/* Forty-Fives migration slice: real traditional table, not starter modules. */
.mode-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.seat-status-rail[data-seat-count="3"],
.seat-status-rail[data-seat-count="4"] {
  --seat-columns: var(--active-seat-count, 3);
}

.seat-status-rail[data-seat-count="4"] {
  --active-seat-count: 4;
}

.mode-picker button {
  display: grid;
  gap: 2px;
  min-width: 0;
  white-space: normal;
}

.mode-picker button small,
.opponent-roster-summary span,
.local-note {
  font-size: 0.72rem;
}

.mode-picker button small {
  color: #55472d;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mode-picker button.is-active small {
  color: #3f351f;
}

.opponent-roster-summary span {
  color: #fff8e8;
}

.local-note {
  color: #f4dfac;
}

.hero-commandbar :disabled,
.mode-picker :disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.forty-fives-board {
  grid-template-columns: minmax(0, 1fr) minmax(245px, 0.34fr);
}

.forty-fives-board .module-panel--table {
  position: relative;
  z-index: 2;
  grid-row: auto;
  overflow: visible;
}

.forty-fives-board .module-panel--status {
  grid-column: 2;
  grid-row: auto;
}

.forty-fives-zones {
  grid-template-columns: minmax(82px, 0.55fr) minmax(82px, 0.55fr) minmax(190px, 1.7fr);
  align-items: stretch;
}

.card-zone {
  display: grid;
  min-height: 128px;
  padding: 6px;
  border: 1px solid rgb(255 230 164 / 0.2);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.14);
  place-items: center;
}

.card-zone > span,
.player-hand-heading small {
  color: #d9c99d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.current-trick #stackZone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.trick-card {
  display: grid;
  gap: 3px;
  place-items: center;
}

.trick-card > span,
.empty-trick {
  color: #fff4d6;
  font-size: 0.72rem;
  font-weight: 800;
}

.player-hand-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.forty-fives-hand {
  flex-wrap: nowrap;
  justify-content: center;
  max-height: none;
}

.forty-fives-hand button {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.forty-fives-board .hand-actions {
  grid-template-columns: repeat(2, minmax(82px, 1fr));
}

.forty-fives-board .module-panel--status {
  align-self: stretch;
  border-left: 1px solid rgb(255 230 164 / 0.12);
}

.play-toolbar--canonical {
  grid-template-columns: 42px auto minmax(180px, 260px) minmax(90px, 1fr) auto;
}

.play-toolbar--canonical .game-titlemark--compact {
  width: min(260px, 22vw);
  max-height: 42px;
}

.play-toolbar--canonical #returnMainButton {
  min-width: 82px;
}

.play-toolbar--canonical #modeLabel {
  justify-self: start;
}

.play-toolbar--canonical .top-actions > :is(#playRecordsButton, #soundButton, #playRulesButton) {
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

@media (max-height: 800px) and (min-width: 621px) {
  .game-surface {
    gap: 5px;
    padding: 7px;
  }

  .score-strip div,
  .seat-status-card,
  .module-board,
  .module-panel {
    padding-block: 4px;
  }

  .forty-fives-board,
  .module-panel {
    gap: 5px;
  }

  .card-zone {
    min-height: 96px;
  }

  .forty-fives-board .buzz-card {
    inline-size: 76px;
  }

  .play-footer--minimal {
    min-height: 36px;
    padding-block: 2px;
  }

  .play-footer--minimal img {
    max-height: 30px;
  }
}

@media (max-width: 980px) {
  .forty-fives-board {
    grid-template-columns: 1fr;
  }

  .forty-fives-board .module-panel--status {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .mode-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .mode-picker button {
    min-height: 56px;
    padding: 6px;
    font-size: 0.92rem;
  }

  .mode-picker button small {
    font-size: 0.66rem;
  }

  .hero-copy {
    gap: 8px;
    padding: 8px;
  }

  .hero-title-lane {
    min-height: clamp(92px, 12vh, 104px);
    margin-top: 0;
  }

  .game-titlemark--landing {
    width: auto;
    height: 90px;
    max-width: 60vw;
    margin: 7px;
    border-radius: 14px;
  }

  .hero-landing-actions {
    gap: 8px;
    padding: 10px;
  }

  .mode-description {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .start-game-button {
    min-height: 50px;
  }

  .opponent-roster-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
  }

  .opponent-roster-button {
    min-width: 0;
    min-height: 44px;
  }

  .opponent-roster-panel p {
    grid-column: 1 / -1;
  }

  .seat-status-rail:is([data-seat-count="3"], [data-seat-count="4"]) .seat-status-card {
    grid-template-columns: 1fr;
    gap: 1px;
    padding-inline: 3px;
    text-align: center;
  }

  .seat-status-rail:is([data-seat-count="3"], [data-seat-count="4"]) .seat-status-card__identity,
  .seat-status-rail:is([data-seat-count="3"], [data-seat-count="4"]) .seat-status-card__metrics {
    justify-content: center;
  }

  .seat-status-rail:is([data-seat-count="3"], [data-seat-count="4"]) .seat-status-card__identity span {
    display: none;
  }

  .seat-status-rail:is([data-seat-count="3"], [data-seat-count="4"]) .seat-status-card__metrics {
    display: grid;
    gap: 0;
    justify-items: center;
    font-size: 0.5rem;
    line-height: 1.15;
    white-space: normal;
  }

  .hero-commandbar {
    grid-template-columns: 28px 28px minmax(80px, 1fr) repeat(4, 28px);
    grid-template-areas:
      "home provenance account sound music settings help"
      "room-actions room-actions room-actions room-actions room-actions room-actions room-actions";
  }

  .hero-commandbar .hero-utilities,
  .hero-commandbar .hero-branding {
    display: contents;
  }

  .hero-commandbar .hero-room-actions {
    display: grid;
    grid-area: room-actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .hero-commandbar #landingSoundButton {
    grid-area: sound;
  }

  .hero-commandbar #landingMusicButton {
    grid-area: music;
  }

  .hero-commandbar #landingMusicSettingsButton {
    grid-area: settings;
  }

  .hero-commandbar #howToPlayButton {
    grid-area: help;
  }

  .score-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .play-toolbar--canonical {
    grid-template-columns: 34px 60px minmax(46px, 1fr) repeat(5, 34px);
    min-height: 42px;
    gap: 4px;
    padding: 4px;
  }

  .play-toolbar--canonical .game-titlemark--compact {
    display: none;
  }

  .play-toolbar--canonical #returnMainButton {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 60px;
  }

  .play-toolbar--canonical #modeLabel {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch;
    min-width: 0;
    padding-inline: 3px;
    font-size: 0.65rem;
  }

  .play-toolbar--canonical .top-actions {
    display: contents;
  }

  .play-toolbar--canonical #playRecordsButton {
    display: inline-grid;
    grid-column: 4;
    grid-row: 1;
  }

  .play-toolbar--canonical #soundButton {
    grid-column: 5;
    grid-row: 1;
  }

  .play-toolbar--canonical #musicButton {
    display: inline-grid;
    grid-column: 6;
    grid-row: 1;
  }

  .play-toolbar--canonical #musicSettingsButton {
    display: inline-grid;
    grid-column: 7;
    grid-row: 1;
  }

  .play-toolbar--canonical #playRulesButton {
    grid-column: 8;
    grid-row: 1;
  }

  .score-strip div:first-child {
    grid-column: span 2;
  }

  .forty-fives-zones {
    grid-template-columns: 70px 70px minmax(0, 1fr);
    gap: 4px;
  }

  .card-zone {
    min-height: 92px;
    padding: 3px;
  }

  .current-trick #stackZone {
    gap: 4px;
  }

  .current-trick .buzz-card {
    inline-size: 43px;
  }

  .forty-fives-hand {
    gap: 3px;
  }

  .forty-fives-hand .buzz-card {
    inline-size: clamp(48px, 14vw, 56px);
  }

  .player-hand-heading small {
    display: none;
  }

  .forty-fives-board .module-panel--status {
    display: none;
  }

  .forty-fives-board .turn-action-bar {
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
  }
}

/* Family landing contract: small footer art and a balanced five-choice phone grid. */
.buzz-footer--landing .buzz-footer__mark,
.play-footer--minimal .play-footer__home {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  background: transparent;
  box-shadow: none;
}

.buzz-footer--landing .buzz-footer__mark img,
.play-footer--minimal .play-footer__home img {
  width: 28px;
  height: 28px;
}

@media (max-width: 620px) {
  .hero-room-actions .daily-banner strong { line-height: 1.2; }

  .hero-landing-actions > .mode-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-landing-actions > .mode-picker > button {
    min-width: 0;
    min-height: 56px;
  }

  .hero-landing-actions > .mode-picker small,
  .hero-landing-actions > .room-ranking-picker small,
  .hero-landing-actions #opponentRosterDetail,
  .hero-landing-actions .local-note {
    display: none;
  }

  .hero-landing-actions > #modeDescription {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}