.table-topline {
  min-height: 34px;
  height: auto;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  border: 1px solid #d9e1d5;
  border-radius: 7px;
  background: linear-gradient(110deg, #edf2eb, #f5f3e9);
  color: #334b3d;
  box-shadow: inset 0 1px #ffffffa8;
}

#table-message {
  min-width: 0;
  overflow: hidden;
  color: #294638;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-pill {
  flex: 0 0 auto;
  border-color: #c7b274;
  background: linear-gradient(135deg, #fff9e7, #eee1bb);
  color: #614c1e;
  font-size: 9px;
  font-weight: 800;
}

.table-note {
  color: #3d5545;
}

.table-note p {
  font-size: 12px;
  line-height: 1.5;
}

.hand-hint {
  color: #455d4d;
  font-weight: 600;
}

.play-message {
  color: #285b43;
  font-size: 12px;
}

.play-message small {
  color: #586c5d;
  font-size: 10px;
}

.toast {
  z-index: 30;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  bottom: auto;
  width: min(600px, calc(100vw - 32px));
  padding: 14px 20px;
  border: 1px solid #d8bd70;
  border-radius: 10px;
  background: linear-gradient(120deg, #173d34, #102c26);
  box-shadow: 0 14px 34px #061c1773, inset 0 1px #ffffff20;
  color: #fffdf4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, -10px);
  transition: opacity .25s ease, transform .25s ease;
}

.toast.show {
  transform: translate(-50%, 0);
}

.chat-toggle {
  min-height: 44px;
  font-size: 12px;
}

.home-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #d7d3c8;
  border-radius: 18px;
  background: #fbfaf5;
  color: #506456;
  cursor: pointer;
  font: 600 10px 'DM Sans', sans-serif;
  white-space: nowrap;
}

.home-button span {
  color: #9b8147;
  font-size: 17px;
  line-height: 1;
}

.home-button:hover {
  border-color: #bca76d;
  background: #f7f3e6;
}

.home-button:focus-visible {
  outline: 2px solid #9c8144;
  outline-offset: 2px;
}

.welcome-secondary[hidden] {
  display: none;
}

.welcome-primary[hidden],
.welcome-options[hidden] {
  display: none;
}

.chat-toggle:focus-visible,
.chat-panel button:focus-visible,
.chat-panel input:focus-visible,
.chat-panel select:focus-visible,
.chat-panel textarea:focus-visible {
  outline: 2px solid #bb9d59;
  outline-offset: 2px;
}

.chat-messages {
  scroll-behavior: smooth;
}

.chat-guidelines {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid #e9e4d5;
  background: #f8f5e9;
  color: #6d705c;
  font-size: 9px;
  line-height: 1.4;
}

.chat-message {
  padding: 8px 10px;
  border: 1px solid #ebe5d6;
  border-radius: 8px;
  background: #fffefa;
  color: #394d40;
  font-size: 11px;
}

.chat-message strong {
  color: #264638;
  font-size: 10px;
}

.chat-message time {
  color: #737f73;
}

.chat-message-block-button,
.chat-message-report-button {
  display: block;
  margin-top: 4px;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: #9a6a5d;
  font: 600 8px 'DM Sans', sans-serif;
  cursor: pointer;
}

.chat-message-block-button:hover,
.chat-message-report-button:hover { color: #733f37; text-decoration: underline; }
.chat-message-block-button:focus-visible,
.chat-message-report-button:focus-visible { outline: 2px solid #9c8144; outline-offset: 2px; }
.chat-message-report-button:disabled { color: #617b64; cursor: default; }

.chat-report-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin-top: 7px;
}

.chat-report-form select,
.chat-report-form textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  border: 1px solid #d9d3c3;
  border-radius: 6px;
  padding: 7px;
  color: #34483d;
  background: #fff;
  font: 500 10px 'DM Sans', sans-serif;
}

.chat-report-form textarea { resize: vertical; }
.chat-report-form button { border: 0; border-radius: 5px; padding: 5px 9px; background: #f1eee5; color: #425446; font: 600 9px 'DM Sans', sans-serif; cursor: pointer; }
.chat-report-form button[type='submit'] { background: #425e49; color: #fff; }
.chat-report-form button:disabled { opacity: .55; cursor: wait; }

.chat-form input {
  min-height: 40px;
  font-size: 12px;
}

.chat-form button {
  min-width: 42px;
  min-height: 40px;
  font-size: 15px;
}

.chat-status:empty {
  display: none;
}

@media (max-width: 760px) {
  .chat-toggle {
    display: none;
  }

  .online-button {
    position: relative;
    overflow: visible;
  }

  .online-button.chat-ready::before {
    content: '✉';
  }

  .online-button[data-unread]::after {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 1px solid #fff8e1;
    border-radius: 50%;
    background: #c54c3c;
    color: #fff;
    content: attr(data-unread);
    font: 800 8px/1 'DM Sans', sans-serif;
    z-index: 1;
  }

  .home-button {
    width: 27px;
    min-height: 27px;
    flex: 0 0 27px;
    padding: 0;
  }

  .home-button b {
    display: none;
  }

  .home-button span {
    font-size: 16px;
  }

  .table-topline {
    min-height: 30px;
    height: auto;
    padding: 3px 6px;
  }

  #table-message {
    font-size: 10px;
  }

  .turn-pill {
    padding: 5px 6px;
    font-size: 7px;
  }

  .table-note p {
    font-size: 10px;
  }

  .chat-toggle {
    min-height: 42px;
    padding: 10px 13px;
  }
}

.play-message {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.play-message-copy {
  min-width: 0;
}

.play-message-copy strong {
  color: #244c38;
  font-size: 12px;
}

.play-message-copy small {
  max-width: 330px;
  line-height: 1.35;
}

.turn-clock {
  display: flex;
  min-width: 148px;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  padding: 6px 9px;
  border: 1px solid #d3c084;
  border-radius: 7px;
  background: linear-gradient(135deg, #fff9e6, #f1e5bd);
  color: #4f421f;
  box-shadow: inset 0 1px #fff;
}

.turn-clock[hidden] {
  display: none;
}

.turn-clock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.turn-clock-heading b {
  font: 800 15px/1 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}

.turn-clock-heading small {
  max-width: 68%;
  color: #786a41;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1.1;
  text-align: right;
}

.turn-clock-meta {
  color: #6b654f;
}

.turn-clock-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #d9d1b4;
}

.turn-clock-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #a8812e;
  transition: width .2s linear, background .2s ease;
}

.turn-clock.overtime {
  border-color: #d49a8e;
  background: linear-gradient(135deg, #fff0ed, #f5d6d0);
  color: #833f35;
}

.turn-clock.overtime .turn-clock-heading small,
.turn-clock.overtime .turn-clock-meta {
  color: #944d42;
}

.turn-clock.overtime .turn-clock-track i {
  background: #be4e3d;
}

.turn-clock.urgent {
  border-color: #d7a183;
  background: linear-gradient(135deg, #fff5e9, #f6dfcf);
  color: #75452f;
  animation: turn-clock-urgent 1s ease-in-out infinite alternate;
}

.turn-clock.urgent .turn-clock-heading small,
.turn-clock.urgent .turn-clock-meta {
  color: #885438;
}

.turn-clock.urgent .turn-clock-track i {
  background: #ce734c;
}

@keyframes turn-clock-urgent {
  to { box-shadow: 0 0 0 3px #cf80502a, inset 0 1px #fff; }
}

.turn-clock-meta {
  font-size: 7px;
  line-height: 1.2;
  white-space: nowrap;
}

.table-topline {
  height: auto;
  min-height: 32px;
  flex-wrap: wrap;
  gap: 6px;
}

.table-topline .turn-clock {
  min-width: min(250px, 100%);
  max-width: 420px;
  flex: 1 1 220px;
  margin-left: auto;
}

@media (max-width: 760px) {
  .play-message {
    gap: 5px;
  }

  .play-message-copy strong {
    font-size: 9px;
  }

  .play-message-copy small {
    max-width: 145px;
    font-size: 7px;
  }

  .turn-clock {
    min-width: 112px;
    gap: 3px;
    padding: 4px 6px;
  }

  .turn-clock-heading b {
    font-size: 12px;
  }

  .turn-clock-heading small,
  .turn-clock-meta {
    font-size: 6px;
  }
}

@media (max-width: 360px) {
  .home-button {
    width: 23px;
    min-height: 23px;
    flex-basis: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-messages {
    scroll-behavior: auto;
  }
}

.table-topline {
  min-height: 38px;
  margin-bottom: 8px;
  border-color: #b9c9ba;
  background: linear-gradient(110deg, #e2eee4, #f6f0dc);
  box-shadow: 0 3px 10px #18392b12, inset 0 1px #ffffffd9;
}

#table-message {
  color: #193e30;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05px;
}

.turn-pill {
  border: 1px solid #bb9950;
  background: linear-gradient(135deg, #fff7d8, #f0dfa7);
  color: #49370f;
  font-size: 9px;
  box-shadow: 0 2px 7px #513f1a20;
}

.hand-hint {
  display: inline-block;
  max-width: min(44vw, 370px);
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid #c9d9c9;
  border-radius: 6px;
  background: #eaf3e9;
  color: #284c37;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trick-result {
  padding: 10px 15px;
  border: 1px solid #d7bb6e;
  background: #fff7dc;
  box-shadow: 0 6px 22px #07181155;
  color: #453714;
  font-size: 12px;
}

@media (max-width: 760px) {
  .table-topline {
    min-height: 32px;
    margin-bottom: 5px;
    padding-inline: 7px;
  }

  #table-message {
    font-size: 10px;
  }

  .turn-pill {
    max-width: 43%;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
  }

  .hand-hint {
    max-width: 48vw;
    padding: 4px 6px;
    font-size: 8px;
  }

  .trick-result {
    max-width: calc(100% - 26px);
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .toast {
    right: 14px;
    left: auto;
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    width: min(280px, calc(45vw - 22px));
    min-width: 120px;
    padding: 9px 12px;
    font-size: 11px;
    text-align: left;
    transform: translateY(-10px);
  }

  .toast.show {
    transform: translateY(0);
  }
}