@font-face {
  font-family: Bricolage;
  src: url("/assets/fonts/bricolage-800.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Bricolage;
  src: url("/assets/fonts/bricolage-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("/assets/fonts/dm-sans-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("/assets/fonts/dm-sans-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
:root {
  --bg: #f7f4ec;
  --surface: #fffdf7;
  --surface-2: #eeeae0;
  --line: #ddd8ca;
  --text: #272522;
  --muted: #706d65;
  --blue: #2446ed;
  --red: #ef4c39;
  --yellow: #ffda55;
  --lime: #2446ed;
  --gold: #2446ed;
  font-family: DM, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: Bricolage, "Trebuchet MS", sans-serif;
  font-weight: 800;
  letter-spacing: -1.5px;
}
h1 {
  font-size: 42px;
  line-height: 1.1;
}
h2 {
  font-size: 32px;
  line-height: 1.1;
}
h3 {
  font-size: 19px;
  letter-spacing: -0.4px;
}
p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.site-header {
  height: 105px;
  max-width: 1400px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 0 48px;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: auto;
  height: 42px;
}
.logo-dot {
  color: var(--red);
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 25px;
}
.main-nav a,
.main-nav button {
  font-size: 13px;
  font-weight: 600;
  border: 0;
  background: none;
  padding: 11px 19px;
  border-radius: 25px;
}
.main-nav a.active {
  background: var(--blue);
  color: white;
}
.main-nav a:hover:not(.active),
.main-nav button:hover {
  background: #ebe7da;
}
.main-nav button {
  color: var(--muted);
  font-weight: 400;
}
.account-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-note {
  font-size: 12px;
  color: var(--muted);
}
.account-avatar {
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  border-radius: 12px;
  background: var(--yellow);
  border: 1px solid #ddbf4d;
  font-size: 16px;
}
.account-name {
  font-size: 12px;
  font-weight: 600;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  min-height: 47px;
  border: 1.5px solid var(--text);
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  background: var(--surface);
  color: var(--text);
}
.button.primary {
  background: var(--blue);
  color: #fff;
  border-color: #1631b7;
  box-shadow: 0 3px 0 #172da4;
}
.button.yellow {
  background: var(--yellow);
  color: var(--text);
  border-color: #e9c646;
  box-shadow: 0 3px 0 #ac8e25;
}
.button.subtle {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.button:hover:not(:disabled) {
  transform: translateY(-2px);
}
.button.primary:hover:not(:disabled) {
  background: #1737d5;
  box-shadow: 0 5px 0 #172da4;
}
.button.yellow:hover:not(:disabled) {
  background: #ffe57f;
}
.button.subtle:hover:not(:disabled) {
  background: #eeeae0;
}
.button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.button.small {
  font-size: 11px;
  padding: 9px 13px;
  min-height: 35px;
  border-radius: 8px;
}
.button.full {
  width: 100%;
}
.button.full .icon {
  margin-left: auto;
}
.button:focus-visible,
button[role="tab"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--blue);
}
.sticker {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  align-items: center;
  transform: rotate(-2deg);
  width: fit-content;
}
.cream-sticker {
  background: #fff7df;
  color: #1735ae;
}
.yellow-sticker {
  background: var(--yellow);
  color: #2b2b24;
}
.auth-gate {
  max-width: 1304px;
  margin: 22px auto 40px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 76px;
  align-items: center;
}
.auth-story {
  background: var(--blue);
  color: white;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  padding: 38px 42px 30px;
  min-height: 700px;
}
.auth-story h1 {
  font-size: 66px;
  line-height: 1.03;
  letter-spacing: -2.6px;
  margin: 23px 0 16px;
  position: relative;
  z-index: 1;
}
.auth-story h1 span {
  color: var(--yellow);
  position: relative;
}
.auth-story h1 span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  transform: rotate(-3deg);
}
.auth-story > p {
  font-size: 14px;
  color: #edf0ff;
  position: relative;
  z-index: 1;
}
.auth-illustration {
  position: relative;
  height: 295px;
  margin: 13px -22px 8px;
}
.auth-illustration img {
  height: calc(100% - 20px);
  width: min(100%, 410px);
  margin: auto;
  object-fit: cover;
  display: block;
  border: 3px solid #fffaf0;
  border-radius: 12px;
  transform: rotate(-3deg);
  box-shadow: 9px 9px 0 #1933b7;
}
.floating-note {
  position: absolute;
  right: 0;
  top: 28px;
  background: var(--yellow);
  padding: 13px 17px;
  transform: rotate(9deg);
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  line-height: 1.15;
  border-radius: 3px;
  box-shadow: 3px 4px 0 #1a36b3;
}
.story-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: #dce4ff;
  line-height: 1.6;
}
.story-foot strong {
  font-weight: 400;
  color: #fff;
}
.mini-avatars {
  display: flex;
  margin-right: 5px;
  flex-shrink: 0;
}
.mini-avatars i {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 13px;
  border: 2px solid var(--blue);
  font-size: 19px;
  background: var(--yellow);
  color: var(--text);
  font-style: normal;
  transform: rotate(-8deg);
}
.mini-avatars i + i {
  margin-left: -8px;
  background: var(--red);
  color: white;
  transform: rotate(6deg);
}
.mini-avatars i:last-child {
  background: #fff8e7;
  color: var(--blue);
  transform: rotate(-5deg);
}
.auth-entry {
  padding: 15px 0;
  max-width: 410px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 26px;
  margin-bottom: 37px;
}
.auth-tabs button {
  background: none;
  border: 0;
  padding: 12px 0 14px;
  color: var(--muted);
  font-size: 13px;
  position: relative;
}
.auth-tabs button[aria-selected="true"] {
  color: var(--blue);
  font-weight: 600;
}
.auth-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 4px;
}
.auth-heading h2 {
  font-size: 40px;
  letter-spacing: -1.6px;
  margin: 12px 0 13px;
}
.auth-heading p {
  font-size: 13px;
  margin-bottom: 28px;
}
label {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}
input,
select {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid #cbc6b8;
  border-radius: 9px;
  padding: 13px 14px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 400;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
input::placeholder {
  color: #9b978c;
}
input:hover,
select:hover {
  border-color: #8c887e;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #2446ed1a;
}
.password-input {
  display: block;
  position: relative;
}
.password-input input {
  padding-right: 47px;
}
.password-input button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 0;
  color: #777165;
  border-radius: 5px;
  display: grid;
  place-items: center;
}
.password-input svg {
  width: 20px;
  height: 20px;
}
.password-label small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-top: 8px;
}
.form-error {
  font-size: 12px;
  color: #b73427;
  min-height: 17px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.text-button {
  display: block;
  background: none;
  border: 0;
  font-size: 12px;
  padding: 15px 0;
  color: var(--blue);
  margin: 0 auto;
}
.text-button:hover {
  text-decoration: underline;
}
.auth-benefit {
  border-top: 1px dashed #cec7b7;
  margin-top: 20px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.benefit-dice {
  display: grid;
  place-items: center;
  color: var(--blue);
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #e6ebff;
  font-size: 33px;
  transform: rotate(-8deg);
  flex-shrink: 0;
}
.auth-benefit p {
  font-size: 11px;
  line-height: 1.7;
}
.auth-benefit strong {
  color: var(--text);
  font-weight: 600;
}
.auth-fineprint {
  font-size: 10px;
  color: #969184;
  margin-top: 26px;
}
.invite-note {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff0b1;
  padding: 13px 15px;
  border-radius: 10px;
  margin-bottom: 23px;
}
.invite-note > span {
  font-size: 25px;
}
.invite-note strong {
  font-size: 12px;
}
.invite-note p {
  font-size: 11px;
  color: #74643a;
  margin-top: 3px;
}
.site-footer {
  max-width: 1304px;
  margin: 36px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 48px 30px;
  color: #8d877b;
  font-size: 9px;
  letter-spacing: 1.2px;
  border-top: 1px solid var(--line);
  gap: 15px;
}
.footer-wordmark {
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1.5px;
  color: var(--text);
}
.site-footer button {
  font-size: 11px;
  border: 0;
  background: none;
  color: var(--muted);
  letter-spacing: 0;
}
.shell {
  max-width: 1304px;
  margin: 22px auto 0;
  padding: 0 48px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 0 0 28px;
}
.page-heading h1 {
  margin: 11px 0 11px;
}
.page-heading p {
  font-size: 13px;
}
.outline-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #c8ceeb;
  background: #edf0ff;
  border-radius: 25px;
  white-space: nowrap;
  font-size: 10px;
  color: #3850b9;
}
.live-dot {
  height: 6px;
  width: 6px;
  background: var(--blue);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.home-banner {
  border-radius: 22px;
  overflow: hidden;
  background: var(--blue);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 305px;
  position: relative;
}
.home-copy {
  padding: 30px 34px;
  z-index: 1;
}
.home-copy h2 {
  font-size: 44px;
  color: white;
  margin: 21px 0 13px;
  line-height: 1.02;
  letter-spacing: -1.7px;
}
.home-copy p {
  font-size: 12px;
  color: #e3e8ff;
}
.home-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 23px 0 20px;
}
.banner-link {
  color: white;
  font-size: 11px;
  white-space: nowrap;
  border-bottom: 1px solid #8e9bf0;
  padding-bottom: 3px;
}
.home-meta {
  display: flex;
  gap: 20px;
  font-size: 10px;
  color: #d5ddff;
}
.home-meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-meta .icon {
  width: 15px;
  height: 15px;
}
.home-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-label {
  position: absolute;
  bottom: 26px;
  right: 25px;
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  background: var(--yellow);
  transform: rotate(7deg);
  padding: 13px 18px;
  line-height: 1.1;
  border-radius: 3px;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 36px 0 22px;
  scroll-margin-top: 25px;
}
.section-top h2 {
  margin-top: 10px;
}
.section-top p {
  font-size: 11px;
}
.prepare-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.configuration {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 25px;
}
.section-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px;
  font-size: 12px;
  font-weight: 600;
}
.step {
  height: 25px;
  width: 25px;
  display: grid;
  place-items: center;
  background: var(--blue);
  border-radius: 8px;
  color: white;
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 13px;
  transform: rotate(-5deg);
  flex-shrink: 0;
}
.red-step {
  background: var(--red);
  transform: rotate(4deg);
}
.format-options {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}
.format {
  position: relative;
  text-align: left;
  min-height: 82px;
  padding: 16px 38px 16px 55px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.format:hover {
  border-color: #8d9dea;
}
.format.selected {
  background: #ecf0ff;
  border-color: var(--blue);
}
.format strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.format > span:not(.format-symbol) {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
.format strong small {
  font-size: 6px;
  color: #675923;
  background: #fff0b3;
  display: inline-block;
  border-radius: 4px;
  margin-left: 4px;
  padding: 3px 4px;
  letter-spacing: 0.5px;
}
.format-symbol {
  position: absolute;
  left: 15px;
  top: 26px;
  color: var(--blue);
}
.format-symbol .icon {
  width: 25px;
  height: 25px;
}
.expanded-symbol {
  color: var(--red);
  transform: rotate(15deg);
}
.format i {
  position: absolute;
  right: 13px;
  top: 28px;
  font-style: normal;
  color: #bab5a8;
}
.format i .icon {
  width: 17px;
  height: 17px;
}
.format.selected i {
  color: var(--blue);
}
.config-note {
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  margin-top: 13px;
}
.map-preview,
.table-board {
  background-color: #ecf1fa;
  background-image: radial-gradient(#cad4ed 0.8px, transparent 0.8px);
  background-size: 14px 14px;
  border: 1px solid #cbd3e6;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid #d0d9ed;
  background: #f7f9ffb8;
  color: #425687;
}
.preview-heading > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.preview-heading .icon {
  width: 17px;
  height: 17px;
}
.preview-heading .button {
  border-color: #c5cfea;
  color: #4359ad;
  background: #f5f7ff;
  font-size: 10px;
}
.board-container {
  flex: 1;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.board-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 470px;
  overflow: visible;
}
.preview-foot {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #596784;
  border-top: 1px solid #d0d9ed;
  background: #f7f9ffb8;
  font-size: 9px;
}
.terrain-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #5b6981;
  font-size: 9px;
  padding: 0 10px 15px;
}
.terrain-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.terrain-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #507b4f;
}
.terrain-legend .hill-swatch {
  background: #d87b5c;
}
.terrain-legend .pasture-swatch {
  background: #9ec879;
}
.terrain-legend .field-swatch {
  background: #efd06b;
}
.terrain-legend .mountain-swatch {
  background: #87a9c6;
}
.how-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 30px 0 6px;
  margin-top: 15px;
}
.how-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.how-number {
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 31px;
  color: #c2badf;
  transform: rotate(-5deg);
}
.how-strip > div:nth-child(2) .how-number {
  color: #df9b8e;
  transform: rotate(4deg);
}
.how-strip > div:nth-child(3) .how-number {
  color: #d3b652;
}
.how-strip p {
  font-size: 10px;
}
.how-strip strong {
  font-size: 12px;
  color: var(--text);
}
.how-strip .button {
  font-size: 11px;
  padding: 10px 14px;
  min-height: 40px;
}
.room-list {
  display: grid;
  gap: 12px;
}
.room-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 23px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.room-card > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.room-card h3 {
  margin: 9px 0;
  font-size: 22px;
}
.room-card p {
  font-size: 12px;
}
.room-card .eyebrow {
  font-size: 8px;
}
.room-icon {
  color: var(--blue);
  font-size: 34px;
  flex-shrink: 0;
}
.empty-state {
  background: var(--surface);
  border: 1px dashed #c4baa4;
  border-radius: 18px;
  text-align: center;
  padding: 65px 25px;
}
.empty-state > span {
  font-size: 45px;
  color: var(--blue);
}
.empty-state h1,
.empty-state h2 {
  margin: 17px 0;
}
.empty-state p {
  margin: 10px 0 24px;
  font-size: 13px;
}
.room-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-heading h1 {
  font-size: 37px;
}
.notice {
  padding: 13px 15px;
  border: 1px solid #e1d39d;
  border-radius: 9px;
  background: #fff4c6;
  color: #766330;
  font-size: 11px;
  line-height: 1.65;
}
.notice.compact {
  margin-bottom: 18px;
  font-size: 10px;
  padding: 9px 13px;
  background: #f0ede5;
  color: #827961;
  border-color: #e0dacc;
}
.table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 295px;
  gap: 20px;
}
.table-board {
  align-self: start;
}
.table-board .board-container {
  min-height: 430px;
  padding: 25px;
}
.table-board .board-svg {
  max-height: 570px;
}
.table-side {
  display: grid;
  gap: 15px;
  align-content: start;
}
.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.panel-heading h3 {
  font-size: 17px;
  letter-spacing: -0.5px;
}
.panel-heading > span {
  font-size: 10px;
  color: var(--muted);
}
.player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #ebe5d7;
}
.player-avatar {
  height: 36px;
  width: 36px;
  border-radius: 12px;
  background: var(--player);
  color: #252523;
  display: grid;
  place-items: center;
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 16px;
  border: 1px solid #00000012;
  flex-shrink: 0;
}
.player-row > div {
  flex: 1;
  min-width: 0;
}
.player-row strong {
  font-size: 11px;
  font-weight: 600;
  display: block;
  overflow-wrap: anywhere;
}
.player-row strong small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 400;
  margin-left: 3px;
}
.player-row div > span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}
.player-score {
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 23px;
  color: var(--blue);
  text-align: center;
  flex-shrink: 0;
}
.player-score small {
  font:
    9px DM,
    sans-serif;
  color: var(--muted);
  margin-left: 3px;
}
.hand-count {
  display: block;
  font:
    8px DM,
    sans-serif;
  color: var(--muted);
  margin-top: 3px;
}
.current-player strong {
  color: var(--blue);
}
.current-player .player-avatar {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.lobby-actions {
  margin-top: 22px;
}
.table-toolbar {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #d0d9ed;
  background: #f7f9ffb8;
}
.muted {
  font-size: 11px;
  color: var(--muted);
}
.build-tools,
.dice-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dice-result {
  font-family: Bricolage, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--blue);
  margin-right: 7px;
}
.vertex-target,
.building-target,
.edge-target,
.selectable {
  cursor: pointer;
}
.vertex-target:hover,
.vertex-target:focus {
  r: 8;
  opacity: 1;
  outline: none;
}
.edge-target:hover,
.edge-target:focus {
  stroke: var(--blue);
  stroke-opacity: 0.8;
  outline: none;
}
.building-target:hover {
  filter: brightness(1.15);
}
.selectable:hover {
  filter: brightness(1.1);
}
.hex.selectable:focus {
  outline: none;
}
.hex.selectable:hover [data-robber-target],
.hex.selectable:focus [data-robber-target] {
  fill: rgba(36, 70, 237, 0.14);
  stroke: #2446ed;
  stroke-width: 3;
  stroke-linejoin: round;
}
.hand {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 2px;
  background: #edf4e8;
  border: 1px solid #d5e2cb;
  border-radius: 8px;
  border-top: 4px solid #739b5d;
}
.resource strong {
  font-family: Bricolage, sans-serif;
  font-weight: 800;
  font-size: 23px;
  color: #456331;
}
.resource span {
  font-size: 7px;
  color: #59714a;
}
.resource.brick {
  background: #faeae3;
  border-color: #efcfc2;
  border-top-color: #d96c4a;
}
.resource.brick strong,
.resource.brick span {
  color: #9d4a30;
}
.resource.sheep {
  background: #f0f5de;
  border-color: #dce6bc;
  border-top-color: #a1bb62;
}
.resource.wheat {
  background: #fff6d7;
  border-color: #ede0ac;
  border-top-color: #e2b235;
}
.resource.wheat strong,
.resource.wheat span {
  color: #8d6c15;
}
.resource.ore {
  background: #e9eff8;
  border-color: #ccd7e9;
  border-top-color: #7498c9;
}
.resource.ore strong,
.resource.ore span {
  color: #446893;
}
.trade-selects {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.trade-selects label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
}
.trade-selects select {
  padding: 8px 6px;
  min-height: 35px;
  font-size: 11px;
  border-radius: 7px;
}
.trade-selects > span {
  color: var(--blue);
  padding-top: 4px;
}
.event-log {
  list-style: none;
  padding: 0;
  margin: 0;
}
.event-log li {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  padding: 9px 0 9px 13px;
  border-top: 1px solid #ebe5d7;
  position: relative;
}
.event-log li::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c7bfae;
  left: 0;
  top: 16px;
}
.event-log li:first-child {
  color: var(--text);
}
.event-log li:first-child::before {
  background: var(--blue);
}
.discard-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.discard-inputs label {
  margin: 0 0 10px;
  font-size: 10px;
}
.discard-inputs input {
  padding: 8px;
  min-height: 34px;
}
.panel form > p {
  font-size: 10px;
  margin: 14px 0;
}
.panel form > p.config-note {
  font-size: 8px;
}
dialog {
  border: 1px solid #cfc6b3;
  border-radius: 20px;
  background: var(--surface);
  padding: 36px;
  color: var(--text);
  width: min(560px, calc(100% - 32px));
  box-shadow: 0 25px 70px #2e2a2340;
}
dialog::backdrop {
  background: #24232278;
  backdrop-filter: blur(4px);
}
dialog h2 {
  font-size: 34px;
  margin: 15px 0 18px;
}
dialog p {
  font-size: 13px;
  margin: 0 0 20px;
}
.close-dialog {
  position: absolute;
  top: 13px;
  right: 15px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ece6d8;
  font-size: 23px;
  line-height: 1;
}
.help-list {
  padding-left: 20px;
  line-height: 1.8;
  font-size: 12px;
  color: var(--muted);
}
.help-list li {
  margin: 15px 0;
}
.help-list strong {
  color: var(--text);
}
.release-details {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 20px;
  font-size: 11px;
  color: var(--muted);
}
.release-details summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
}
.release-details p {
  font-size: 11px;
  margin: 13px 0 0;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #282620;
  color: #fffaf0;
  border: 1px solid #3c3930;
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 12px;
  box-shadow: 0 5px 20px #0002;
  z-index: 20;
  max-width: calc(100% - 32px);
  line-height: 1.5;
}
[hidden] {
  display: none !important;
}
body[data-session="checking"] .main-nav a,
body[data-session="anonymous"] .main-nav a {
  display: none;
}
body[data-session="checking"] .main-nav,
body[data-session="anonymous"] .main-nav {
  margin-left: auto;
}
body[data-session="checking"] .account-area,
body[data-session="anonymous"] .account-area {
  margin-left: 0;
}
body[data-session="checking"] #auth-submit {
  opacity: 0.4;
}
@media (min-width: 1550px) {
  .auth-gate {
    margin-top: 35px;
    gap: 90px;
  }
  .auth-story {
    min-height: 735px;
  }
  .auth-story h1 {
    font-size: 73px;
  }
  .auth-illustration {
    height: 310px;
  }
  .home-banner {
    min-height: 325px;
  }
  .home-copy {
    padding: 36px 40px;
  }
  .home-copy h2 {
    font-size: 51px;
  }
}
@media (max-width: 1150px) {
  .site-header {
    padding: 0 30px;
    gap: 20px;
    height: 66px;
  }
  .main-nav {
    margin-left: 15px;
  }
  .auth-gate {
    padding: 0 30px;
    gap: 40px;
    grid-template-columns: 1.15fr 1fr;
  }
  .auth-story {
    padding: 32px;
    min-height: 660px;
  }
  .auth-story h1 {
    font-size: 55px;
  }
  .auth-illustration {
    height: 280px;
  }
  .floating-note {
    font-size: 15px;
    padding: 10px 13px;
  }
  .auth-heading h2 {
    font-size: 36px;
  }
  .header-note {
    font-size: 10px;
  }
  .shell {
    padding: 0 30px;
  }
  .home-copy h2 {
    font-size: 39px;
  }
  .home-copy {
    padding: 28px;
  }
  .home-actions {
    gap: 12px;
  }
  .home-actions .button {
    font-size: 11px;
    padding: 12px 15px;
  }
  .banner-link {
    font-size: 10px;
  }
  .prepare-grid {
    grid-template-columns: 320px 1fr;
  }
  .configuration {
    padding: 23px;
  }
  .home-meta {
    gap: 12px;
    font-size: 9px;
  }
  .table-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
  }
  .panel {
    padding: 16px;
  }
  .how-strip {
    gap: 15px;
  }
  .how-strip p {
    font-size: 9px;
  }
  .how-strip strong {
    font-size: 11px;
  }
  .site-footer {
    padding: 24px 30px;
  }
}
@media (max-width: 850px) {
  .auth-gate {
    gap: 28px;
    grid-template-columns: 1fr 1fr;
  }
  .auth-story {
    padding: 28px;
    min-height: 620px;
  }
  .auth-story h1 {
    font-size: 46px;
    letter-spacing: -1.8px;
  }
  .auth-story > p {
    font-size: 12px;
  }
  .auth-illustration {
    height: 245px;
    margin: 14px -16px 10px;
  }
  .floating-note {
    font-size: 13px;
    right: -2px;
    top: 25px;
  }
  .story-foot {
    gap: 8px;
    font-size: 9px;
  }
  .mini-avatars i {
    height: 30px;
    width: 30px;
    border-radius: 10px;
    font-size: 16px;
  }
  .auth-entry {
    padding: 5px 0;
  }
  .auth-tabs {
    margin-bottom: 28px;
  }
  .auth-heading h2 {
    font-size: 32px;
  }
  .auth-heading p {
    font-size: 12px;
  }
  .header-note {
    display: none;
  }
  .account-name {
    display: none;
  }
  .site-header {
    padding: 0 24px;
    gap: 10px;
    height: 88px;
  }
  .brand-logo {
    height: 38px;
  }
  .main-nav {
    gap: 0;
    margin-left: 13px;
  }
  .main-nav a,
  .main-nav button {
    padding: 10px 13px;
    font-size: 12px;
  }
  .account-area .button {
    padding: 9px;
  }
  .account-area .button span {
    display: none;
  }
  .shell {
    padding: 0 24px;
    margin-top: 20px;
  }
  .page-heading h1 {
    font-size: 35px;
  }
  .home-banner {
    grid-template-columns: 1.05fr 1fr;
    min-height: 290px;
  }
  .home-copy {
    padding: 25px;
  }
  .home-copy h2 {
    font-size: 35px;
    letter-spacing: -1.4px;
  }
  .home-actions {
    display: block;
    margin-top: 18px;
    margin-bottom: 15px;
  }
  .banner-link {
    display: inline-block;
    margin-top: 13px;
  }
  .home-meta {
    flex-direction: column;
    gap: 6px;
  }
  .home-art img {
    object-fit: contain;
  }
  .art-label {
    font-size: 15px;
    right: 15px;
    padding: 11px 13px;
    bottom: 35px;
  }
  .prepare-grid {
    grid-template-columns: 280px 1fr;
    gap: 16px;
  }
  .configuration {
    padding: 19px;
  }
  .format {
    padding-left: 45px;
    min-height: 84px;
  }
  .format-symbol {
    left: 11px;
  }
  .format-symbol .icon {
    width: 22px;
    height: 22px;
  }
  .format strong {
    font-size: 11px;
  }
  .format strong small {
    display: block;
    width: fit-content;
    margin-left: 0;
    margin-top: 3px;
  }
  .format > span:not(.format-symbol) {
    font-size: 9px;
  }
  .preview-heading {
    padding: 12px;
    gap: 7px;
    font-size: 10px;
  }
  .preview-heading .button {
    font-size: 9px;
    padding: 8px;
  }
  .board-container {
    padding: 12px;
    min-height: 310px;
  }
  .preview-foot {
    padding: 13px;
    font-size: 8px;
  }
  .preview-foot > span:last-child {
    display: none;
  }
  .terrain-legend {
    gap: 9px;
    font-size: 8px;
  }
  .how-strip {
    flex-wrap: wrap;
  }
  .how-strip .button {
    margin-left: auto;
  }
  .section-top p {
    font-size: 10px;
  }
  .table-layout {
    grid-template-columns: 1fr;
  }
  .table-side {
    grid-template-columns: 1fr 1fr;
  }
  .event-panel {
    grid-column: 1/-1;
  }
  .table-board .board-container {
    min-height: 400px;
  }
  .table-side .resource span {
    font-size: 8px;
  }
  .room-heading {
    align-items: start;
  }
  .room-heading h1 {
    font-size: 31px;
  }
  .room-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .site-footer {
    padding: 24px;
    font-size: 8px;
  }
}
@media (max-width: 640px) {
  .site-header {
    height: 79px;
    padding: 0 20px;
  }
  .brand-logo {
    height: 26px;
  }
  .main-nav {
    margin-left: auto;
  }
  .main-nav a,
  .main-nav button {
    font-size: 11px;
    padding: 9px 12px;
  }
  .main-nav button {
    display: none;
  }
  .main-nav a.active {
    padding: 9px 15px;
  }
  .account-area {
    gap: 7px;
    margin-left: 5px;
  }
  .account-avatar {
    height: 30px;
    width: 30px;
    font-size: 13px;
    border-radius: 10px;
  }
  .account-area .button {
    min-height: 30px;
    padding: 6px;
    border: 0;
  }
  .account-area .icon {
    width: 17px;
    height: 17px;
  }
  .auth-gate {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 22px;
    margin: 8px auto 25px;
    gap: 32px;
    align-items: stretch;
  }
  .auth-entry {
    max-width: none;
    padding: 8px 0;
  }
  .auth-tabs {
    margin-bottom: 28px;
  }
  .auth-heading h2 {
    font-size: 38px;
  }
  .auth-heading p {
    font-size: 13px;
    margin-bottom: 25px;
  }
  .auth-tabs button {
    font-size: 13px;
  }
  .auth-benefit {
    margin-top: 16px;
    padding-top: 20px;
  }
  .auth-fineprint {
    margin-top: 19px;
  }
  .auth-story {
    min-height: 0;
    padding: 27px 27px 25px;
    border-radius: 22px;
  }
  .auth-story h1 {
    font-size: 45px;
    margin-top: 19px;
  }
  .auth-story > p {
    font-size: 12px;
  }
  .auth-illustration {
    height: 220px;
    margin: 8px -13px 10px;
  }
  .floating-note {
    top: 17px;
    font-size: 13px;
    padding: 10px 14px;
  }
  .story-foot {
    font-size: 10px;
    gap: 12px;
  }
  .mini-avatars i {
    height: 32px;
    width: 32px;
  }
  .shell {
    padding: 0 18px;
    margin: 16px auto 0;
  }
  .page-heading {
    margin-bottom: 25px;
    align-items: start;
  }
  .page-heading h1 {
    font-size: 31px;
    margin: 9px 0 11px;
    letter-spacing: -1px;
  }
  .page-heading p {
    font-size: 12px;
  }
  .page-heading > .outline-pill {
    display: none;
  }
  .eyebrow {
    font-size: 9px;
  }
  .home-banner {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
  }
  .home-copy {
    padding: 26px 27px 10px;
  }
  .home-copy h2 {
    font-size: 39px;
    margin: 20px 0 14px;
  }
  .home-copy p {
    font-size: 12px;
    max-width: 290px;
  }
  .home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
  }
  .home-actions .button {
    font-size: 11px;
    padding: 13px 15px;
  }
  .banner-link {
    font-size: 10px;
    margin-top: 0;
  }
  .home-meta {
    flex-direction: row;
    gap: 16px;
    font-size: 9px;
  }
  .home-art {
    height: 180px;
    margin-top: -3px;
  }
  .home-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .art-label {
    font-size: 13px;
    right: 21px;
    bottom: 31px;
    padding: 10px 13px;
  }
  .section-top {
    margin: 30px 0 20px;
  }
  .section-top h2 {
    font-size: 29px;
    margin-top: 9px;
  }
  .section-top p {
    display: none;
  }
  .prepare-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .configuration {
    padding: 23px;
  }
  .map-preview {
    grid-row: 2;
  }
  .format-options {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .format {
    padding: 45px 11px 15px;
    min-height: 119px;
  }
  .format-symbol {
    top: 14px;
    left: 13px;
  }
  .format i {
    top: 17px;
    right: 11px;
  }
  .format strong {
    font-size: 11px;
  }
  .format > span:not(.format-symbol) {
    font-size: 9px;
    line-height: 1.5;
  }
  .format strong small {
    font-size: 6px;
    margin-top: 4px;
  }
  .section-caption {
    font-size: 12px;
  }
  .board-container {
    min-height: 290px;
    padding: 13px;
  }
  .board-svg {
    max-height: 400px;
  }
  .preview-heading {
    padding: 14px;
    font-size: 11px;
  }
  .preview-heading .button {
    font-size: 10px;
  }
  .terrain-legend {
    gap: 13px;
    font-size: 8px;
    padding-bottom: 17px;
  }
  .how-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 14px 5px;
    margin-top: 20px;
  }
  .how-strip > div {
    gap: 10px;
  }
  .how-strip p {
    font-size: 9px;
  }
  .how-strip strong {
    font-size: 11px;
  }
  .how-number {
    font-size: 29px;
  }
  .how-strip .button {
    font-size: 10px;
    margin: 0;
    min-height: 44px;
  }
  .site-footer {
    padding: 24px 20px;
    font-size: 6px;
    letter-spacing: 0.8px;
    gap: 10px;
    margin-top: 25px;
  }
  .site-footer button {
    font-size: 9px;
  }
  .footer-wordmark {
    font-size: 21px;
  }
  .room-card {
    padding: 19px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .room-card > div:nth-child(2) {
    min-width: 200px;
  }
  .room-card h3 {
    font-size: 23px;
    overflow-wrap: anywhere;
  }
  .room-card p {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .room-card .button {
    margin-left: auto;
  }
  .room-heading {
    display: block;
  }
  .room-heading h1 {
    font-size: 31px;
    overflow-wrap: anywhere;
  }
  .room-controls {
    flex-direction: row;
    margin-top: 18px;
  }
  .notice.compact {
    font-size: 9px;
    padding: 10px 12px;
    line-height: 1.7;
  }
  .table-side {
    grid-template-columns: 1fr;
  }
  .event-panel {
    grid-column: auto;
  }
  .table-board .board-container {
    min-height: 285px;
    padding: 15px;
  }
  .table-board .board-svg {
    max-height: 410px;
  }
  .table-toolbar {
    padding: 11px;
  }
  .table-toolbar .button {
    font-size: 10px;
    padding: 9px;
  }
  .dice-result {
    font-size: 22px;
  }
  .table-side .panel {
    padding: 21px;
  }
  .table-side .resource span {
    font-size: 9px;
  }
  .table-side .resource strong {
    font-size: 27px;
  }
  .trade-selects label {
    font-size: 11px;
  }
  .trade-selects select {
    font-size: 12px;
    padding: 9px;
  }
  .player-row strong {
    font-size: 13px;
  }
  .player-row div > span {
    font-size: 10px;
  }
  .player-avatar {
    height: 39px;
    width: 39px;
    font-size: 17px;
  }
  .event-log li {
    font-size: 11px;
  }
  .panel-heading h3 {
    font-size: 19px;
  }
  .empty-state {
    padding: 50px 20px;
  }
  .empty-state h1 {
    font-size: 27px;
  }
  .room-icon {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Mesa: preparation, illustrated tiles and cards. */
.prepare-grid {
  align-items: start;
}
.map-preview {
  position: sticky;
  top: 20px;
}
.map-preview .board-container {
  height: 540px;
  flex: none;
  min-height: 0;
}
.map-preview .board-svg {
  max-height: 530px;
}
.back-link {
  display: block;
  width: fit-content;
  font-size: 12px;
  color: var(--blue);
  margin-bottom: 22px;
}
.setup-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  background: var(--yellow);
  border-radius: 8px;
  transform: rotate(3deg);
  font-family: Bricolage, sans-serif;
  font-weight: 800;
}
.yellow-step {
  background: var(--yellow);
  color: var(--text);
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 15px 0 11px;
}
.points-note {
  text-align: left;
  margin: -5px 0 19px;
}
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 23px;
}
.color-choice {
  width: 37px;
  height: 40px;
  padding: 7px;
  color: #272522;
  background: var(--piece-color);
  border: 2px solid transparent;
  border-radius: 9px;
  box-shadow: 0 3px 0 #27252222;
  transition: transform 0.15s;
}
.color-choice .icon {
  width: 20px;
  height: 20px;
}
.color-choice.selected {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.color-choice:not(:disabled):hover {
  transform: translateY(-3px);
}
.color-choice:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  box-shadow: none;
}
.color-choice:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.lobby-color {
  margin-top: 18px;
  border-top: 1px dashed var(--line);
}
.table-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.table-main {
  min-width: 0;
  display: grid;
  gap: 20px;
  align-content: start;
}
.table-board {
  overflow: hidden;
  box-shadow: 0 6px 0 #2446ed0b;
}
.table-board .board-container {
  background: radial-gradient(ellipse at center, #e3f0ff 0%, #f0f6ff 70%);
  padding: 24px;
}
.board-svg {
  filter: drop-shadow(0 5px 0 #27356218);
}
.board-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  font-size: 10px;
  color: #425573;
  padding: 5px 15px 18px;
  background: #f0f6ff;
}
.board-key > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.board-key .icon {
  width: 15px;
  height: 15px;
}
.goal-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff0b1;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.goal-chip .icon {
  width: 17px;
  height: 17px;
}
.room-controls {
  flex-wrap: wrap;
}
.construction-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 17px 20px;
  border-top: 1px solid #d8e2ff;
}
.build-card {
  background: #fffdf7;
  border: 1px solid #d7d6cd;
  border-radius: 10px;
  padding: 12px;
  color: var(--text);
  text-align: left;
}
.build-card > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.build-card > span .icon {
  color: var(--blue);
  width: 20px;
  height: 20px;
}
.build-card > small {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  color: #827a6a;
}
.build-card > small .icon {
  width: 14px;
  height: 14px;
}
.build-card.selected {
  border-color: var(--blue);
  background: #edf0ff;
}
.build-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.turn-bar {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #fffdf7;
}
.dice-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.die {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 36px;
  height: 36px;
  background: white;
  padding: 6px;
  border: 1.5px solid #272522;
  border-radius: 7px;
  box-shadow: 0 3px 0 #d3cebf;
}
.die i {
  border-radius: 50%;
}
.die i.dot {
  background: var(--text);
}
.dice-plus {
  color: #a7a092;
  font-size: 13px;
}
.roll-caption {
  color: #817a6b;
  font-size: 10px;
  margin-left: 3px;
}
.score-track {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #eeebe2;
  margin-top: 7px;
  overflow: hidden;
}
.score-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.player-row > div {
  flex: 1;
  min-width: 0;
}
.player-score small {
  white-space: nowrap;
}
.hand-panel {
  padding: 22px;
}
.hand-panel .eyebrow {
  font-size: 9px;
  margin-bottom: 5px;
}
.hand-panel h3 {
  font-size: 21px;
}
.private-label {
  font-size: 10px;
  color: #908777;
}
.resource-hand {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}
.resource-card {
  --card-color: #d5e8c6;
  position: relative;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  border: 1.5px solid #d5d0c4;
  border-radius: 11px;
  background: #fffdf7;
  text-align: left;
  box-shadow: 0 5px 0 #d8d3c5;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.resource-card:hover {
  border-color: var(--blue);
}
.resource-card.offering {
  border-color: var(--blue);
  box-shadow: 0 5px 0 var(--blue);
}
.resource-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--card-color);
}
.card-top .icon {
  width: 19px;
  height: 19px;
}
.card-top strong {
  font:
    800 23px Bricolage,
    sans-serif;
}
.resource-art {
  display: block;
  height: 100px;
  background-image: url("/assets/mesa-terrains.png");
  background-size: 300% 200%;
}
.art-wood {
  background-position: 0 0;
}
.art-brick {
  background-position: 50% 0;
}
.art-sheep {
  background-position: 100% 0;
}
.art-wheat {
  background-position: 0 100%;
}
.art-ore {
  background-position: 50% 100%;
}
.card-wood {
  --card-color: #d5e8c6;
}
.card-brick {
  --card-color: #ffc8ae;
}
.card-sheep {
  --card-color: #e2f0ab;
}
.card-wheat {
  --card-color: #ffe183;
}
.card-ore {
  --card-color: #c8ddf6;
}
.card-bottom {
  display: block;
  padding: 9px 10px;
  font:
    800 13px Bricolage,
    sans-serif;
}
.card-bottom small {
  display: block;
  font:
    600 7px DM,
    sans-serif;
  letter-spacing: 1.2px;
  color: #969080;
  margin-top: 3px;
}
.hand-hint {
  font-size: 10px;
  color: #938a79;
  margin: 17px 0 0;
}
.trade-panel {
  background: #fffdf7;
}
.trade-panel .eyebrow {
  font-size: 8px;
  margin-bottom: 5px;
}
.trade-symbol {
  font-size: 29px;
  color: var(--blue);
}
.trade-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 16px 0;
}
.mini-resource {
  overflow: hidden;
  border: 1px solid #dbd5c8;
  border-radius: 8px;
  background: var(--card-color);
}
.mini-resource .resource-art {
  height: 80px;
}
.mini-resource > span:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 2px;
  font-size: 10px;
  font-weight: 600;
}
.mini-resource .icon {
  width: 14px;
  height: 14px;
}
.swap-arrow {
  color: var(--blue);
}
.trade-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}
.trade-count input {
  width: 65px;
  padding: 9px;
  text-align: center;
}
.trade-explanation {
  font-size: 10px;
  line-height: 1.6;
  color: #8c826d;
  margin: 14px 0;
  min-height: 30px;
}
.prototype-note {
  font-size: 10px;
  line-height: 1.6;
  color: #9a927f;
  margin: 0;
}

