html[data-game-mode="online"] #ready-overlay {
  display: none;
}

html[data-game-mode="online"]:not([data-online-board-state="playing"]) #game-menu-btn {
  display: none;
}

.online-settlement-overlay {
  display: none;
}

html[data-game-mode="online"] .online-settlement-overlay {
  position: fixed;
  z-index: 250;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 218, 117, 0.16), transparent 45%),
    rgba(38, 20, 9, 0.66);
  backdrop-filter: blur(5px);
}

html[data-game-mode="online"] .online-settlement-overlay.hidden {
  display: none;
}

.online-settlement-panel {
  width: min(720px, calc(100% - 14px));
  max-height: calc(100% - 10px);
  overflow: auto;
  padding: 18px 22px 20px;
  border: 2px solid rgba(255, 222, 143, 0.72);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(117, 64, 28, 0.98), rgba(62, 31, 16, 0.99));
  color: #fff2ca;
  text-align: center;
  box-shadow: 0 24px 58px rgba(22, 9, 3, 0.64), inset 0 1px rgba(255, 246, 205, 0.16);
}

.online-settlement-kicker {
  margin: 0 0 2px;
  color: #d9bd82;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.online-settlement-panel h2 {
  margin: 0;
  color: #ffe178;
  font-size: clamp(25px, 4vw, 38px);
  text-shadow: 0 3px 4px rgba(40, 15, 4, 0.62);
}

.online-settlement-summary {
  margin: 5px 0 8px;
  color: #f1dbad;
  font-weight: 800;
}

.online-settlement-mingtang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 24px;
  gap: 6px;
  margin-bottom: 10px;
}

.online-settlement-mingtang span {
  padding: 3px 9px;
  border: 1px solid rgba(255, 226, 139, 0.32);
  border-radius: 999px;
  background: rgba(146, 76, 29, 0.54);
  color: #ffe59a;
  font-size: 12px;
  font-weight: 900;
}

.online-settlement-mingtang span.multiplier {
  background: rgba(145, 40, 23, 0.64);
  color: #fff0bd;
}

.online-settlement-mingtang .online-mingtang-effect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.online-settlement-mingtang .online-mingtang-effect.has-image {
  width: 112px;
  min-height: 72px;
  padding: 2px 6px 4px;
  flex-direction: column;
  border-radius: 10px;
  animation: onlineMingTangReveal 680ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
  animation-delay: calc(var(--online-mingtang-order, 0) * 180ms);
}

.online-mingtang-effect img {
  display: block;
  width: 100%;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(31, 8, 2, 0.58));
}

.online-mingtang-effect small {
  color: #ffe59a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

@keyframes onlineMingTangReveal {
  from { opacity: 0; transform: translateY(12px) scale(0.76); }
  64% { opacity: 1; transform: translateY(-2px) scale(1.06); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.online-settlement-player-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.online-settlement-player-list li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 226, 154, 0.2);
  border-radius: 11px;
  background: rgba(43, 22, 12, 0.44);
  text-align: left;
}

.online-settlement-player-list li.winner {
  border-color: rgba(255, 222, 101, 0.76);
  background: rgba(137, 73, 29, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 231, 151, 0.16);
}

.online-settlement-player-list li.disconnected {
  opacity: 0.56;
}

.online-settlement-player-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.online-settlement-player-heading strong {
  overflow: hidden;
  color: #ffe69b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-settlement-player-heading span {
  flex: 0 0 auto;
  color: #d5bd8e;
  font-size: 11px;
  font-weight: 900;
}

.online-settlement-player-heading span.ready {
  color: #a8e7aa;
}

.online-settlement-player-list p,
.online-settlement-player-list small {
  display: block;
  margin: 4px 0 0;
  color: #e7d3aa;
  font-size: 11px;
  line-height: 1.35;
}

.online-settlement-next-note {
  margin: 10px 0 4px;
  color: #d6c296;
  font-size: 12px;
}

.online-next-hand-progress {
  display: block;
  margin-bottom: 8px;
  color: #ffe7a2;
}

.online-settlement-error {
  margin: -2px 0 8px;
  color: #ffb09d;
  font-size: 12px;
  font-weight: 800;
}

.online-settlement-error.hidden {
  display: none;
}

.online-settlement-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.online-settlement-leave,
.online-next-hand-ready {
  min-width: min(260px, 46%);
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 231, 158, 0.64);
  border-radius: 11px;
  background: linear-gradient(180deg, #b36d2d, #81441f);
  color: #fff2c9;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(29, 12, 5, 0.34);
}

.online-settlement-leave {
  background: rgba(48, 28, 17, 0.66);
  color: #ead7ae;
}

.online-settlement-leave:disabled,
.online-next-hand-ready:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45);
  opacity: 0.58;
}