@media (max-width: 1050px) {
  .table-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .table-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .event-panel {
    grid-column: 1 / -1;
  }
  .setup-badge {
    display: none;
  }
}
@media (max-width: 760px) {
  .map-preview {
    position: static;
  }
  .map-preview .board-container {
    height: 360px;
  }
  .table-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .configuration {
    order: 0;
  }
  .map-preview {
    order: 1;
  }
  .hand-panel {
    padding: 15px;
  }
  .hand-panel h3 {
    font-size: 18px;
  }
  .hand-panel .panel-heading {
    align-items: flex-start;
    gap: 9px;
  }
  .private-label {
    max-width: 84px;
    font-size: 9px;
    text-align: right;
    line-height: 1.5;
  }
  .resource-hand {
    gap: 6px;
  }
  .card-top {
    padding: 6px;
  }
  .card-top .icon {
    width: 14px;
    height: 14px;
  }
  .card-top strong {
    font-size: 19px;
  }
  .resource-art {
    height: 66px;
  }
  .card-bottom {
    padding: 7px 3px;
    font-size: 8px;
    text-align: center;
  }
  .card-bottom small {
    font-size: 5px;
    letter-spacing: 0.5px;
  }
  .board-key {
    gap: 7px;
    font-size: 8px;
  }
  .board-key .icon {
    width: 12px;
    height: 12px;
  }
  .construction-tools {
    gap: 6px;
    padding: 12px;
  }
  .build-card {
    padding: 8px;
  }
  .build-card > span {
    font-size: 9px;
    gap: 4px;
  }
  .build-card > span .icon {
    width: 15px;
    height: 15px;
  }
  .build-card > small {
    gap: 3px;
  }
  .build-card > small .icon {
    width: 11px;
    height: 11px;
  }
  .turn-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .dice-result {
    justify-content: center;
  }
  .dice-controls {
    justify-content: center;
  }
  .table-board .board-container {
    padding: 14px 5px;
    min-height: 260px;
  }
  .lobby-color .color-picker {
    gap: 11px;
  }
  .goal-chip {
    font-size: 10px;
  }
  .prototype-note {
    font-size: 9px;
  }
}

/* A warm tabletop, matching the Mesa entry. */
.map-preview,
.table-board {
  background: #f2e7ce;
  background-image: none;
  border: 2px solid #39342b;
  box-shadow: 0 5px 0 #d9ceb5;
}
.table-board .board-container,
.map-preview .board-container {
  background: #f2e7ce;
}
.table-board .preview-heading,
.map-preview .preview-heading,
.preview-foot {
  background: #fffaf0;
  color: #39342b;
  border-color: #ddcfb0;
}
.table-board .preview-heading {
  font-size: 12px;
}
.board-svg {
  filter: drop-shadow(0 4px 0 #40311b22);
}
.board-key {
  background: #f2e7ce;
  color: #39342b;
  font-size: 12px;
  padding-bottom: 10px;
}
.board-key .icon {
  width: 18px;
  height: 18px;
}
.port-detail {
  background: #f2e7ce;
  color: #76623d;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding: 0 18px 17px;
  min-height: 35px;
}
.port-badge {
  cursor: pointer;
}
.port-badge:hover,
.port-badge:focus-within {
  filter: drop-shadow(0 0 3px #2446ed);
  outline: none;
}
.construction-tools {
  background: #fffaf0;
  border-color: #ddcfb0;
}
.build-card {
  border-color: #d3c4a2;
}
.build-card.selected {
  border: 2px solid #2446ed;
  background: #fff2b8;
}
.build-card > span {
  font-family: Bricolage, sans-serif;
  font-size: 14px;
}
.resource-art {
  background-image: url("/assets/mesa-terrains-v2.png");
}
.card-wood {
  --card-color: #c7ebbc;
}
.card-brick {
  --card-color: #ffb49e;
}
.card-sheep {
  --card-color: #ddefa2;
}
.card-wheat {
  --card-color: #ffe16a;
}
.card-ore {
  --card-color: #adcaff;
}
.resource-card {
  border: 2px solid #39342b;
  box-shadow: 0 4px 0 #d5c8ae;
}
.resource-card.offering {
  box-shadow: 0 5px 0 #2446ed;
}
.card-bottom {
  font-size: 15px;
}
.card-bottom small {
  font-size: 8px;
}
.trade-panel {
  border: 2px solid #39342b;
  box-shadow: 0 4px 0 #e4dbc7;
}
.trade-panel label,
.trade-count,
.trade-explanation {
  font-size: 12px;
}
.trade-panel .config-note {
  font-size: 11px;
}
.mini-resource > span:last-child {
  font-size: 12px;
  padding: 9px 3px;
}
.player-row strong {
  font-size: 13px;
}
.player-row > div > span {
  font-size: 11px;
}
.event-log {
  font-size: 12px;
}
.private-label,
.hand-hint {
  font-size: 12px;
}
.auth-tabs {
  flex-wrap: wrap;
}
.auth-tabs button[hidden] {
  display: none;
}
[data-guest="true"] .main-nav {
  display: none;
}

/* Shared room chat and fullscreen controls, independent of the game module. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.room-social {
  position: fixed;
  right: 24px;
  bottom: 23px;
  z-index: 60;
  width: 370px;
  max-width: calc(100vw - 32px);
}
.social-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.social-buttons .button {
  font-size: 12px;
  min-height: 45px;
  background: #fffaf0;
  border: 1.5px solid #39342b;
  box-shadow: 0 3px 0 #d9ceb5;
}
.social-buttons .button.yellow {
  background: var(--yellow);
}
#chat-unread {
  background: var(--red);
  color: #fff;
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 10px;
}
.chat-panel {
  display: flex;
  flex-direction: column;
  border: 2px solid #39342b;
  border-radius: 17px;
  overflow: hidden;
  background: #fffdf7;
  box-shadow: 6px 7px 0 #39342b26;
}
.chat-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #ffda55;
  padding: 18px;
  border-bottom: 2px solid #39342b;
}
.chat-heading .eyebrow {
  color: #6e5521;
  font-size: 8px;
}
.chat-heading h2 {
  margin: 4px 0 0;
  font-size: 24px;
}
.chat-heading button {
  width: 33px;
  height: 33px;
  border: 1.5px solid #39342b;
  border-radius: 8px;
  background: #fffaf0;
  font-size: 21px;
  color: var(--text);
}
.chat-messages {
  list-style: none;
  padding: 17px;
  margin: 0;
  height: min(330px, 42dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.chat-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 29px;
  height: 31px;
  border-radius: 7px;
  background: var(--player);
  border: 1px solid #39342b;
  font:
    800 15px Bricolage,
    sans-serif;
}
.chat-message > div {
  min-width: 0;
  flex: 1;
}
.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}
.message-meta strong {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.message-meta time {
  font-size: 9px;
  color: #8e8270;
}
.message-text {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding: 9px 11px;
  background: #f2eddf;
  border-radius: 0 9px 9px 9px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.own-message .message-text {
  background: #e9edff;
}
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  height: 100%;
  color: #8e8067;
  font-size: 12px;
  line-height: 1.5;
}
.chat-empty .icon {
  width: 35px;
  height: 35px;
  color: #2446ed;
}
.chat-empty strong {
  font:
    800 19px Bricolage,
    sans-serif;
  color: var(--text);
}
#chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e3d9c3;
  background: #fffaf0;
  padding: 13px;
}
#chat-input {
  resize: none;
  min-height: 58px;
  border: 1px solid #cbbd9e;
  border-radius: 9px;
  font:
    400 12px DM,
    sans-serif;
  padding: 10px;
  background: white;
  color: var(--text);
}
#chat-input:focus {
  outline: 2px solid #2446ed;
  outline-offset: 1px;
}
#chat-error {
  grid-column: 1/-1;
  margin: 0;
  font-size: 11px;
}
#chat-error:empty {
  display: none;
}
body[data-view="room"] {
  padding-bottom: 70px;
}
.focus-mode .site-header,
.focus-mode .site-footer {
  display: none;
}
.focus-mode .shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 35px 90px;
}
.focus-mode .room-heading {
  margin-bottom: 20px;
}
.focus-mode .room-heading h1 {
  font-size: 29px;
}
.focus-mode .room-heading .eyebrow {
  display: none;
}
.focus-mode .room-heading p {
  font-size: 12px;
  margin-top: 7px;
}
.focus-mode .table-board .board-svg {
  max-height: min(610px, 65dvh);
}
@media (max-width: 760px) {
  .room-social {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-width: none;
  }
  .social-buttons {
    justify-content: stretch;
  }
  .social-buttons .button {
    flex: 1;
    justify-content: center;
    font-size: 12px;
  }
  .chat-panel {
    max-height: 72dvh;
  }
  .chat-messages {
    height: 35dvh;
  }
  .chat-heading {
    padding: 13px 16px;
  }
  .chat-heading h2 {
    font-size: 21px;
  }
  .chat-heading .eyebrow {
    font-size: 8px;
  }
  #chat-input {
    font-size: 16px;
  }
  .focus-mode .shell {
    padding: 16px 14px 85px;
  }
  .focus-mode .room-heading h1 {
    font-size: 24px;
  }
  .table-board .preview-heading {
    font-size: 10px;
  }
  .board-key {
    font-size: 9px;
    gap: 8px;
  }
  .board-key .icon {
    width: 14px;
    height: 14px;
  }
  .port-detail {
    font-size: 10px;
    padding: 0 13px 12px;
  }
  .build-card > span {
    font-size: 11px;
  }
  .card-bottom {
    font-size: 9px;
  }
  .card-bottom small {
    font-size: 6px;
  }
  .hand-hint,
  .private-label {
    font-size: 10px;
  }
  .resource-art {
    height: 74px;
  }
  .auth-tabs button {
    font-size: 12px;
  }
}

/* The lobby belongs to the game: settings, friends, and one shared island. */
.lobby-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.lobby-side {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.lobby-settings {
  border-top: 7px solid var(--blue, #2446ed);
}
.lobby-settings form {
  display: grid;
  gap: 14px;
}
.lobby-settings .panel-heading {
  margin-bottom: 20px;
}
.lobby-setting-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #ffda55;
  border: 2px solid #242321;
  border-radius: 14px;
  transform: rotate(7deg);
  flex-shrink: 0;
}
.lobby-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lobby-settings .config-note {
  margin: 0;
}
.lobby-map {
  position: sticky;
  top: 24px;
  overflow: hidden;
  min-width: 0;
}
.lobby-map .board-container {
  height: clamp(350px, 43vw, 610px);
}
.lobby-map-note {
  padding: 12px 22px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5c564b;
}
.lobby-map .preview-heading {
  flex-wrap: wrap;
  gap: 10px;
}
.lobby-map-footer {
  padding: 24px;
  border-top: 2px solid #292620;
  background: #fffaf0;
}
.lobby-map-footer p {
  margin: 15px 0 0;
  line-height: 1.6;
  color: #615a4f;
  font-size: 14px;
}
.lobby-empty-seat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: #776f63;
  font-size: 12px;
}
.lobby-empty-seat > span {
  display: grid;
  place-items: center;
  height: 35px;
  width: 35px;
  border: 2px dashed #c2b7a3;
  border-radius: 12px;
  font-size: 21px;
}
.lobby-summary {
  display: grid;
  gap: 14px;
}
.lobby-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.lobby-summary span {
  color: #776f63;
}
.lobby-summary strong {
  text-align: right;
}
@media (max-width: 1000px) {
  .lobby-layout {
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 16px;
  }
  .lobby-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .lobby-layout {
    grid-template-columns: 1fr;
  }
  .lobby-map {
    position: static;
  }
  .lobby-map .board-container {
    height: 360px;
  }
  .lobby-fields {
    grid-template-columns: 1fr 1fr;
  }
  .lobby-map-footer {
    padding: 18px;
  }
  .lobby-map-footer .sticker {
    font-size: 10px;
  }
}
.lobby-map {
  position: static;
}
.lobby-settings label {
  margin-bottom: 0;
}
.lobby-settings form > p.config-note,
.lobby-settings .config-note {
  font-size: 12px;
  line-height: 1.5;
}

.turn-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 2px solid #d7cbb6;
  border-radius: 18px;
  background: #fffaf0;
  margin-bottom: 18px;
}
.turn-notice.your-turn {
  border-color: #2446ed;
  background: #ffed96;
  box-shadow: 0 4px 0 #2446ed;
}
.turn-notice-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #2446ed;
  color: white;
  flex-shrink: 0;
}
.turn-notice strong {
  font-family: Bricolage, sans-serif;
  font-size: 20px;
}
.turn-notice p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.robber-dialog {
  width: min(480px, calc(100vw - 32px));
  border: 2px solid #292620;
  border-radius: 24px;
  padding: 30px;
  background: #fffaf0;
}
.robber-dialog h2 {
  margin: 14px 0;
  font-size: 30px;
}
.robber-dialog > p {
  font-size: 14px;
  line-height: 1.6;
}
.robber-victims {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}
.robber-victim {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 2px solid #d7cbb6;
  border-radius: 15px;
  padding: 14px;
  margin: 0;
  cursor: pointer;
}
.robber-victim:has(input:checked) {
  border-color: #2446ed;
  background: #fff0a8;
}
.robber-victim input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: #2446ed;
  flex-shrink: 0;
}
.robber-victim small {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  color: #746b5c;
}
.robber-victim.empty-hand {
  opacity: 0.55;
  cursor: default;
}
.robber-dialog .text-button {
  display: block;
  margin: 18px auto 0;
}