html[data-game-mode="online"] .tips {
  opacity: 0.18;
  pointer-events: none;
}

html[data-game-mode="online"] .control-row,
html[data-game-mode="online"] #arrange-hand {
  display: none !important;
}

html[data-game-mode="online"] .log {
  opacity: 0.86;
  pointer-events: none;
}

html[data-game-mode="online"]:not([data-online-board-state="playing"]) .action-stack {
  opacity: 0.18;
  pointer-events: none;
}

html[data-game-mode="online"][data-online-board-state="reconnecting"] #hand,
html[data-game-mode="online"][data-online-board-state="reconnecting"] .action-stack {
  opacity: 0.48;
  pointer-events: none;
}

html[data-game-mode="online"] .action-stack .ink-button[hidden] {
  display: none;
}

html[data-game-mode="online"] .action-cue.online-image-cue {
  width: clamp(120px, 18vw, 220px);
  max-height: 28vh;
  z-index: 75;
}

html[data-game-mode="online"] .action-cue.online-image-cue .action-cue-image {
  max-height: 28vh;
  object-fit: contain;
}

html[data-game-mode="online"] .action-cue.online-image-cue .action-cue-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html[data-game-mode="online"] .action-cue[data-online-terminal="true"] {
  z-index: 178;
}

html[data-game-mode="online"] .my-tangzi {
  left: min(calc(50% + 341px), calc(100% - 170px));
  width: 162px;
  max-width: 162px;
}

.game-mode-overlay,
.game-function-overlay,
.online-lobby-overlay {
  position: fixed;
  inset: 0;
  width: var(--mobile-viewport-width, 100dvw);
  height: var(--mobile-viewport-height, 100dvh);
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(38, 20, 9, 0.62);
  backdrop-filter: blur(5px);
}

.game-mode-overlay {
  z-index: 270;
}

.game-function-overlay {
  z-index: 280;
}

.online-lobby-overlay {
  z-index: 240;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 223, 142, 0.12), transparent 42%),
    rgba(38, 20, 9, 0.55);
}

.game-mode-overlay.hidden,
.game-function-overlay.hidden,
.online-lobby-overlay.hidden,
.online-entry-panel.hidden,
.online-recovery-panel.hidden,
.online-room-panel.hidden,
.online-test-player-panel.hidden,
.online-private-deal.hidden,
.online-session-chip.hidden,
.online-table-hud.hidden,
.online-room-close.hidden,
.online-disconnect-banner.hidden,
.online-ready-toggle.hidden {
  display: none;
}

.game-mode-panel,
.game-function-panel,
.online-lobby-panel {
  width: min(760px, calc(100% - 20px));
  max-height: calc(100% - 12px);
  overflow: auto;
  border: 2px solid rgba(255, 222, 143, 0.68);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(119, 67, 31, 0.97), rgba(69, 35, 18, 0.98));
  color: #fff4cf;
  box-shadow: 0 22px 54px rgba(24, 10, 4, 0.56), inset 0 1px rgba(255, 245, 201, 0.18);
}

.game-mode-panel {
  position: relative;
  width: min(620px, calc(100% - 20px));
  padding: 28px;
  text-align: center;
}

.game-function-panel {
  width: min(680px, calc(100% - 20px));
  max-height: calc(100% - 12px);
  overflow: auto;
}

.game-function-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  align-items: center;
  min-height: 76px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 225, 156, 0.22);
  background: rgba(77, 41, 21, 0.97);
  text-align: center;
}

.game-function-header p {
  margin: 0 0 2px;
  color: #d8bc7d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.game-function-header h2 {
  margin: 0;
  color: #ffe48e;
  font-size: 26px;
}

.game-function-close,
.game-function-back {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 226, 155, 0.3);
  border-radius: 999px;
  background: rgba(34, 17, 9, 0.45);
  color: #fff0c3;
  cursor: pointer;
}

.game-function-close {
  padding: 0;
  font-size: 24px;
}

.game-function-back {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.game-function-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.game-function-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(255, 224, 151, 0.34);
  border-radius: 13px;
  background: rgba(46, 24, 13, 0.52);
  color: #fff4cf;
  text-align: left;
  cursor: pointer;
}

.game-function-item:hover:not(:disabled),
.game-function-item:focus-visible {
  border-color: #ffdf78;
  background: rgba(151, 83, 34, 0.52);
}

.game-function-item:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.game-function-item.danger:not(:disabled) {
  border-color: rgba(255, 126, 104, 0.5);
  background: rgba(111, 36, 26, 0.55);
}

.game-function-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 220, 133, 0.13);
  color: #ffe48e;
  font-size: 17px;
  font-weight: 900;
}

.game-function-item strong,
.game-function-item small {
  display: block;
}

.game-function-item strong {
  font-size: 17px;
}

.game-function-item small {
  margin-top: 4px;
  color: #d8c39b;
  line-height: 1.35;
}

.game-function-history {
  padding: 16px 18px 20px;
}

.game-function-history-note,
.game-function-history-empty {
  margin: 0 0 12px;
  color: #decaa1;
  font-size: 13px;
  line-height: 1.5;
}

.game-function-history-empty {
  padding: 30px 16px;
  border: 1px dashed rgba(255, 226, 155, 0.28);
  border-radius: 12px;
  text-align: center;
}

.game-function-history-list {
  display: grid;
  gap: 10px;
}

.game-history-card {
  padding: 13px;
  border: 1px solid rgba(255, 224, 151, 0.28);
  border-radius: 12px;
  background: rgba(43, 23, 13, 0.45);
}

.game-history-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.game-history-heading strong {
  color: #ffe48e;
}

.game-history-heading time,
.game-history-card > p {
  color: #cdbb95;
  font-size: 12px;
}

.game-history-card > p {
  margin: 6px 0;
}

.game-history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 6px;
}

.game-history-tags span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(184, 111, 41, 0.48);
  color: #ffe6aa;
  font-size: 11px;
}

.game-history-players {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.game-history-players li {
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.game-history-players li.self {
  box-shadow: inset 0 0 0 1px rgba(255, 222, 121, 0.36);
}

.game-history-players li.winner strong {
  color: #ffe16f;
}

.game-history-players strong,
.game-history-players span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-history-players span {
  margin-top: 3px;
  color: #d6c29b;
  font-size: 10px;
}

.game-function-confirm {
  padding: 25px 22px 24px;
  text-align: center;
}

.game-function-warning {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(183, 54, 35, 0.62);
  color: #ffe0c4;
  font-size: 30px;
  font-weight: 900;
}

.game-function-confirm h3 {
  margin: 0;
  color: #ffe48e;
  font-size: 24px;
}

.game-function-confirm p {
  max-width: 520px;
  margin: 10px auto 18px;
  color: #ead7ae;
  line-height: 1.6;
}

.game-function-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.game-function-confirm-actions button {
  min-width: 140px;
  min-height: 44px;
  border: 1px solid rgba(255, 226, 155, 0.34);
  border-radius: 10px;
  background: rgba(43, 25, 15, 0.58);
  color: #ffe9b4;
  font-weight: 900;
  cursor: pointer;
}

.game-function-confirm-actions button.danger {
  border-color: rgba(255, 126, 104, 0.6);
  background: #8c3022;
  color: #fff2dd;
}

.game-function-main.hidden,
.game-function-history.hidden,
.game-function-confirm.hidden,
.game-function-back.hidden {
  display: none;
}

.game-mode-panel h2,
.online-lobby-header h1 {
  margin: 0;
  color: #ffe48e;
  text-shadow: 0 3px 4px rgba(44, 18, 6, 0.55);
}

.game-mode-panel > p {
  margin: 8px 0 22px;
  color: #ead7ae;
}

.game-mode-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 18, 9, 0.48);
  color: #fff0c3;
  font-size: 24px;
  cursor: pointer;
}