/* A full viewport table. Only the selected drawer adds detail. */
body[data-playing="true"] {
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
}
body[data-playing="true"] .site-header {
  height: 64px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
body[data-playing="true"] .site-footer {
  display: none;
}
body[data-playing="true"] .shell {
  height: calc(100dvh - 64px);
  margin: 0 auto;
  max-width: none;
  padding: 12px;
}
body[data-playing="true"] #content {
  height: 100%;
}
.game-viewport {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 38px 36px 38px minmax(0, 1fr) 100px;
  gap: 8px;
  padding: 12px;
  border: 2px solid #292620;
  border-radius: 22px;
  background: #f2e7ce;
  overflow: hidden;
}
.game-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 98px;
  min-width: 0;
}
.game-topbar h1 {
  font-size: 22px;
  letter-spacing: -0.7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game-goal,
.game-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.game-goal .icon,
.game-clock .icon {
  width: 17px;
  height: 17px;
}
.game-clock .urgent {
  color: #ce3527;
  font-weight: 800;
}
.game-extras {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 12px;
}
.game-extras .text-button {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.game-players {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.game-players .game-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid #d1c6b3;
  border-radius: 12px;
  background: #fffaf0;
  margin: 0;
}
.game-players .current-player {
  outline: 2px solid #2446ed;
  background: #ffeb8a;
}
.game-players .player-avatar {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
}
.game-players strong {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-players .player-score {
  margin-left: auto;
  font-size: 15px;
}
.game-viewport .turn-notice {
  padding: 6px 12px;
  margin: 0;
  gap: 12px;
  border-width: 1px;
  box-shadow: none;
  border-radius: 10px;
  overflow: hidden;
}
.game-viewport .turn-notice strong {
  font-size: 14px;
  flex-shrink: 0;
}
.game-viewport .turn-notice p {
  margin: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-map {
  position: relative;
  min-height: 0;
  min-width: 0;
}
.game-map .board-container {
  height: 100%;
  min-height: 0;
  padding: 8px;
  background: transparent;
}
.game-map .board-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
}
.game-map .port-detail {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fffaf0;
  font-size: 12px;
  box-shadow: 0 2px 8px #29262020;
}
.game-dock {
  display: grid;
  gap: 8px;
  align-content: center;
  border-top: 1px solid #d7cbb6;
  padding-top: 8px;
}
.game-dock .construction-tools {
  display: flex;
  gap: 8px;
  padding: 0;
  border: 0;
  justify-content: center;
}
.game-dock .build-card {
  width: 135px;
  flex: 0 1 135px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #bdb39f;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: none;
}
.game-dock .build-card.selected {
  border-color: #2446ed;
  background: #ffed96;
}
.game-dock .build-card > span {
  justify-content: center;
  gap: 5px;
}
.game-dock .build-card strong {
  font-size: 12px;
}
.game-dock .build-card .icon {
  width: 16px;
  height: 16px;
}
.game-dock .build-card small {
  display: none;
}
.game-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.game-actions .button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 10px;
}
.game-actions .dice-result {
  gap: 3px;
  min-height: 0;
  padding: 0;
}
.game-actions .die {
  width: 26px;
  height: 26px;
  border-width: 1px;
  border-radius: 6px;
  gap: 2px;
  padding: 4px;
  box-shadow: none;
}
.game-actions .die i {
  width: 3px;
  height: 3px;
}
.game-actions .dice-plus {
  font-size: 12px;
}
.game-drawer {
  position: absolute;
  right: 12px;
  bottom: 120px;
  width: min(500px, calc(100% - 24px));
  max-height: calc(100% - 180px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 2px solid #292620;
  border-radius: 20px;
  padding: 24px;
  background: #fffaf0;
  box-shadow: 5px 6px 0 #29262020;
  z-index: 20;
}
.game-drawer > h2 {
  font-size: 26px;
  padding-right: 20px;
  margin-bottom: 12px;
}
.game-drawer .panel {
  border: 0;
  padding: 0;
  background: transparent;
}
.game-drawer .close-dialog {
  top: 12px;
  right: 12px;
}
.game-drawer .resource-hand {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.game-drawer .resource-card {
  min-height: 125px;
}
.game-drawer .resource-art {
  height: 70px;
}
.game-drawer .card-top,
.game-drawer .card-bottom {
  padding: 6px;
}
.game-drawer .card-bottom {
  font-size: 11px;
}
.game-drawer .card-bottom small {
  display: none;
}
.game-drawer .hand-panel h3 {
  font-size: 21px;
}
.game-drawer .config-note {
  font-size: 12px;
  line-height: 1.5;
}
.game-drawer details {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #d7cbb6;
}
.game-drawer summary {
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
}
.bundle-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.bundle-columns fieldset {
  min-width: 0;
  border: 1px solid #d7cbb6;
  border-radius: 12px;
  padding: 12px;
}
.bundle-columns legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0 5px;
}
.bundle-columns label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 0 0 8px;
}
.bundle-columns .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.bundle-columns input {
  width: 58px;
  min-height: 32px;
  padding: 5px;
  margin: 0 0 0 auto;
}
.friend-offers {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.friend-offer {
  padding: 14px;
  border: 1px solid #d7cbb6;
  border-radius: 12px;
  font-size: 13px;
}
.offer-bundles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.offer-bundles > div {
  display: grid;
  gap: 5px;
}
.offer-bundles span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.offer-bundles .icon {
  width: 28px;
  height: 28px;
}
.development-hand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.development-card {
  padding: 16px;
  border: 2px solid #292620;
  border-radius: 16px;
  background: #f0ebff;
}
.dev-patrol {
  background: #dce4ff;
}
.dev-roads {
  background: #ffed96;
}
.dev-supply {
  background: #e1f3de;
}
.dev-requisition {
  background: #ffded8;
}
.dev-prestige {
  background: #ffe8ae;
}
.development-symbol {
  margin-bottom: 10px;
}
.development-symbol .icon {
  width: 40px;
  height: 40px;
}
.development-card h3 {
  font-size: 20px;
}
.development-card p {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 14px;
}
.development-card .button {
  font-size: 11px;
  padding: 8px;
}
.development-card > strong {
  font-size: 12px;
}
body[data-playing="true"] .room-social {
  top: 82px;
  right: 26px;
  bottom: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}
body[data-playing="true"] .social-buttons,
body[data-playing="true"] .chat-panel {
  pointer-events: auto;
}
body[data-playing="true"] .social-buttons {
  margin: 0;
}
body[data-playing="true"] .social-buttons .button {
  width: 36px;
  min-height: 36px;
  padding: 8px;
  font-size: 0;
  border-radius: 10px;
  gap: 0;
}
body[data-playing="true"] .social-buttons .icon {
  width: 19px;
  height: 19px;
}
body[data-playing="true"] .chat-panel {
  max-height: calc(100dvh - 145px);
}
.focus-mode .game-extras,
.focus-mode #invite,
.focus-mode .room-controls a {
  display: none;
}
body[data-playing="true"].focus-mode .shell {
  height: 100dvh;
  padding: 8px;
}
body[data-playing="true"].focus-mode .room-social {
  top: 28px;
  right: 22px;
}
@media (max-width: 760px) {
  body[data-playing="true"] .site-header {
    height: 56px;
  }
  body[data-playing="true"] .shell {
    height: calc(100dvh - 56px);
    padding: 8px;
  }
  .game-viewport {
    padding: 8px;
    border-radius: 16px;
    grid-template-rows: 36px 32px 42px minmax(0, 1fr) 96px;
    gap: 6px;
  }
  .game-topbar {
    gap: 8px;
    padding-right: 80px;
  }
  .game-topbar h1 {
    font-size: 17px;
    flex: 1;
  }
  .game-goal {
    display: none;
  }
  .game-clock {
    font-size: 11px;
  }
  .game-extras {
    display: none;
  }
  .game-players {
    gap: 4px;
  }
  .game-players .game-player {
    padding: 4px;
    gap: 4px;
  }
  .game-players .player-avatar {
    display: none;
  }
  .game-players strong {
    font-size: 10px;
  }
  .game-players .player-score {
    font-size: 12px;
  }
  .game-viewport .turn-notice {
    gap: 8px;
    padding: 6px 8px;
  }
  .game-viewport .turn-notice strong {
    font-size: 12px;
  }
  .game-viewport .turn-notice p {
    font-size: 11px;
    white-space: normal;
    line-height: 1.3;
  }
  .game-dock .construction-tools {
    gap: 4px;
  }
  .game-dock .build-card {
    flex: 1;
    width: auto;
    padding: 8px 4px;
  }
  .game-dock .build-card strong {
    font-size: 10px;
  }
  .game-dock .build-card .icon {
    width: 15px;
    height: 15px;
  }
  .game-actions {
    gap: 4px;
  }
  .game-actions .button {
    font-size: 10px;
    padding: 8px;
  }
  .game-actions .button .icon {
    width: 14px;
    height: 14px;
  }
  .game-actions #roll span {
    display: none;
  }
  .game-actions #roll {
    min-width: 34px;
  }
  .game-actions .die {
    width: 22px;
    height: 22px;
    padding: 3px;
  }
  .game-actions .die i {
    width: 2px;
    height: 2px;
  }
  .game-drawer {
    padding: 20px 14px;
    bottom: 116px;
    right: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 165px);
  }
  .game-drawer .resource-card {
    min-height: 95px;
  }
  .game-drawer .resource-art {
    height: 40px;
  }
  .game-drawer .card-top strong {
    font-size: 19px;
  }
  .game-drawer .card-top .icon {
    width: 13px;
    height: 13px;
  }
  .game-drawer .card-bottom {
    font-size: 9px;
  }
  .bundle-columns {
    gap: 6px;
  }
  .bundle-columns fieldset {
    padding: 8px;
  }
  .bundle-columns label {
    font-size: 10px;
  }
  .bundle-columns input {
    width: 40px;
  }
  body[data-playing="true"] .room-social {
    top: 72px;
    right: 20px;
    width: calc(100vw - 32px);
  }
  .room-social .social-buttons {
    gap: 6px;
  }
  body[data-playing="true"].focus-mode .room-social {
    top: 22px;
    right: 16px;
  }
}
body[data-playing="true"] .social-buttons {
  width: auto;
  align-self: flex-end;
}
body[data-playing="true"] .social-buttons .button {
  flex: 0 0 36px;
}