.game-mode-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.game-mode-choice {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(255, 224, 151, 0.36);
  border-radius: 13px;
  background: rgba(46, 24, 13, 0.52);
  color: #fff4cf;
  text-align: left;
  cursor: pointer;
}

.game-mode-choice strong {
  color: #ffe48e;
  font-size: 21px;
}

.game-mode-choice small {
  color: #dcc79e;
  line-height: 1.45;
}

.game-mode-choice.active {
  border-color: #ffdf78;
  background: rgba(151, 83, 34, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 134, 0.35);
}

.standalone-backup-link {
  display: inline-block;
  margin-top: 18px;
  color: #ffe5a1;
  font-size: 13px;
  font-weight: 800;
  text-underline-offset: 3px;
}

.online-lobby-panel {
  width: min(820px, calc(100% - 16px));
}

.online-lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 225, 156, 0.22);
}

.online-lobby-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.online-lobby-connection-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.online-room-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 226, 155, 0.36);
  border-radius: 50%;
  background: rgba(42, 25, 15, 0.5);
  color: #ffe9b4;
  font-size: 22px;
  cursor: pointer;
}

.online-mode-menu {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 226, 155, 0.36);
  border-radius: 999px;
  background: rgba(42, 25, 15, 0.5);
  color: #ffe9b4;
  font-weight: 800;
  cursor: pointer;
}

.online-lobby-header h1 {
  font-size: 30px;
}

.online-stage-tag,
.online-session-chip,
.online-room-phase {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(43, 105, 83, 0.58);
  color: #dfffd9;
  font-size: 12px;
  font-weight: 800;
}

.online-connection-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e9d5ac;
  font-size: 13px;
  font-weight: 800;
}

.online-connection-state::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5ae55;
  box-shadow: 0 0 9px currentColor;
  content: "";
}

.online-connection-state[data-state="connected"]::before {
  background: #7cdf8a;
}

.online-connection-state[data-state="disconnected"]::before,
.online-connection-state[data-state="error"]::before {
  background: #ff7d69;
}

.online-disconnect-banner {
  padding: 8px 20px;
  background: rgba(153, 50, 35, 0.82);
  color: #fff5de;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.online-lobby-body {
  padding: 16px 22px 20px;
}

.online-status-message {
  min-height: 22px;
  margin: 0 0 13px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(35, 21, 13, 0.34);
  color: #ead7ae;
  font-size: 13px;
  line-height: 1.4;
}

.online-status-message.success {
  background: rgba(30, 99, 67, 0.38);
  color: #dfffd9;
}

.online-status-message.error {
  background: rgba(151, 52, 38, 0.42);
  color: #ffe2d4;
}

.online-entry-panel {
  display: grid;
  gap: 14px;
}

.online-field {
  display: grid;
  gap: 6px;
}

.online-field span {
  color: #ffe8ad;
  font-size: 13px;
  font-weight: 800;
}

.online-field input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 225, 156, 0.38);
  border-radius: 9px;
  outline: none;
  background: rgba(30, 18, 11, 0.5);
  color: #fff8df;
  font: inherit;
  font-size: 16px;
}

.online-field input:focus {
  border-color: #ffdf78;
  box-shadow: 0 0 0 3px rgba(255, 223, 120, 0.14);
}

.online-entry-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
}

.online-entry-divider {
  align-self: center;
  color: #bda77e;
  font-size: 13px;
}

.online-join-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.online-primary-button,
.online-secondary-button,
.online-ready-toggle {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 227, 158, 0.44);
  border-radius: 9px;
  background: linear-gradient(180deg, #c78535, #985425);
  color: #fff8de;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 13px rgba(36, 15, 7, 0.28);
}

.online-secondary-button {
  background: rgba(48, 28, 17, 0.56);
  box-shadow: none;
}

.online-primary-button:disabled,
.online-secondary-button:disabled,
.online-ready-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.online-recovery-panel {
  padding: 28px 18px;
  border-radius: 11px;
  background: rgba(38, 23, 14, 0.38);
  color: #ffe8ad;
  text-align: center;
  font-weight: 800;
}

.online-room-panel {
  display: grid;
  gap: 13px;
}

.online-test-player-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 226, 151, 0.28);
  border-radius: 11px;
  background: rgba(44, 72, 48, 0.34);
}

.online-test-player-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.online-test-player-copy strong {
  color: #ffe48e;
  font-size: 14px;
}

.online-test-player-copy small {
  color: #d8c69d;
  line-height: 1.4;
}

.online-add-test-players {
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(185, 239, 177, 0.42);
  border-radius: 9px;
  background: linear-gradient(180deg, #4d8d65, #316247);
  color: #efffe8;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 13px rgba(20, 44, 28, 0.3);
}

.online-add-test-players:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.online-room-toolbar,
.online-room-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.online-room-code-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}

.online-room-code-label {
  color: #dac59e;
  font-size: 13px;
}

.online-room-code {
  color: #ffe48e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 4px;
}

.online-copy-room {
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 226, 155, 0.33);
  border-radius: 7px;
  background: rgba(42, 25, 15, 0.44);
  color: #ffe9b4;
  cursor: pointer;
}

.online-seat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.online-seat {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 9px;
  border: 1px solid rgba(255, 225, 156, 0.22);
  border-radius: 10px;
  background: rgba(35, 21, 13, 0.36);
}

.online-seat.self {
  border-color: rgba(255, 226, 130, 0.64);
  background: rgba(118, 68, 31, 0.48);
}

.online-seat.disconnected {
  opacity: 0.58;
}

.online-seat-marker {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #3d765e;
  color: #f2ffe7;
  font-weight: 950;
}

.online-seat-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.online-seat-copy strong,
.online-seat-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-seat-copy small {
  color: #cbb792;
  font-size: 11px;
}

.online-seat-badge {
  color: #bba47a;
  font-size: 11px;
  font-weight: 900;
}

.online-seat-badge.ready {
  color: #8be69a;
}

.online-seat-badge.computer {
  color: #ffe48e;
}

.online-ready-toggle {
  min-width: 130px;
}