.neutral-picker {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.neutral-picker .button {
  min-height: 30px;
  padding: 5px 9px;
}
.neutral-picker .selected {
  box-shadow: inset 0 0 0 2px var(--blue);
}
.neutral-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--player);
}
.duel-tokens {
  padding: 12px;
  border-radius: 16px;
  background: #fff2bc;
  margin-bottom: 16px;
}
.duel-token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.duel-rolls {
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .neutral-picker .button {
    font-size: 11px;
    padding: 4px 6px;
  }
  .turn-notice:has(.neutral-picker) {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
}

.game-viewport:has(.neutral-picker) {
  grid-template-rows: 38px 36px auto minmax(0, 1fr) 100px;
}
@media (max-width: 760px) {
  .game-viewport:has(.neutral-picker) {
    grid-template-rows: 36px 32px auto minmax(0, 1fr) 96px;
  }
  .game-viewport .turn-notice:has(.neutral-picker) {
    flex-wrap: wrap;
  }
}

/* Mesa tabletop: players at the side, individual cards always in hand. */
.game-viewport.table-v2 {
  grid-template-rows: 34px auto minmax(0, 1fr) 178px;
  gap: 9px;
  padding: 14px 18px;
  background: #f5ead2;
}
.table-v2 .game-topbar h1 {
  font-size: 19px;
}
.table-v2 .game-topbar {
  padding-right: 90px;
}
.table-v2 .game-goal {
  font-size: 12px;
  color: #776a55;
}
.table-v2 .turn-notice {
  min-height: 32px;
  background: #fffbf1;
}
.table-v2 .turn-notice.your-turn {
  background: #fff0a8;
}
.table-play-area {
  min-height: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}
.table-v2 .game-players {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  align-self: start;
  max-height: 100%;
  padding: 3px;
  scrollbar-width: thin;
}
.table-v2 .game-player {
  position: relative;
  display: block;
  flex: 0 0 auto;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid #d8cbb1;
  border-radius: 15px;
  background: #fffcf4;
  box-shadow: 0 3px 0 #dccfb73b;
  overflow: hidden;
}
.table-v2 .current-player {
  outline: 0;
  border: 2px solid var(--player, #2446ed);
  padding: 10px 11px;
  background: #fff8df;
}
.player-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.table-v2 .player-avatar {
  display: flex;
  width: 27px;
  height: 27px;
  border-radius: 9px;
}
.table-v2 .player-identity strong {
  font-size: 12px;
  flex: 1;
  display: block;
}
.player-identity strong small {
  font:
    400 9px "DM Sans",
    sans-serif;
  display: block;
  color: #887a65;
}
.player-countdown {
  flex: 0 0 auto;
  font:
    800 14px Bricolage,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.player-countdown.urgent {
  color: #dc4436;
}
.player-metrics {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: #6c604d;
}
.player-metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.table-v2 .player-metrics .player-score {
  margin: 0;
  font:
    800 13px Bricolage,
    sans-serif;
  color: #292620;
}
.player-metrics .icon {
  width: 15px;
  height: 15px;
}
.player-turn-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7b6950;
  margin-top: 7px;
}
.turn-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #ded3bb;
}
.turn-progress::after {
  content: "";
  display: block;
  width: calc(100% * var(--remaining));
  height: 100%;
  background: var(--player, #2446ed);
  transition: width 1s linear;
}
.table-v2 .game-map {
  min-width: 0;
}
.table-v2 .board-container {
  padding: 6px 12px;
}
.table-v2 .game-dock {
  display: grid;
  grid-template-rows: 42px 124px;
  gap: 8px;
  align-content: normal;
  border-top: 1px solid #d9ceb8;
  padding-top: 5px;
}
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.table-v2 .construction-tools {
  gap: 8px;
}
.table-v2 .game-actions {
  gap: 8px;
  flex: 0 0 auto;
  justify-content: initial;
}
.tool-slot {
  position: relative;
  display: inline-flex;
}
.build-icon,
.table-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #cabda34d;
  color: #514736;
  background: #fffcf366;
  box-shadow: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
}
.build-icon .icon,
.table-icon-action .icon {
  width: 25px;
  height: 25px;
}
.build-icon.selected {
  background: #fff098b3;
  border-color: #2446ed;
  color: #2446ed;
  box-shadow: none;
}
.build-icon:not(:disabled):hover,
.table-icon-action:not(:disabled):hover {
  transform: translateY(-2px);
  background: #fff0a7b3;
}
.build-icon:focus-visible,
.table-icon-action:focus-visible {
  outline: 3px solid #2446ed;
  outline-offset: 3px;
}
.build-icon:disabled,
.table-icon-action:disabled {
  opacity: 0.38;
  cursor: default;
}
.development-tool {
  color: #2446ed;
  background: #eeefff66;
}
.end-turn {
  background: #ffe164b3;
  border-color: #d2b84680;
}
.build-tooltip {
  display: none;
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 14px;
  border: 1px solid #d8ccb6;
  border-radius: 14px;
  background: #fffdf5;
  box-shadow: 0 6px 24px #49392224;
  pointer-events: none;
}
.tool-slot:hover .build-tooltip,
.tool-slot:focus-within .build-tooltip {
  display: grid;
  gap: 8px;
}
.build-tooltip strong {
  font:
    800 17px Bricolage,
    sans-serif;
}
.build-tooltip small {
  color: #877962;
  font-size: 11px;
}
.tool-materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tool-materials > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.tool-materials .icon {
  width: 18px;
  height: 18px;
}
.offer-badge {
  position: absolute;
  right: -4px;
  top: -5px;
  font-size: 10px;
  border-radius: 50%;
  min-width: 17px;
  height: 17px;
  background: #ef4c39;
  color: white;
  display: grid;
  place-items: center;
}
.fixed-hand {
  --card-width: 74px;
  min-width: 0;
  padding: 4px 10px 0;
}
.fixed-hand-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.fixed-hand-heading > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #71634d;
}
.fixed-hand-heading small {
  font-size: 9px;
  color: #9c8d75;
}
.hand-cards-row {
  display: flex;
  gap: 18px;
  align-items: end;
  min-width: 0;
  height: 96px;
  max-width: 940px;
  margin: 0 auto;
}
.resource-fan {
  display: flex;
  align-items: end;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.hand-group {
  display: grid;
  flex: var(--quantity);
  min-width: var(--card-width);
  grid-template-columns: repeat(var(--quantity), minmax(0, 1fr));
  padding-right: var(--card-width);
  height: 100%;
}
.fixed-hand .resource-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-color);
  width: var(--card-width);
  height: 96px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 3px 0 #bcad8e;
  border: 1.5px solid #a69a82;
  border-radius: 9px;
}
.fixed-hand .resource-card:hover,
.fixed-hand .resource-card:focus-visible {
  border-color: #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
.fixed-hand .resource-card.offering {
  border-color: #a69a82;
  box-shadow: 0 3px 0 #bcad8e;
}
.fixed-hand .resource-card:hover.offering {
  border-color: #2446ed;
}

.fixed-hand .card-bottom {
  display: block;
  font:
    700 10px "DM Sans",
    sans-serif;
  padding: 4px 5px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.empty-hand {
  align-self: center;
  font-size: 12px;
  color: #9c8d75;
  margin: auto;
}
.fixed-development {
  display: grid;
  grid-template-columns: repeat(var(--quantity), minmax(0, 1fr));
  width: min(26%, calc(60px + var(--quantity) * 24px));
  min-width: 60px;
  padding-right: 58px;
  border-left: 1px dashed #ad9f85;
  padding-left: 14px;
  height: 96px;
}
.hand-dev-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 58px;
  height: 96px;
  border: 1.5px solid #baa783;
  border-radius: 9px;
  background: #f9d775;
  box-shadow: 0 3px 0 #bcad8e;
  color: #51432c;
  cursor: pointer;
}
.hand-dev-card .icon {
  width: 29px;
  height: 29px;
}
.hand-dev-card span {
  font:
    700 8px "DM Sans",
    sans-serif;
}
.hand-dev-card:hover,
.hand-dev-card:focus-visible {
  border-color: #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
.hand-dev-card.dev-prestige {
  background: #bcd2ff;
  color: #2446ed;
}
.roll-prompt {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  text-align: center;
  gap: 12px;
  padding: 22px 30px;
  border: 1px solid #ffffffc9;
  border-radius: 25px;
  background: #fff9e6ed;
  box-shadow: 0 12px 50px #3e362932;
  backdrop-filter: blur(8px);
}
.roll-prompt > .eyebrow {
  color: #8c7659;
  font-size: 8px;
  letter-spacing: 1.4px;
  margin: 0;
}
.roll-dice-button {
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 0;
  color: #2446ed;
}
.roll-dice-button strong {
  font:
    800 17px Bricolage,
    sans-serif;
}
.roll-dice-art {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.roll-dice-art .die {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  padding: 11px;
  border: 2px solid #292620;
  box-shadow: 0 5px 0 #292620;
  background: #fffdf6;
}
.roll-dice-art .die:nth-child(2) {
  transform: rotate(12deg);
  background: #ffe164;
}
.roll-dice-art .die .dot {
  background: #292620;
}
.roll-dice-button:hover .roll-dice-art .die {
  transform: rotate(-8deg) translateY(-3px);
}
.roll-dice-button:focus-visible {
  outline: 3px solid #2446ed;
  outline-offset: 8px;
  border-radius: 12px;
}
.rolling .roll-dice-art .die {
  animation: mesa-roll 0.2s alternate infinite;
}
.rolling .roll-dice-art .die:nth-child(2) {
  animation-delay: -0.1s;
}
@keyframes mesa-roll {
  from {
    transform: rotate(-12deg) translateY(-4px);
  }
  to {
    transform: rotate(12deg) translateY(2px);
  }
}
.map-dice-result {
  position: absolute;
  right: 10px;
  top: 5px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 13px;
  background: #fffcf2c9;
}
.map-dice-result .die {
  width: 29px;
  height: 29px;
}
.map-dice-result strong {
  font:
    800 15px Bricolage,
    sans-serif;
  margin-left: 4px;
}
.table-v2 .game-drawer {
  bottom: 186px;
  max-height: calc(100% - 215px);
  width: min(580px, calc(100% - 24px));
}
.bundle-resource-name {
  display: flex;
  gap: 7px;
  align-items: center;
  flex: 1;
}
.bundle-columns .bundle-resource {
  padding: 6px;
  border-radius: 9px;
  background: var(--card-color);
  margin-bottom: 6px;
  gap: 5px;
}
.quantity-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}
.quantity-stepper button {
  width: 24px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: #fffaf0b8;
  color: #403a2e;
  padding: 0;
  font-weight: 700;
  cursor: pointer;
}
.bundle-columns .quantity-stepper input {
  appearance: textfield;
  width: 28px;
  min-height: 28px;
  margin: 0;
  padding: 2px;
  text-align: center;
  border: 0;
  background: transparent;
}
.quantity-stepper input::-webkit-inner-spin-button {
  appearance: none;
}
.table-v2 .game-drawer .bundle-columns {
  gap: 10px;
}
.table-v2 .game-drawer .bundle-columns fieldset {
  padding: 8px;
}
@media (max-width: 900px) {
  .table-play-area {
    grid-template-columns: 175px minmax(0, 1fr);
    gap: 8px;
  }
  .table-v2 .game-player {
    padding: 8px;
  }
  .table-v2 .current-player {
    padding: 7px;
  }
  .player-metrics {
    gap: 9px;
  }
}
@media (max-width: 640px) {
  .game-viewport.table-v2 {
    grid-template-rows: 30px auto minmax(0, 1fr) 150px;
    padding: 9px;
    gap: 6px;
  }
  .table-v2 .game-topbar h1 {
    font-size: 15px;
  }
  .table-v2 .game-topbar {
    padding-right: 80px;
  }
  .table-play-area {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 5px;
  }
  .table-v2 .game-player {
    padding: 7px;
    border-radius: 11px;
    min-height: 60px;
  }
  .table-v2 .current-player {
    padding: 6px;
  }
  .table-v2 .player-avatar {
    display: none;
  }
  .table-v2 .player-identity {
    gap: 3px;
    flex-wrap: wrap;
  }
  .table-v2 .player-identity strong {
    font-size: 10px;
  }
  .player-countdown {
    font-size: 11px;
  }
  .player-metrics {
    font-size: 10px;
    gap: 7px;
    margin-top: 6px;
  }
  .player-metrics .icon {
    width: 11px;
    height: 11px;
  }
  .table-v2 .player-metrics .player-score {
    font-size: 11px;
  }
  .player-turn-label {
    font-size: 7px;
    letter-spacing: 0;
  }
  .table-v2 .board-container {
    padding: 0;
  }
  .table-v2 .game-dock {
    grid-template-rows: 36px 102px;
    gap: 5px;
    padding-top: 4px;
  }
  .table-toolbar {
    gap: 15px;
    justify-content: space-between;
  }
  .table-v2 .construction-tools,
  .table-v2 .game-actions {
    gap: 5px;
  }
  .build-icon,
  .table-icon-action {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    padding: 6px;
  }
  .build-icon .icon,
  .table-icon-action .icon {
    width: 21px;
    height: 21px;
  }
  .build-tooltip {
    width: 190px;
    left: 0;
    transform: none;
  }
  .fixed-hand {
    --card-width: 47px;
    padding: 4px 0 0;
  }
  .fixed-hand-heading {
    margin-bottom: 5px;
  }
  .hand-cards-row {
    height: 77px;
    gap: 6px;
  }
  .resource-fan {
    gap: 5px;
  }
  .fixed-hand .resource-card {
    height: 77px;
    border-radius: 6px;
  }

  .fixed-hand .card-bottom {
    font-size: 8px;
    padding: 3px 2px;
  }
  .fixed-development {
    width: min(22%, calc(42px + var(--quantity) * 12px));
    min-width: 43px;
    padding-left: 5px;
    padding-right: 41px;
    height: 77px;
  }
  .hand-dev-card {
    width: 41px;
    height: 77px;
    border-radius: 6px;
  }
  .hand-dev-card .icon {
    width: 22px;
    height: 22px;
  }
  .hand-dev-card span {
    font-size: 6px;
  }
  .roll-prompt {
    padding: 14px 15px;
    gap: 8px;
    border-radius: 18px;
  }
  .roll-prompt .eyebrow {
    display: none;
  }
  .roll-dice-art {
    gap: 9px;
  }
  .roll-dice-art .die {
    width: 40px;
    height: 40px;
    padding: 7px;
    border-radius: 10px;
    box-shadow: 0 3px 0 #292620;
  }
  .roll-dice-button strong {
    font-size: 13px;
  }
  .map-dice-result {
    top: 2px;
    right: 0;
    gap: 3px;
    padding: 5px;
  }
  .map-dice-result .die {
    width: 22px;
    height: 22px;
  }
  .table-v2 .game-drawer {
    bottom: 155px;
    max-height: calc(100% - 178px);
    padding: 17px;
  }
  .bundle-columns .bundle-resource {
    display: block;
  }
  .bundle-resource-name {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .quantity-stepper {
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rolling .roll-dice-art .die {
    animation: none;
  }
}
@media (max-width: 640px) {
  .table-play-area {
    grid-template-columns: 1fr;
    grid-template-rows: 85px minmax(0, 1fr);
    gap: 5px;
  }
  .table-v2 .game-players {
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    align-self: stretch;
    max-height: none;
    padding: 2px;
    gap: 6px;
    scrollbar-width: none;
  }
  .table-v2 .game-player {
    flex: 0 0 calc(50% - 3px);
    min-width: 0;
    align-self: start;
  }
  .table-v2 .player-avatar {
    display: flex;
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
  .table-v2 .player-identity {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .table-v2 .game-map {
    height: 100%;
  }
}
@media (max-width: 360px) {
  .fixed-hand {
    --card-width: 39px;
  }
  .fixed-development {
    min-width: 34px;
    padding-right: 33px;
    padding-left: 3px;
  }
  .hand-dev-card {
    width: 33px;
  }
  .fixed-hand .card-bottom {
    font-size: 7px;
  }
  .table-toolbar {
    gap: 8px;
  }
  .build-icon,
  .table-icon-action {
    width: 30px;
    height: 32px;
  }
  .table-v2 .construction-tools,
  .table-v2 .game-actions {
    gap: 4px;
  }
}
.table-v2 .table-toolbar {
  background: transparent;
  border: 0;
  padding: 0;
}
.table-v2 .construction-tools {
  background: transparent;
}
.hand-cards-row {
  justify-content: center;
}
.resource-fan {
  max-width: calc(
    var(--groups) * var(--card-width) + (var(--cards) - var(--groups)) * 24px +
      (var(--groups) - 1) * 12px
  );
}
@media (max-height: 520px) and (min-width: 641px) {
  .game-viewport.table-v2 {
    grid-template-rows: 26px auto minmax(0, 1fr) 120px;
    padding: 7px 12px;
    gap: 5px;
  }
  .table-v2 .game-dock {
    grid-template-rows: 32px 80px;
    gap: 3px;
  }
  .table-v2 .game-topbar h1 {
    font-size: 14px;
  }
  .table-v2 .turn-notice {
    min-height: 25px;
    padding: 4px 8px;
  }
  .build-icon,
  .table-icon-action {
    width: 34px;
    height: 32px;
  }
  .fixed-hand {
    --card-width: 52px;
    padding-top: 0;
  }
  .hand-cards-row {
    height: 65px;
  }
  .fixed-hand-heading {
    margin-bottom: 3px;
  }
  .fixed-hand .resource-card,
  .fixed-development,
  .hand-dev-card {
    height: 65px;
  }

  .fixed-hand .card-bottom {
    font-size: 8px;
  }
  .table-v2 .game-drawer {
    bottom: 128px;
    max-height: calc(100% - 140px);
  }
  .roll-prompt {
    padding: 12px;
  }
  .roll-prompt > .eyebrow {
    display: none;
  }
  .roll-dice-art .die {
    width: 36px;
    height: 36px;
    padding: 6px;
  }
  .roll-dice-button strong {
    font-size: 12px;
  }
}
.resource-fan:has(.empty-hand) {
  max-width: none;
}

.chat-game-event {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  background: #fff5ce;
  border: 1px solid #ebd99f;
  border-radius: 10px;
}
.chat-game-event > div {
  flex: 1;
  min-width: 0;
}
.game-event-icon {
  color: #936b10;
  flex-shrink: 0;
  padding-top: 2px;
}
.game-event-icon svg {
  width: 18px;
  height: 18px;
}
.game-event-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Trading keeps the table's own cards, with a receive/table/hand flow. */
.table-v2 .trade-drawer {
  width: min(430px, calc(100% - 24px));
  padding: 14px;
  bottom: 150px;
  max-height: calc(100% - 164px);
}
.trade-drawer > h2 {
  font-size: 21px;
  margin: 0 0 8px;
}
.trade-hub {
  display: grid;
  gap: 6px;
}
.trade-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  gap: 4px;
  border: 1px solid #d6c9ab;
  background: #eee5d1;
  border-radius: 12px;
}
.trade-mode-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #766950;
  cursor: pointer;
}
.trade-mode-switch button[aria-pressed="true"] {
  background: #2446ed;
  color: #fff;
  box-shadow: 0 2px 0 #1833b9;
}
.trade-mode-switch button:disabled {
  opacity: 0.4;
  cursor: default;
}
.trade-restriction {
  font-size: 11px;
  color: #7c6b4a;
  margin: 0;
}
.trade-palette {
  display: grid;
  gap: 5px;
}
.trade-row-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #665535;
}
.trade-row-label > .icon {
  transform: rotate(90deg);
  margin-right: auto;
}
.trade-row-label small {
  font-size: 9px;
  font-weight: 500;
}
.trade-resource-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.table-v2 .trade-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 76px;
  min-height: 0;
  padding: 6px 2px 0;
  border: 1px solid #a29370;
  border-radius: 9px;
  box-shadow: 0 3px 0 #b6a989;
  cursor: pointer;
  overflow: hidden;
}

.table-v2 .trade-resource .card-bottom {
  padding: 3px 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.trade-rate {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 1px 3px;
  background: #fffaf0e6;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 800;
}
.table-v2 .trade-resource:hover:not(:disabled) {
  border-color: #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
.table-v2 .trade-resource.trade-picked {
  border: 2px solid #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
.table-v2 .trade-resource:disabled {
  opacity: 0.46;
  cursor: default;
}
.trade-table {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px dashed #c5ae74;
  border-radius: 12px;
  padding: 6px 10px 17px;
  background: #f5ecd7;
}
.trade-selected-line {
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.trade-selected-line > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #887042;
}
.trade-selected-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 29px;
  gap: 5px;
}
.trade-selected-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 5px;
  border: 1px solid #a29370;
  border-radius: 8px;
  background: var(--card-color);
  cursor: pointer;
  box-shadow: 0 2px 0 #b6a989;
}
.trade-selected-card .icon {
  width: 36px;
  height: 36px;
}

.trade-empty-selection {
  color: #a5936c;
  font-size: 11px;
}
.trade-center-arrow {
  justify-self: center;
  color: #ac8b3d;
  font-size: 14px;
  line-height: 1;
}
.trade-clear {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 10px;
  color: #806945;
  background: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.trade-clear:disabled {
  opacity: 0.4;
  cursor: default;
}
.trade-hub-status {
  font-size: 11px;
  color: #796744;
  line-height: 1.4;
  margin: -4px 0 0;
}
.trade-hub .friend-offers:empty {
  display: none;
}
.trade-hub .friend-offers {
  border-top: 1px solid #dacba9;
  padding-top: 10px;
}
@media (max-width: 640px) {
  .table-v2 .trade-drawer {
    padding: 14px;
  }
  .trade-hub {
    gap: 9px;
  }
  .trade-resource-row {
    gap: 5px;
  }
  .trade-table {
    padding: 8px 10px 22px;
  }
  .trade-mode-switch button {
    padding: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .table-v2 .trade-resource {
    transition: none;
  }
}

.trade-hub form .button {
  padding: 9px 12px;
  font-size: 12px;
}

/* A single tabletop scene; HTML controls float above the painted board. */
.canvas-table .board-container {
  position: relative;
  isolation: isolate;
}
.board-canvas {
  position: absolute;
  pointer-events: none;
}
.canvas-ready > .board-svg {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.canvas-ready > .board-svg [role="button"] {
  cursor: pointer;
}
.game-viewport.canvas-table {
  background: radial-gradient(ellipse at 55% 40%, #fff7e4 0%, #f5ead2 72%);
  border-color: #d7c4a0;
  box-shadow: inset 0 0 60px #ddc99c22;
}
.canvas-table .table-play-area {
  position: relative;
  display: block;
}
.canvas-table .game-map {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 185px;
}
.canvas-table .game-players {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 175px;
  max-height: 100%;
}
.canvas-table .game-player {
  background: #fffaf099;
  border-color: #dbcaa680;
  box-shadow: 0 2px 8px #6c55330a;
}
.canvas-table .current-player {
  background: #fff0bfad;
  border-color: var(--player, #2446ed);
}
.canvas-table .game-dock {
  border-top: 0;
  background: transparent;
}
.canvas-table .turn-notice {
  border: 0;
  border-radius: 16px;
  background: #fffaf0c7;
}
.canvas-table .roll-prompt {
  left: calc(50% + 75px);
}
@media (max-width: 900px) and (min-width: 641px) {
  .canvas-table .game-map {
    padding-left: 163px;
    padding-right: 0;
  }
  .canvas-table .game-players {
    width: 155px;
  }
}
@media (max-width: 640px) {
  .canvas-table .game-map {
    padding: 88px 0 0;
  }
  .canvas-table .game-players {
    width: 100%;
    height: 85px;
  }
  .canvas-table .roll-prompt {
    left: 50%;
    top: calc(50% + 40px);
  }
}
.canvas-ready > .board-svg {
  touch-action: none;
  cursor: grab;
}
.canvas-ready > .board-svg.board-dragging,
.canvas-ready > .board-svg.board-dragging * {
  cursor: grabbing;
}

.hand-group {
  position: relative;
}
.hand-count {
  position: absolute;
  top: -7px;
  right: 0;
  z-index: 5;
  pointer-events: none;
  border: 1px solid #fffaf0;
  background: #39342b;
  color: #fffaf0;
  border-radius: 7px;
  min-width: 20px;
  padding: 2px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 0 #39342b33;
}
.fixed-hand-heading > span {
  font-size: 9px;
}
.build-icon > .icon {
  width: 29px;
  height: 29px;
}

.trade-selected-card strong {
  position: absolute;
  right: -3px;
  top: -5px;
  font-size: 13px;
  line-height: 18px;
  background: #39342b;
  color: #fffaf0;
  border: 1px solid #fffaf0;
  border-radius: 6px;
  min-width: 20px;
  text-align: center;
}
.trade-selected-card .trade-remove-mark {
  position: absolute;
  left: 1px;
  top: 0;
  font-size: 12px;
}
.dice-center-result {
  position: absolute;
  top: 50%;
  left: calc(50% + 75px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: #fffaf0f2;
  border: 1px solid #dec794;
  box-shadow: 0 8px 30px #55401c25;
  pointer-events: none;
  z-index: 10;
  animation: dice-result-show 2.8s forwards;
}
.dice-center-result .die {
  width: 52px;
  height: 52px;
}
.dice-center-result strong {
  font:
    800 28px Bricolage,
    sans-serif;
  color: #2446ed;
}
.waiting-dice {
  opacity: 0.5;
}
@keyframes dice-result-show {
  0% {
    opacity: 0;
    scale: 0.85;
  }
  12%,
  78% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@media (max-width: 640px) {
  .dice-center-result {
    left: 50%;
    top: calc(50% + 40px);
    padding: 14px;
    gap: 9px;
  }
  .dice-center-result .die {
    width: 38px;
    height: 38px;
  }
  .build-icon > .icon {
    width: 25px;
    height: 25px;
  }
  .fixed-hand-heading > span {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dice-center-result {
    animation-timing-function: step-end;
  }
}
.trade-hub {
  gap: 4px;
}

/* Mesa's original, bold color symbols stay readable at small HUD sizes. */
.game-symbol {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("/assets/mesa-game-symbols-v1.png");
  background-size: 400% 400%;
  background-position: var(--symbol-x) var(--symbol-y);
  background-repeat: no-repeat;
  vertical-align: middle;
}
.build-icon > .game-symbol {
  width: 34px;
  height: 34px;
}
.game-actions .game-symbol {
  width: 29px;
  height: 29px;
}

.tool-materials .game-symbol {
  width: 23px;
  height: 23px;
}

@media (max-width: 640px) {
  .build-icon > .game-symbol {
    width: 29px;
    height: 29px;
  }
  .game-actions .game-symbol {
    width: 26px;
    height: 26px;
  }
}
.discarding-hand .construction-tools,
.discarding-hand .game-actions button:not([data-open-drawer="log"]) {
  display: none;
}
.hand-discard-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.hand-discard-controls > span {
  color: #8d3c28;
  font-size: 12px;
  font-weight: 700;
}
.hand-discard-controls .button {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 11px;
}
.fixed-hand .resource-card.discard-selected {
  transform: translateY(-12px) !important;
  border: 2px solid #2446ed;
  box-shadow: 0 5px 0 #2446ed;
  position: relative;
  z-index: 4;
}
.discarding-hand .fixed-hand .resource-card {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.discarding-hand .resource-card:disabled {
  opacity: 0.65;
  cursor: default;
}
@media (max-width: 640px) {
  .hand-discard-controls {
    gap: 6px;
  }
  .hand-discard-controls > span {
    font-size: 10px;
  }
  .hand-discard-controls .button {
    padding: 6px 8px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .discarding-hand .fixed-hand .resource-card {
    transition: none;
  }
}
.discarding-hand .resource-card:not(.discard-selected):hover {
  transform: none;
}
.discarding-hand .fixed-hand .resource-card,
.discarding-hand .fixed-hand .resource-card:hover,
.discarding-hand .fixed-hand .resource-card:focus-visible,
.discarding-hand .fixed-hand .resource-card.discard-selected {
  position: relative;
  z-index: 0;
}
.discarding-hand .fixed-development {
  display: none;
}
.discarding-hand .resource-fan {
  max-width: none;
  gap: 8px;
}

.event-player-name {
  color: var(--player);
  font-weight: 800;
  text-shadow: 0 0 0.5px #49341f;
}
.event-resource {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  margin: 2px 1px;
  padding: 1px 4px;
  border-radius: 6px;
  background: #fffdf4;
  border: 1px solid #e4d6ae;
  white-space: nowrap;
}
.event-resource .game-symbol {
  width: 24px;
  height: 24px;
}

.trade-resource-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.table-v2 .trade-resource-symbol .game-symbol {
  width: 44px;
  height: 44px;
}
.trade-stock {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 1px 3px;
  background: #fffaf0e6;
  border-radius: 4px;
  font-size: 11px;
  line-height: 14px;
}
.trade-stock:empty {
  display: none;
}

.hand-resource-symbol {
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.fixed-hand .hand-resource-symbol .game-symbol {
  width: min(54px, calc(var(--card-width) - 8px));
  height: min(54px, calc(var(--card-width) - 8px));
}
.fixed-hand .card-bottom {
  width: 100%;
  flex-shrink: 0;
  background: #fffaf040;
  border-top: 1px solid #66563d14;
}

/* Construction previews use the same colored pieces as the board. */
.table-v2 .build-icon {
  width: 52px;
  height: 46px;
  padding: 4px;
}
.table-v2 .build-icon .construction-symbol,
.table-v2 .build-icon > .game-symbol {
  width: 40px;
  height: 38px;
}
.table-v2 .table-toolbar {
  gap: 22px;
}
.table-v2 .game-dock {
  grid-template-rows: 46px 120px;
}
@media (max-width: 640px) {
  .table-v2 .build-icon {
    width: 42px;
    height: 40px;
    padding: 3px;
  }
  .table-v2 .build-icon .construction-symbol,
  .table-v2 .build-icon > .game-symbol {
    width: 34px;
    height: 32px;
  }
  .table-v2 .table-toolbar {
    gap: 12px;
  }
  .table-v2 .game-dock {
    grid-template-rows: 40px 98px;
  }
}
@media (max-width: 360px) {
  .table-v2 .build-icon {
    width: 36px;
    height: 36px;
    padding: 2px;
  }
  .table-v2 .build-icon .construction-symbol,
  .table-v2 .build-icon > .game-symbol {
    width: 30px;
    height: 28px;
  }
  .table-v2 .table-toolbar {
    gap: 8px;
  }
}
@media (max-height: 520px) and (min-width: 641px) {
  .table-v2 .game-dock {
    grid-template-rows: 36px 76px;
  }
  .table-v2 .build-icon {
    width: 42px;
    height: 36px;
  }
  .table-v2 .build-icon .construction-symbol,
  .table-v2 .build-icon > .game-symbol {
    width: 34px;
    height: 30px;
  }
}

/* Live offers belong to the table, independently of the trade composer. */
.trade-notices {
  position: absolute;
  top: 6px;
  left: calc(50% + 75px);
  transform: translateX(-50%);
  z-index: 12;
  width: min(440px, calc(100% - 205px));
  max-height: calc(100% - 12px);
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 10px;
  padding: 2px 5px 8px;
  scrollbar-width: thin;
}
.trade-offer-popup {
  padding: 13px;
  border: 2px solid #39342b;
  border-radius: 18px;
  background: #fffaf0f7;
  box-shadow: 0 5px 0 #39342b20;
}
.trade-offer-popup > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.offer-heading {
  display: grid;
  gap: 2px;
}
.offer-heading strong {
  font:
    800 15px Bricolage,
    sans-serif;
  color: var(--player);
}
.offer-heading > span {
  font-size: 10px;
  color: #786b54;
}
.offer-tag {
  padding: 4px 7px;
  background: #ffda55;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.popup-bundles {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
}
.popup-bundles > div {
  display: grid;
  gap: 4px;
}
.popup-bundles small {
  font-size: 10px;
  font-weight: 800;
  color: #786b54;
}
.popup-bundles > div > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.popup-resource {
  display: inline-flex;
  position: relative;
  padding: 3px;
  background: #f2e8d2;
  border: 1px solid #dac9a9;
  border-radius: 8px;
}
.popup-resource .game-symbol {
  width: 34px;
  height: 34px;
}
.popup-resource b {
  position: absolute;
  right: -2px;
  top: -4px;
  padding: 1px 4px;
  background: #39342b;
  color: #fffaf0;
  font-size: 11px;
  border-radius: 5px;
}
.popup-exchange .game-symbol {
  width: 26px;
  height: 26px;
}
.offer-responses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.offer-person {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  background: #f2e8d26b;
  border: 1px solid #dfd2b6;
  border-radius: 10px;
}
.offer-person.accepted {
  background: #dff1dc;
  border-color: #94c28a;
}
.offer-person.declined {
  background: #f9e6e0;
  border-color: #e0b8aa;
}
.offer-person-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.offer-person-name i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--player);
  color: #fffaf0;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.offer-person-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--player);
}
.offer-person-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #786b54;
}
.offer-person-status .icon {
  width: 14px;
  height: 14px;
}
.offer-person.accepted .offer-person-status {
  color: #27713c;
}
.offer-person.declined .offer-person-status {
  color: #a44a37;
}
.thinking-dots {
  display: inline-flex;
  gap: 2px;
}
.thinking-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #aa8d53;
  animation: offer-thinking 1.2s infinite;
}
.thinking-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.thinking-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.offer-reply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.offer-reply > small,
.offer-waiting {
  width: 100%;
  font-size: 10px;
  color: #786b54;
}
.offer-response-button {
  padding: 7px 9px;
  border: 1px solid #cbb991;
  border-radius: 8px;
  background: #fffaf0;
  color: #675538;
  font:
    700 11px "DM Sans",
    sans-serif;
  cursor: pointer;
}
.offer-response-button.positive {
  background: #2446ed;
  border-color: #1833b9;
  color: white;
}
.offer-response-button:hover:not(:disabled) {
  filter: brightness(1.08);
}
.offer-response-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.offer-response-button:focus-visible {
  outline: 3px solid #2446ed;
  outline-offset: 2px;
}
.offer-enter {
  animation: offer-arrive 0.28s ease-out;
}
.offer-update {
  animation: offer-response 0.3s ease-out;
}
@keyframes offer-arrive {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes offer-response {
  50% {
    box-shadow: 0 0 0 3px #ffda5599;
  }
}
@keyframes offer-thinking {
  50% {
    opacity: 0.3;
    transform: translateY(-2px);
  }
}
@media (max-width: 640px) {
  .trade-notices {
    top: 88px;
    left: 50%;
    width: calc(100% - 4px);
    max-height: calc(100% - 92px);
  }
  .trade-offer-popup {
    padding: 10px;
    border-radius: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-enter,
  .offer-update,
  .thinking-dots i {
    animation: none;
  }
}

/* Large, crisp action artwork without the atlas cell's transparent margins. */
.table-v2 .table-icon-action {
  width: 46px;
  height: 46px;
  padding: 4px;
}
.table-v2 .build-icon > .toolbar-symbol,
.table-v2 .table-icon-action > .toolbar-symbol {
  width: 36px;
  height: 38px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .table-v2 .table-icon-action {
    width: 40px;
    height: 40px;
    padding: 3px;
  }
  .table-v2 .build-icon > .toolbar-symbol,
  .table-v2 .table-icon-action > .toolbar-symbol {
    width: 32px;
    height: 34px;
  }
}
@media (max-width: 360px) {
  .table-v2 .table-icon-action {
    width: 34px;
    height: 36px;
    padding: 2px;
  }
  .table-v2 .build-icon > .toolbar-symbol,
  .table-v2 .table-icon-action > .toolbar-symbol {
    width: 28px;
    height: 30px;
  }
}
@media (max-height: 520px) and (min-width: 641px) {
  .table-v2 .table-icon-action {
    width: 38px;
    height: 36px;
    padding: 2px;
  }
  .table-v2 .build-icon > .toolbar-symbol,
  .table-v2 .table-icon-action > .toolbar-symbol {
    width: 30px;
    height: 32px;
  }
}

.table-v2 .game-drawer.development-confirm {
  width: auto;
  max-width: calc(100% - 24px);
  padding: 10px 42px 10px 10px;
  border-radius: 14px;
  overflow: visible;
}
.development-confirm .close-dialog {
  top: 8px;
  right: 6px;
}
.development-confirm .button {
  min-height: 36px;
  padding: 7px 16px;
}

/* The board continues beneath the floating HUD instead of reserving panels. */
.game-viewport.canvas-table > .table-play-area {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.game-viewport.canvas-table .game-map {
  padding: 0;
}
.game-viewport.canvas-table .board-container {
  padding: 0;
}
.canvas-table > .game-topbar,
.canvas-table > .turn-notice,
.canvas-table > .game-dock {
  position: relative;
  z-index: 4;
}
.canvas-table > .game-dock {
  grid-row: 4;
  pointer-events: none;
}
.canvas-table .game-dock button,
.canvas-table .game-dock .tool-slot,
.canvas-table .hand-cards-row {
  pointer-events: auto;
}
.canvas-table .game-players {
  left: 18px;
  top: 88px;
  max-height: calc(100% - 280px);
  pointer-events: none;
}
.canvas-table .game-player {
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
  text-shadow: 0 1px 2px #fffaf0;
}
.canvas-table .game-player.current-player {
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid var(--player);
  padding: 11px 10px;
  outline: none;
}
.canvas-table .build-icon,
.canvas-table .table-icon-action,
.canvas-table .build-icon.selected,
.canvas-table .build-icon:not(:disabled):hover,
.canvas-table .table-icon-action:not(:disabled):hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.canvas-table .build-icon.selected {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.canvas-table .fixed-hand,
.canvas-table .table-toolbar,
.canvas-table .construction-tools,
.canvas-table .turn-notice,
.canvas-table .turn-notice.your-turn {
  background: transparent;
  box-shadow: none;
}
.canvas-table .fixed-hand-heading,
.canvas-table .turn-notice {
  text-shadow: 0 1px 2px #fffaf0;
}
.canvas-table .roll-prompt {
  left: 50%;
  top: 48%;
}
.canvas-table .map-dice-result {
  top: 88px;
  right: 18px;
  background: transparent;
  box-shadow: none;
}
.canvas-table .trade-notices {
  top: 88px;
  left: 50%;
}
@media (max-width: 640px) {
  .canvas-table .game-players {
    left: 9px;
    top: 82px;
    width: calc(100% - 18px);
    max-height: 85px;
  }
  .canvas-table .game-player.current-player {
    padding: 7px 5px;
  }
  .canvas-table .map-dice-result {
    top: 176px;
    right: 12px;
  }
  .canvas-table .trade-notices {
    top: 176px;
  }
}
@media (max-height: 520px) and (min-width: 641px) {
  .canvas-table .game-players {
    top: 64px;
    max-height: calc(100% - 190px);
  }
  .canvas-table .map-dice-result,
  .canvas-table .trade-notices {
    top: 64px;
  }
}

/* Empty HUD space passes gestures through to the board. */
.canvas-table > .game-topbar,
.canvas-table > .turn-notice,
.canvas-table .hand-cards-row {
  pointer-events: none;
}
.canvas-table > .game-topbar button,
.canvas-table > .game-topbar a,
.canvas-table > .turn-notice button {
  pointer-events: auto;
}

/* Player statistics use the same bold artwork as the table actions. */
.canvas-table .player-identity strong {
  color: var(--player);
}
.canvas-table .player-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 8px;
}
.canvas-table .player-metrics > span {
  gap: 4px;
}
.canvas-table .player-metrics .toolbar-symbol {
  width: 23px;
  height: 25px;
  flex-shrink: 0;
}
.canvas-table .player-metrics .metric-leader {
  color: #2446ed;
  font-weight: 800;
}
@media (max-width: 640px) {
  .canvas-table .game-players {
    height: 112px;
    max-height: 112px;
  }
  .canvas-table .player-metrics {
    gap: 3px 5px;
  }
  .canvas-table .player-metrics .toolbar-symbol {
    width: 19px;
    height: 21px;
  }
  .canvas-table .map-dice-result,
  .canvas-table .trade-notices {
    top: 200px;
  }
}

/* Compact chat stays visible over the board until manually closed. */
body[data-playing="true"] .room-social,
body[data-playing="true"].focus-mode .room-social {
  top: auto;
  bottom: 194px;
  right: 24px;
  width: 292px;
  gap: 6px;
}
body[data-playing="true"] .chat-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 10px;
  max-height: min(265px, 36dvh);
  opacity: 1;
  text-shadow: 0 1px 2px #fffaf0;
}
body[data-playing="true"] .chat-heading {
  padding: 3px 6px;
  background: transparent;
  border: 0;
}
body[data-playing="true"] .chat-heading .eyebrow {
  display: none;
}
body[data-playing="true"] .chat-heading h2 {
  font-size: 13px;
  margin: 0;
}
body[data-playing="true"] .chat-heading button {
  background: transparent;
  border: 0;
  width: 25px;
  height: 25px;
  font-size: 20px;
}
body[data-playing="true"] .chat-messages {
  height: 156px;
  min-height: 45px;
  padding: 5px 6px;
  gap: 7px;
  scrollbar-width: thin;
}
body[data-playing="true"] .chat-avatar,
body[data-playing="true"] .message-meta time {
  display: none;
}
body[data-playing="true"] .chat-message,
body[data-playing="true"] .chat-game-event {
  gap: 5px;
}
body[data-playing="true"] .message-meta {
  margin-bottom: 1px;
}
body[data-playing="true"] .message-text,
body[data-playing="true"] .own-message .message-text,
body[data-playing="true"] .game-event-text {
  background: transparent;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
}
body[data-playing="true"] #chat-form {
  background: transparent;
  border: 0;
  padding: 5px;
  gap: 5px;
}
body[data-playing="true"] #chat-input {
  min-height: 32px;
  height: 32px;
  padding: 6px 8px;
  background: #fffaf04d;
  border-color: #cabda366;
}
body[data-playing="true"] #chat-send {
  min-height: 30px;
  padding: 5px 8px;
}
body[data-playing="true"] .chat-empty {
  gap: 4px;
  font-size: 10px;
}
body[data-playing="true"] .chat-empty .icon {
  width: 20px;
  height: 20px;
}
body[data-playing="true"] .chat-empty strong {
  font-size: 12px;
}
body[data-playing="true"] .social-buttons .button {
  background: transparent;
  border: 0;
  box-shadow: none;
}
@media (max-width: 640px) {
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social {
    right: 16px;
    bottom: 174px;
    width: min(248px, calc(100vw - 32px));
  }
  body[data-playing="true"] .chat-panel {
    max-height: min(180px, 22dvh);
  }
  body[data-playing="true"] .chat-messages {
    height: 96px;
  }
}
@media (max-height: 520px) and (min-width: 641px) {
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social {
    bottom: 128px;
  }
  body[data-playing="true"] .chat-panel {
    max-height: 185px;
  }
  body[data-playing="true"] .chat-messages {
    height: 90px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-playing="true"] .chat-panel {
    transition: none;
  }
}
body[data-playing="true"] .chat-game-event {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body[data-playing="true"] .chat-game-event .message-meta {
  display: none;
}

.production-effects {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 45;
  pointer-events: none;
}
.fixed-hand .resource-card.production-pending {
  visibility: hidden;
  pointer-events: none;
}
.player-metrics [data-player-resources] b {
  font-weight: inherit;
}

.mesa-port-tooltip {
  position: fixed;
  z-index: 80;
  max-width: calc(100vw - 16px);
  padding: 7px 10px;
  border: 1px solid #d7c4a0;
  border-radius: 10px;
  background: #fffaf0f2;
  color: #39342b;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 3px 12px #39342b14;
  pointer-events: none;
}
.board-svg [data-port]:focus {
  outline: none;
}

/* Small surfaces keep the board visible without sacrificing readability. */
.canvas-table .game-player {
  background: #fffaf0b0;
  border: 1px solid #fffaf099;
  border-radius: 12px;
  box-shadow: 0 2px 10px #39342b0d;
  backdrop-filter: blur(6px);
  text-shadow: none;
}
.canvas-table .game-player.current-player {
  background: #fffaf0c4;
  border-left: 3px solid var(--player);
}
body[data-playing="true"] .chat-panel {
  background: #fffaf0b8;
  border: 1px solid #fffaf080;
  box-shadow: 0 3px 16px #39342b12;
  backdrop-filter: blur(6px);
  text-shadow: none;
}
body[data-playing="true"] .chat-heading,
body[data-playing="true"] .chat-form {
  padding: 6px 9px;
}
body[data-playing="true"] .chat-messages {
  padding: 6px 9px;
}
.canvas-table .trade-notices {
  top: 152px;
  right: 18px;
  left: auto;
  transform: none;
  width: min(310px, calc(100% - 36px));
  max-height: max(100px, calc(100dvh - 650px));
  align-content: start;
}
.canvas-table .trade-offer-popup {
  padding: 10px;
  border: 1px solid #d7c4a0;
  border-radius: 14px;
  background: #fffaf0e8;
  box-shadow: 0 3px 12px #39342b18;
}
.counter-bundles {
  display: grid;
  gap: 5px;
}
.counter-bundles > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.counter-bundles .game-symbol {
  width: 28px;
  height: 28px;
}
.offer-response-button.counter {
  background: #ffda55;
  color: #39342b;
}
@media (min-width: 1000px) {
  .canvas-table .game-drawer:not(.development-confirm) {
    left: auto;
    right: 350px;
    width: min(540px, calc(100% - 560px));
  }
}
/* On smaller screens, editing temporarily frees the side rail. */
@media (max-width: 999px) {
  body:has(.game-drawer:not([hidden])) .trade-notices,
  body[data-playing="true"]:has(.game-drawer:not([hidden])) .room-social {
    display: none;
  }
}
@media (max-width: 640px) {
  .canvas-table .trade-notices {
    top: 252px;
    right: 9px;
    width: min(290px, calc(100% - 18px));
    max-height: max(110px, calc(100dvh - 620px));
  }
  body[data-playing="true"]:has(.trade-offer-popup) .room-social {
    width: 190px;
  }
}
@media (max-height: 720px) and (min-width: 641px) {
  .canvas-table .trade-notices {
    top: 120px;
    max-height: max(100px, calc(100dvh - 500px));
  }
  body[data-playing="true"]:has(.trade-offer-popup) .chat-panel {
    max-height: 22dvh;
  }
  body[data-playing="true"]:has(.trade-offer-popup) .chat-messages {
    height: 60px;
  }
}

@media (min-width: 1000px) {
  .canvas-table .development-confirm {
    right: 350px;
  }
}
.offer-person.countered {
  background: #fff0b8;
  border-color: #e5c55a;
}

.offer-person-status .game-symbol {
  width: 16px;
  height: 16px;
}

/* Chat leads the right rail; offers start below its reserved space. */
body[data-playing="true"] {
  --chat-rail-top: 88px;
  --chat-rail-height: 265px;
  --offer-rail-top: calc(var(--chat-rail-top) + var(--chat-rail-height) + 54px);
}
body[data-playing="true"] .room-social,
body[data-playing="true"].focus-mode .room-social {
  top: var(--chat-rail-top);
  bottom: auto;
}
body[data-playing="true"] .chat-panel {
  max-height: var(--chat-rail-height);
  opacity: 1;
}
.canvas-table .trade-notices {
  top: var(--offer-rail-top, 407px);
  max-height: max(100px, calc(100dvh - var(--offer-rail-top, 407px) - 190px));
}
.canvas-table .map-dice-result {
  right: 330px;
}
body[data-playing="true"]:has(#chat-panel[hidden]) {
  --chat-rail-height: 0px;
}
@media (max-width: 640px) {
  body[data-playing="true"] {
    --chat-rail-top: 200px;
    --chat-rail-height: min(180px, 22dvh);
  }
  body[data-playing="true"]:has(.trade-offer-popup) .room-social {
    width: min(248px, calc(100vw - 32px));
  }
  .canvas-table .map-dice-result {
    left: 12px;
    right: auto;
    top: 200px;
  }
}
@media (max-height: 720px) and (min-width: 641px) {
  body[data-playing="true"] {
    --chat-rail-top: 64px;
    --chat-rail-height: min(185px, 22dvh);
  }
}

/* Account identity stays neutral; game colors only outline the avatar. */
.profile-avatar,
.table-v2 .profile-avatar,
.canvas-table .profile-avatar,
.current-player .profile-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-align: center;
  background: #f2ede3;
  color: #39342b;
  border: 2px solid var(--avatar-border, #d8cfbf);
  outline: none;
  overflow: hidden;
  text-shadow: none;
}
.profile-avatar .avatar-initial {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  font:
    800 14px/1 Bricolage,
    sans-serif;
  color: #39342b;
  width: 100%;
  height: 100%;
}
.profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
.offer-avatar {
  width: 23px;
  height: 23px;
  border-radius: 7px;
}
.offer-avatar .avatar-initial {
  font-size: 11px;
}
.avatar-edit {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
}
.avatar-edit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.profile-dialog {
  width: min(350px, calc(100vw - 24px));
  padding: 25px;
  border-radius: 20px;
  background: #fffaf0;
  border: 2px solid #39342b;
}
.profile-dialog h2 {
  margin: 0 25px 20px 0;
  font-size: 24px;
}
.profile-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.profile-preview .profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 24px;
}
.profile-preview .avatar-initial {
  font-size: 36px;
}
.profile-dialog .button {
  width: 100%;
  margin-bottom: 8px;
}

.canvas-table .player-identity strong .player-presence {
  display: block;
  margin: 2px 0 0;
  font:
    600 8px/1.2 "DM Sans",
    sans-serif;
  color: #786b54;
}
.canvas-table .player-identity strong .player-presence.afk {
  color: #88611c;
}
.resume-player {
  margin-top: 5px;
  padding: 3px 8px;
  border: 1px solid #d7c4a0;
  border-radius: 7px;
  color: #39342b;
  background: #ffda55;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

/* Shared glass surfaces anchor the hand and controls without hiding the board. */
.canvas-table .fixed-hand,
.canvas-table .construction-tools,
.canvas-table .game-actions {
  background: #fffaf0a8;
  border: 1px solid #fffaf080;
  border-radius: 14px;
  box-shadow: 0 3px 14px #39342b0f;
  backdrop-filter: blur(6px);
}
.canvas-table .fixed-hand {
  width: min(940px, 100%);
  justify-self: center;
}
.canvas-table .construction-tools,
.canvas-table .game-actions {
  padding: 2px 5px;
}
.board-svg [data-road] {
  cursor: default;
}

/* The catalog uses original toy pieces, all drawn by the interface. */
.game-catalog {
  margin-top: 48px;
}
.catalog-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 24px;
}
.catalog-heading h2 {
  margin: 8px 0;
}
.catalog-count,
.catalog-season {
  color: var(--muted);
  font-size: 11px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.catalog-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.catalog-cover {
  --toy-color: #2446ed;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #ece6cf;
  overflow: hidden;
  isolation: isolate;
}
.catalog-cover::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #fff7df;
  top: -58px;
  right: -15px;
  opacity: 0.7;
}
.catalog-cover::after {
  content: "";
  position: absolute;
  height: 16px;
  width: 65%;
  border-radius: 50%;
  background: #3a31231a;
  left: 17.5%;
  bottom: 22%;
  z-index: -1;
  filter: blur(5px);
}
.catalog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalog-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  margin-bottom: 10px;
}
.catalog-badge {
  color: #2946b5;
  background: #e8edff;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 7px;
}
.badge-planned {
  color: #706348;
  background: #f1eadb;
}
.badge-new {
  color: #22583b;
  background: #e5f3df;
}
.badge-development {
  color: #694490;
  background: #f0e8fb;
}
.catalog-body h3 {
  font-size: 24px;
  margin-bottom: 9px;
}
.catalog-description {
  font-size: 13px;
  flex: 1;
  margin-bottom: 20px;
}
.catalog-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 18px;
}
.catalog-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.catalog-meta .icon {
  width: 16px;
  height: 16px;
}
.catalog-warning {
  font-size: 11px;
  margin: -7px 0 12px;
  color: #625732;
}
.catalog-body .button {
  width: 100%;
  white-space: normal;
}
.catalog-body .button:disabled {
  opacity: 1;
  color: #807866;
  background: #f2eee5;
}
.toy {
  --toy-color: #2446ed;
  position: absolute;
  width: 59px;
  height: 76px;
  left: calc(20% + var(--slot) * 18%);
  top: 54%;
  background: var(--toy-color);
  border-radius: 12px;
  box-shadow:
    0 7px 0 #28242222,
    inset -5px -5px 0 #00000012;
  transform: translate(-50%, -50%) rotate(calc(-13deg + var(--slot) * 9deg));
}
.toy.red {
  --toy-color: #ef4c39;
}
.toy.blue {
  --toy-color: #2446ed;
}
.toy.yellow {
  --toy-color: #ffda55;
}
.toy.cream {
  --toy-color: #fffaf0;
}
.toy::before,
.toy::after {
  content: "";
  position: absolute;
}
.toy.card {
  height: 100px;
  width: 69px;
  border: 5px solid #fffaf0;
}
.toy.card::after {
  width: 28px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #fffaf0;
  left: 15px;
  top: 23px;
  transform: rotate(30deg);
}
.toy.disc,
.toy.ball,
.toy.chip {
  width: 49px;
  height: 49px;
  border-radius: 50%;
}
.toy.ball::after {
  width: 12px;
  height: 12px;
  background: #ffffff8c;
  border-radius: 50%;
  top: 9px;
  left: 11px;
}
.toy.chip {
  border: 5px dashed #fff6dc;
}
.toy.tile {
  width: 74px;
  height: 65px;
  border-radius: 9px;
}
.toy.tile::after {
  width: 30px;
  height: 30px;
  background: #fff7df;
  border-radius: 5px;
  top: 16px;
  left: 21px;
}
.toy.house {
  width: 59px;
  height: 70px;
  clip-path: polygon(0 36%, 50% 0, 100% 36%, 100% 100%, 0 100%);
  border-radius: 5px;
}
.toy.house::after {
  width: 15px;
  height: 26px;
  background: #fff7df;
  bottom: 0;
  left: 23px;
  border-radius: 5px 5px 0 0;
}
.toy.pawn,
.toy.pin {
  width: 40px;
  height: 80px;
  border-radius: 50% 50% 28% 28%;
  clip-path: polygon(
    28% 0,
    72% 0,
    80% 20%,
    62% 36%,
    100% 88%,
    95% 100%,
    5% 100%,
    0 88%,
    38% 36%,
    20% 20%
  );
}
.toy.pin::after {
  background: #ef4c39;
  height: 8px;
  left: 0;
  right: 0;
  top: 26px;
}
.toy.domino {
  width: 51px;
  height: 99px;
  border-radius: 9px;
}
.toy.domino::before {
  width: 33px;
  height: 2px;
  background: #39342b;
  left: 9px;
  top: 48px;
}
.toy.domino::after {
  width: 7px;
  height: 7px;
  background: #39342b;
  border-radius: 50%;
  top: 19px;
  left: 15px;
  box-shadow:
    14px 14px #39342b,
    0 44px #39342b,
    14px 58px #39342b;
}
.toy.island,
.toy.green,
.toy.felt,
.toy.pitch,
.toy.checkerboard,
.toy.dotboard,
.toy.track,
.toy.rack {
  width: 180px;
  height: 116px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: -1;
}
.toy.island {
  background: #7cbb75;
  border: 9px solid #ffd868;
  border-radius: 48%;
}
.toy.tree {
  width: 55px;
  height: 85px;
  background: #35844d;
  clip-path: polygon(
    50% 0,
    100% 60%,
    68% 60%,
    95% 82%,
    60% 82%,
    60% 100%,
    40% 100%,
    40% 82%,
    5% 82%,
    32% 60%,
    0 60%
  );
}
.toy.sun,
.toy.moon {
  width: 43px;
  height: 43px;
  top: 26%;
  background: #ffda55;
  border-radius: 50%;
}
.toy.moon {
  left: 30%;
  box-shadow: inset 13px -4px #fff6dc;
}
.toy.mask {
  width: 68px;
  height: 77px;
  border-radius: 14px 14px 40px 40px;
}
.toy.mask::before {
  width: 15px;
  height: 11px;
  background: #fff6dc;
  left: 12px;
  top: 22px;
  border-radius: 50%;
  box-shadow: 28px 0 #fff6dc;
}
.toy.mask::after {
  width: 20px;
  height: 8px;
  background: #39342b;
  left: 25px;
  top: 49px;
  border-radius: 0 0 50% 50%;
}
.toy.folder {
  width: 116px;
  height: 84px;
  background: #ffda55;
  left: 37%;
  border-radius: 8px;
}
.toy.glass {
  width: 60px;
  height: 60px;
  border: 10px solid #2446ed;
  border-radius: 50%;
  background: #fff7df88;
}
.toy.glass::after {
  height: 47px;
  width: 12px;
  background: #2446ed;
  top: 39px;
  left: 42px;
  border-radius: 8px;
  transform: rotate(-35deg);
}
.toy.clue {
  width: 28px;
  height: 43px;
  background: #ef4c39;
  top: 38%;
}
.toy.letter {
  width: 63px;
  height: 67px;
  background: #fffaf0;
  border: 7px solid var(--toy-color);
}
.toy.letter::after {
  width: 9px;
  height: 31px;
  background: var(--toy-color);
  left: 19px;
  top: 10px;
  transform: rotate(25deg);
  box-shadow: 9px 0 var(--toy-color);
}
.toy.ticket {
  width: 108px;
  height: 87px;
  background: repeating-linear-gradient(
    90deg,
    #fff7df 0 21px,
    #ddceaf 21px 23px
  );
  left: 34%;
  border: 8px solid #2446ed;
}
.toy.checkerboard {
  background: conic-gradient(
    #f1d37c 25%,
    #fff7df 0 50%,
    #f1d37c 0 75%,
    #fff7df 0
  );
  background-size: 36px 36px;
  border: 9px solid #bfa777;
}
.toy.dotboard {
  background: radial-gradient(#2446ed 3px, transparent 4px);
  background-size: 30px 30px;
  box-shadow: none;
}
.toy.pencil,
.toy.cue {
  width: 130px;
  height: 10px;
  background: #d29a56;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(-35deg);
}
.toy.pencil {
  background: #ef4c39;
  width: 91px;
}
.toy.track {
  background: #fff7df;
  border: 13px dashed #ef4c39;
  border-radius: 38px;
}
.toy.rack {
  background:
    radial-gradient(#fff7df 11px, transparent 12px) 0 0/34px 34px,
    #2446ed;
  border: 7px solid #2446ed;
}
.scene-connect .toy.disc {
  width: 25px;
  height: 25px;
  top: 57%;
}
.toy.wave {
  width: 180px;
  height: 59px;
  background: #6cace2;
  border-radius: 50%;
  left: 50%;
  top: 68%;
  z-index: -1;
}
.toy.ship {
  width: 77px;
  height: 42px;
  clip-path: polygon(
    0 30%,
    35% 30%,
    35% 0,
    60% 0,
    60% 30%,
    100% 30%,
    80% 100%,
    20% 100%
  );
}
.toy.felt,
.toy.pitch,
.toy.green {
  background: #58a76c;
  border: 8px solid #fff1d1;
}
.toy.pitch::after {
  inset: 10px;
  border: 2px solid #fff7df;
  border-radius: 2px;
}
.toy.flag {
  width: 53px;
  height: 65px;
  background: transparent;
  box-shadow: none;
  border-left: 5px solid #fffaf0;
}
.toy.flag::after {
  background: #ef4c39;
  width: 49px;
  height: 28px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.toy.ramp {
  width: 42px;
  height: 24px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.toy.hand {
  width: 46px;
  height: 77px;
  border-radius: 12px 12px 5px 5px;
  transform: translate(-50%, -50%) rotate(calc(-24deg + var(--slot) * 14deg));
}
.toy.hand::after {
  width: 14px;
  height: 40px;
  background: var(--toy-color);
  left: -10px;
  top: 8px;
  border-radius: 8px;
  transform: rotate(-30deg);
}
.scene-island,
.scene-ships {
  background: #cde4f3;
}
.scene-masks,
.scene-survival {
  background: #d8dcf5;
}
.scene-cards,
.scene-words,
.scene-domino {
  background: #f4d5c6;
}
.scene-football,
.scene-golf,
.scene-billiards {
  background: #d9e9d5;
}
.scene-bowling .toy.pin {
  top: 45%;
}
.scene-bowling .toy.ball {
  top: 73%;
  left: 64%;
}
.scene-island .toy.house {
  width: 43px;
  height: 48px;
  top: 67%;
}
@media (max-width: 1100px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .catalog-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .game-catalog {
    margin-top: 34px;
  }
  .catalog-cover {
    aspect-ratio: 16 / 8;
  }
  .catalog-count {
    font-size: 11px;
  }
}

/* One Mesa pawn represents each person on every shared surface. */
.profile-avatar .character-pawn {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.profile-avatar {
  background: #fff8e9;
}
.invite-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.profile-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.profile-dialog .eyebrow {
  margin-bottom: 8px;
}
.profile-dialog .profile-preview {
  margin: 0 0 18px;
}
.profile-dialog .profile-preview .profile-avatar {
  width: 104px;
  height: 104px;
  border-radius: 28px;
}
#profile-form {
  display: grid;
  gap: 17px;
}
#profile-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}
#profile-form input,
#profile-form select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #d5cebe;
  background: #fffdf7;
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--text);
  font-size: 13px;
}
#profile-form fieldset {
  border: 1px solid #e0d7c8;
  border-radius: 12px;
  padding: 15px 13px;
  margin: 0;
  min-width: 0;
}
#profile-form legend {
  padding: 0 5px;
  font-size: 12px;
  font-weight: 600;
}
.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.profile-fields label:last-child {
  grid-column: 1 / -1;
}
.profile-note {
  font-size: 11px;
  line-height: 1.5;
}
.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
}
.profile-dialog .profile-actions .button {
  margin: 0;
  padding-inline: 12px;
}
@media (max-width: 400px) {
  .brand-logo {
    height: 22px;
  }
}
@media (max-width: 400px) {
  .profile-dialog {
    padding: 22px 17px;
  }
  .profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The platform owns the next-game picker and the waiting queue. */
#game-selector-form,
#game-selector-fields {
  display: grid;
  gap: 16px;
}
#game-selector-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  font-size: 13px;
}
#game-selector-form select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fffdf5;
  color: var(--ink);
  font: inherit;
}
.game-selector-note {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.6;
}
.spectators-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed #d3c9b7;
}
.spectators-panel h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 17px;
}
.spectator-position {
  width: 20px;
  flex: 0 0 20px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

/* Shared chat: people list, moderation menu, confirmations, event tones. */
.chat-heading-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-heading .chat-people-toggle {
  width: auto;
  padding: 0 10px;
  font:
    600 11px DM,
    sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chat-people-toggle[aria-pressed="true"] {
  background: #39342b;
  color: #fffaf0;
}
.chat-people-toggle span {
  font-size: 10px;
  opacity: 0.8;
}
.chat-people {
  list-style: none;
  margin: 0;
  padding: 10px 17px;
  height: min(330px, 42dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fffdf7;
}
.chat-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid #ebe5d7;
}
.chat-person:first-child {
  border-top: 0;
}
.chat-person > div {
  flex: 1;
  min-width: 0;
}
.chat-person strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.chat-person strong small {
  color: var(--muted);
  font-weight: 400;
  font-size: 9px;
}
.chat-person span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.person-menu-button {
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #5d5547;
  font-size: 18px;
  line-height: 1;
}
.person-menu-button:hover,
.person-menu-button:focus-visible {
  border-color: #39342b;
  background: #fffaf0;
  outline: none;
}
.message-meta-end {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chat-author-menu {
  min-width: 24px;
  min-height: 24px;
  font-size: 14px;
  opacity: 0.55;
}
.chat-message:hover .chat-author-menu,
.chat-author-menu:focus-visible {
  opacity: 1;
}
.chat-new {
  align-self: center;
  margin: -44px auto 8px;
  position: relative;
  z-index: 2;
  border: 1.5px solid #39342b;
  border-radius: 999px;
  background: #2446ed;
  color: #fff;
  font:
    600 11px DM,
    sans-serif;
  padding: 6px 12px;
  box-shadow: 0 2px 0 #39342b;
}
.person-menu {
  position: fixed;
  z-index: 200;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 2px solid #39342b;
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 4px 5px 0 #39342b33;
  display: flex;
  flex-direction: column;
}
.person-menu-title {
  margin: 4px 8px 6px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.person-menu button {
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px;
  min-height: 40px;
  font-size: 13px;
  color: var(--text);
}
.person-menu button:hover,
.person-menu button:focus-visible {
  background: #f2eddf;
  outline: 2px solid #2446ed;
  outline-offset: -2px;
}
.person-menu button.danger {
  color: #a82a1c;
}
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 2px solid #39342b;
  border-radius: 16px;
  background: #fffdf7;
  color: var(--text);
  padding: 22px;
  box-shadow: 6px 7px 0 #39342b33;
}
.confirm-dialog::backdrop {
  background: #27252299;
}
.confirm-dialog h2 {
  margin: 0 0 10px;
  font:
    800 21px Bricolage,
    sans-serif;
  overflow-wrap: anywhere;
}
.confirm-dialog p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.confirm-actions .danger {
  background: #b52b1d;
  border-color: #39342b;
  color: #fff;
}
.chat-system-event {
  background: #f2eddf;
  border-color: #ddd3bd;
}
.chat-system-event .game-event-icon {
  color: #5d5547;
}
.event-tone-positive .game-event-icon {
  color: #176540;
}
.event-tone-warning .game-event-icon {
  color: #a8481c;
}
.players-panel .player-row .person-menu-button {
  margin-left: auto;
}
body[data-playing="true"] .chat-people {
  height: 156px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fffdf7f2;
  border: 1px solid #cabda3;
}
body[data-playing="true"] .chat-heading .chat-people-toggle {
  width: auto;
  padding: 0 8px;
  border: 1px solid #39342b55;
  background: #fffaf0cc;
  height: 25px;
  font-size: 10px;
}
body[data-playing="true"]
  .chat-heading
  .chat-people-toggle[aria-pressed="true"] {
  background: #39342b;
  color: #fffaf0;
}
body[data-playing="true"] .chat-system-event {
  background: transparent;
}
@media (max-width: 640px) {
  body[data-playing="true"] .chat-people {
    height: 96px;
  }
}
@media (max-width: 760px) {
  .chat-people {
    height: 35dvh;
  }
}

.event-tone-negative .game-event-icon {
  color: #b52b1d;
}
.event-tone-success .game-event-icon {
  color: #176540;
}