.online-ready-toggle.is-ready {
  background: linear-gradient(180deg, #3b8b68, #276449);
}

.online-private-deal {
  padding: 12px;
  border: 1px solid rgba(255, 226, 151, 0.25);
  border-radius: 11px;
  background: rgba(33, 20, 12, 0.4);
}

.online-private-deal h2 {
  margin: 0;
  color: #ffe48e;
  font-size: 17px;
}

.online-private-deal p {
  margin: 4px 0 10px;
  color: #ceb991;
  font-size: 12px;
}

.online-private-cards {
  display: flex;
  gap: 4px;
  min-height: 70px;
  overflow-x: auto;
  padding: 3px 2px 7px;
}

.online-deal-card {
  position: relative;
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 66px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c4a371;
  border-radius: 5px;
  background: linear-gradient(90deg, #fffef4, #f4e7c5);
  color: #17120e;
  font-family: var(--tile-font);
  font-size: 29px;
  font-weight: 950;
  box-shadow: 0 3px 7px rgba(30, 12, 5, 0.28);
}

.online-deal-card.red {
  color: #c6211c;
}

.online-deal-card img {
  width: 82%;
  height: 78%;
  object-fit: contain;
}

.online-session-chip {
  position: absolute;
  z-index: 175;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.online-table-hud {
  position: absolute;
  z-index: 172;
  top: 8px;
  left: 50%;
  display: flex;
  align-items: center;
  max-width: calc(100% - 110px);
  min-height: 34px;
  gap: 9px;
  padding: 4px 9px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 226, 147, 0.32);
  border-radius: 999px;
  background: rgba(50, 28, 15, 0.82);
  color: #f5dfae;
  box-shadow: 0 5px 16px rgba(25, 10, 4, 0.3);
  font-size: 12px;
  backdrop-filter: blur(4px);
}

.online-room-toggle {
  min-height: 44px;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(142, 84, 35, 0.68);
  color: #ffe7a1;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.online-table-connection {
  color: #9be3a7;
  font-weight: 800;
  white-space: nowrap;
}

.online-table-connection[data-state="disconnected"],
.online-table-connection[data-state="error"] {
  color: #ff9a83;
}

.online-turn-clock {
  min-width: 30px;
  color: #ffe16f;
  font-size: 14px;
  text-align: center;
}

.online-action-message {
  overflow: hidden;
  color: #ead3a4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-game-mode="online"] .seat.online-turn,
html[data-game-mode="online"] .my-seat.online-turn {
  filter: drop-shadow(0 0 9px rgba(255, 221, 101, 0.72));
}

html[data-game-mode="online"] .seat.online-disconnected {
  opacity: 0.58;
}

@media (max-width: 760px) {
  .game-mode-choices,
  .game-function-main,
  .online-seat-list,
  .online-settlement-player-list {
    grid-template-columns: 1fr;
  }

  .online-entry-actions {
    grid-template-columns: 1fr;
  }

  .online-entry-divider {
    display: none;
  }

  .online-lobby-header,
  .online-room-toolbar,
  .online-test-player-panel,
  .online-room-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .online-add-test-players {
    width: 100%;
  }

  .online-lobby-title-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .online-join-form {
    grid-template-columns: 1fr;
  }

  .online-join-form .online-primary-button {
    width: 100%;
  }

  .online-settlement-actions {
    flex-direction: column;
  }

  .online-settlement-leave,
  .online-next-hand-ready {
    width: 100%;
    min-width: 0;
  }

  .game-history-players {
    grid-template-columns: 1fr;
  }

  .game-function-confirm-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .game-function-confirm-actions button {
    width: 100%;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .online-lobby-overlay,
  .game-mode-overlay,
  .game-function-overlay {
    padding: 6px;
  }

  .online-lobby-header {
    padding: 10px 16px 8px;
  }

  .online-lobby-header h1 {
    font-size: 24px;
  }

  .game-function-header {
    min-height: 58px;
    padding: 6px 12px;
  }

  .game-function-header h2 {
    font-size: 22px;
  }

  .game-function-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .game-function-item {
    min-height: 64px;
    padding: 7px 9px;
  }

  .game-function-history {
    padding: 9px 12px 12px;
  }

  .online-lobby-body {
    padding: 9px 16px 12px;
  }

  .online-status-message {
    margin-bottom: 7px;
    padding: 5px 8px;
  }

  .online-test-player-panel {
    gap: 7px;
    padding: 7px 9px;
  }

  .online-seat {
    min-height: 52px;
  }

  .online-seat-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .online-settlement-panel {
    padding: 10px 16px 12px;
  }

  .online-settlement-panel h2 {
    font-size: 25px;
  }

  .online-settlement-summary,
  .online-settlement-next-note {
    margin-top: 3px;
    margin-bottom: 5px;
  }

  .online-settlement-player-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-game-mode="online"] .action-cue.online-image-cue {
    width: clamp(110px, 16vw, 180px);
    max-height: 25vh;
  }

  html[data-game-mode="online"] .action-cue.online-image-cue .action-cue-image {
    max-height: 25vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-settlement-mingtang .online-mingtang-effect.has-image {
    animation: none;
  }

  html[data-game-mode="online"] .action-cue.visible {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}