body.ui-direction-a.in-game {
  height: 100svh;
  overflow: hidden;
}

body.ui-direction-a.in-game .shell {
  height: 100svh;
  min-height: 0;
  padding-bottom: var(--ui-space-3);
  overflow: hidden;
}

.ui-direction-a .brand-block {
  grid-column: 3;
  grid-row: 1;
}

.ui-direction-a .top-actions {
  grid-column: 1;
  grid-row: 1;
}

.ui-direction-a .topbar-score {
  grid-column: 2;
  grid-row: 1;
}

.ui-direction-a .connection-state {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

body.ui-direction-a.in-game .connection-state {
  right: 12px;
  left: auto;
}

body.ui-direction-a.in-game .topbar .topbar-score {
  min-width: min(330px, 54vw);
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-deep) 78%, transparent);
  box-shadow: var(--ui-inset-highlight);
}

.ui-direction-a .score-grid > div {
  min-width: 74px;
  padding: 6px 16px;
}

.ui-direction-a .score-grid > div + div {
  border-right: 1px solid var(--ui-line);
}

.ui-direction-a .score-grid span {
  color: var(--ui-text-subtle);
  font-size: 9px;
}

.ui-direction-a .score-grid strong {
  color: var(--ui-text);
  font-size: 20px;
  font-weight: 900;
}

.ui-direction-a .score-grid > div:first-child strong {
  color: var(--ui-team-us);
}

.ui-direction-a .score-grid > div:last-child strong {
  color: var(--ui-team-them);
}

.ui-direction-a .score-grid .score-contract {
  min-width: 126px;
  padding-inline: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-brass-500) 10%, transparent), transparent),
    color-mix(in srgb, var(--ui-surface-2) 62%, transparent);
}

.ui-direction-a .score-grid .score-contract strong {
  color: var(--ui-brass-300);
  font-size: 12px;
}

.ui-direction-a .declarer-mini {
  max-width: 200px;
  color: var(--ui-text-muted);
  font-size: 9px;
  font-weight: 700;
}

.ui-direction-a .game {
  height: calc(100svh - var(--ui-topbar-height) - 38px);
  min-height: 0;
  margin-top: var(--ui-space-3);
}

.ui-direction-a .game-layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: clamp(190px, 15vw, 230px) minmax(680px, 1fr) clamp(190px, 15vw, 230px);
  gap: var(--ui-space-3);
}

.ui-direction-a .side {
  min-height: 0;
  padding: 16px 14px;
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 3%, transparent), transparent 38%),
    color-mix(in srgb, var(--ui-surface-1) 94%, transparent);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
}

.ui-direction-a .side::before {
  opacity: 0.45;
  background:
    linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--ui-brass-400) 9%, transparent) 47% 49%, transparent 50%) 0 0 / 22px 22px;
  mask-image: linear-gradient(#000, transparent 26%);
}

.ui-direction-a .side-head {
  padding-bottom: var(--ui-space-2);
  align-items: center;
  border-bottom: 1px solid var(--ui-line);
}

.ui-direction-a .side-head span {
  color: var(--ui-text-subtle);
  font-size: 9px;
}

.ui-direction-a .side-head strong {
  color: var(--ui-text-soft);
  font-family: var(--ui-font-display);
  font-size: 14px;
}

.ui-direction-a .declaration-card,
.ui-direction-a .voice-card,
.ui-direction-a .invite-card,
.ui-direction-a .player-line {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 3%, transparent), transparent),
    color-mix(in srgb, var(--ui-surface-3) 54%, transparent);
  box-shadow: var(--ui-inset-highlight);
}

.ui-direction-a .declaration-card {
  min-height: 78px;
  padding: 13px;
}

.ui-direction-a .declaration-card strong {
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.ui-direction-a .voice-card {
  opacity: 0.68;
}

.ui-direction-a .voice-icon {
  border: 1px solid color-mix(in srgb, var(--ui-felt-500) 40%, var(--ui-line));
  background: var(--ui-felt-800);
}

.ui-direction-a .players-list {
  gap: var(--ui-space-2);
}

.ui-direction-a .player-line {
  min-height: 42px;
  padding: 9px 10px;
}

.ui-direction-a .player-line strong {
  color: var(--ui-text-soft);
  font-size: 12px;
}

.ui-direction-a .player-line span {
  max-width: 58%;
  color: var(--ui-text-subtle);
  font-size: 9px;
}

.ui-direction-a .table-wrap {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background:
    radial-gradient(64% 62% at 50% 48%, color-mix(in srgb, var(--ui-felt-700) 20%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-felt-900) 48%, var(--ui-bg-deep)), var(--ui-bg-deep));
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-md);
}

.ui-direction-a .table-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  background:
    linear-gradient(135deg, transparent 47%, color-mix(in srgb, var(--ui-brass-400) 12%, transparent) 48% 49%, transparent 50%) 0 0 / 30px 30px;
  mask-image: linear-gradient(90deg, #000, transparent 17%, transparent 83%, #000);
}

.ui-direction-a .table-board {
  min-height: 0;
  height: 100%;
  perspective: none;
  background:
    radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--ui-felt-700) 17%, transparent), transparent 56%);
}

.ui-direction-a .center-table {
  top: 47%;
  width: min(570px, calc(100svh - 258px), calc(100% - 286px));
  border-radius: var(--ui-radius-md);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 3%, transparent), rgba(0, 0, 0, 0.08)),
    url("/assets/premium-table-mat-cropped.png") center / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.48),
    inset 0 18px 42px color-mix(in srgb, white 3.5%, transparent),
    inset 0 -34px 64px rgba(0, 0, 0, 0.26),
    0 0 0 4px #2d211a,
    0 0 0 6px var(--ui-brass-800),
    0 0 0 8px #1b1410,
    0 16px 0 #261a13,
    0 32px 70px rgba(0, 0, 0, 0.62);
}

.ui-direction-a .center-table::before {
  opacity: 0.48;
  background:
    linear-gradient(135deg, color-mix(in srgb, white 7%, transparent), transparent 24% 72%, rgba(0, 0, 0, 0.12)),
    radial-gradient(62% 52% at 50% 38%, color-mix(in srgb, var(--ui-cream-100) 3%, transparent), transparent 72%);
}

.ui-direction-a .center-table::after {
  bottom: -42px;
  height: 54px;
  opacity: 0.8;
}

.ui-direction-a .table-core {
  top: 76px;
  right: 50%;
  min-width: 220px;
  max-width: min(420px, calc(100% - 36px));
  min-height: 40px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 7px 10px;
  transform: translateX(50%);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-round);
  background: color-mix(in srgb, var(--ui-bg-deep) 88%, transparent);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-xs);
}

.ui-direction-a .table-core span {
  border-radius: var(--ui-radius-round);
  background: color-mix(in srgb, var(--ui-brass-500) 14%, transparent);
  color: var(--ui-brass-300);
}

.ui-direction-a .table-core strong {
  color: var(--ui-text-soft);
  font-size: 12px;
}

.ui-direction-a .seat {
  z-index: 24;
}

.ui-direction-a .seat.active {
  z-index: 42;
}

.ui-direction-a .seat-head {
  min-height: 44px;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  padding: 5px 7px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-round);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 4%, transparent), transparent),
    color-mix(in srgb, var(--ui-bg-deep) 86%, transparent);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-xs);
}

.ui-direction-a .seat.active .seat-head {
  border-color: var(--ui-line-brass);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ui-brass-400) 13%, transparent),
    var(--ui-shadow-xs);
}

.ui-direction-a .seat.active .seat-copy {
  box-shadow: none;
}

.ui-direction-a .seat-avatar {
  background: linear-gradient(160deg, var(--ui-brass-300), var(--ui-brass-700));
  color: var(--ui-action-text);
}

.ui-direction-a .seat:not(.viewer) .seat-avatar,
.ui-direction-a .seat-right .seat-avatar {
  background: linear-gradient(160deg, var(--ui-slate-400), var(--ui-slate-800));
  color: var(--ui-text);
}

.ui-direction-a .seat-title {
  color: var(--ui-text-soft);
  font-size: 12px;
}

.ui-direction-a .seat-title span:first-child {
  max-width: 106px;
}

.ui-direction-a .seat-meta {
  color: var(--ui-text-subtle);
}

.ui-direction-a .buyer-badge,
.ui-direction-a .dealer-badge,
.ui-direction-a .declarer-badge {
  min-height: 18px;
  padding: 3px 6px;
  border-color: var(--ui-line-brass);
  background: color-mix(in srgb, var(--ui-brass-500) 14%, var(--ui-bg-deep));
  color: var(--ui-brass-300);
}

.ui-direction-a .declarer-badge {
  border-color: color-mix(in srgb, var(--ui-success) 42%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-felt-600) 30%, var(--ui-bg-deep));
  color: #cce8d8;
}

.ui-direction-a .card-count {
  background: color-mix(in srgb, var(--ui-brass-500) 12%, var(--ui-bg-deep));
  color: var(--ui-brass-300);
}

.ui-direction-a .seat-top {
  top: 72px;
  width: min(340px, calc(100% - 290px));
}

.ui-direction-a .seat-left,
.ui-direction-a .seat-right {
  top: 47%;
  width: 176px;
}

.ui-direction-a .seat-left {
  left: clamp(18px, calc(50% - 470px), calc(50% - 286px));
}

.ui-direction-a .seat-right {
  right: clamp(18px, calc(50% - 470px), calc(50% - 286px));
}

.ui-direction-a .seat-left .seat-copy,
.ui-direction-a .seat-right .seat-copy,
.ui-direction-a .seat-top .seat-copy {
  max-width: 104px;
  border: 1px solid color-mix(in srgb, var(--ui-brass-800) 46%, transparent);
  border-radius: var(--ui-radius-xs);
  background: linear-gradient(180deg, var(--ui-cream-100), var(--ui-cream-200));
  color: var(--ui-action-text);
  box-shadow: var(--ui-shadow-xs);
}

.ui-direction-a .seat-top .seat-title,
.ui-direction-a .seat-left .seat-title,
.ui-direction-a .seat-right .seat-title {
  color: var(--ui-action-text);
}

.ui-direction-a .seat-bottom {
  bottom: 18px;
  width: min(760px, calc(100% - 28px));
  gap: var(--ui-space-2);
}

body.ui-direction-a[data-phase="BID_FIRST"] .seat-bottom,
body.ui-direction-a[data-phase="BID_SECOND"] .seat-bottom,
body.ui-direction-a[data-phase="PREPLAY_DOUBLE"] .seat-bottom {
  bottom: 90px;
}

.ui-direction-a .seat-bottom .hand {
  min-height: 126px;
  padding: 4px 12px 0;
}

.ui-direction-a .card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.36);
}

.ui-direction-a .seat-bottom .card {
  width: clamp(72px, 6vw, 86px);
  margin-left: clamp(-40px, -2.8vw, -30px);
}

.ui-direction-a .card.playable {
  border-color: var(--ui-brass-400);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ui-brass-400) 56%, transparent),
    0 16px 28px rgba(0, 0, 0, 0.42);
}

.ui-direction-a .card.dim {
  opacity: 0.62;
  filter: saturate(0.56) brightness(0.72);
}

.ui-direction-a .seat-bottom .card.selected {
  transform: translateY(-24px) !important;
  border-color: var(--ui-brass-300);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ui-brass-300) 60%, transparent),
    0 22px 36px rgba(0, 0, 0, 0.48);
}

.ui-direction-a .card.play-pending {
  opacity: 0.76;
  cursor: wait;
}

.ui-direction-a .play-slot {
  min-width: 96px;
  min-height: 132px;
}

.ui-direction-a .play-slot .card {
  width: clamp(82px, 6.5vw, 98px);
}

.ui-direction-a .exposed-card-view {
  top: 45%;
  z-index: 18;
}

.ui-direction-a .exposed-card-view .card {
  width: clamp(76px, 5.8vw, 92px);
}

.ui-direction-a .exposed-label {
  padding: 5px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-round);
  background: color-mix(in srgb, var(--ui-bg-deep) 90%, transparent);
  color: var(--ui-text-soft);
  font-size: 11px;
}

.ui-direction-a .bottom-bar {
  bottom: calc(12px + var(--ui-safe-bottom));
  width: min(850px, calc(100% - 36px));
  min-height: 68px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ui-space-3);
  padding: 9px 11px;
  border: 1px solid var(--ui-line-brass);
  border-radius: var(--ui-radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 4%, transparent), transparent),
    color-mix(in srgb, var(--ui-surface-1) 98%, transparent);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-md);
  backdrop-filter: blur(16px);
}

.ui-direction-a .bottom-bar-player {
  grid-column: 1;
  grid-row: 1;
  min-width: 112px;
  justify-self: stretch;
  padding: 6px 10px;
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-bg-deep) 66%, transparent);
}

.ui-direction-a .bottom-bar-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid var(--ui-line-brass);
  background: linear-gradient(160deg, var(--ui-cream-100), var(--ui-brass-400));
}

.ui-direction-a .bottom-bar-name {
  max-width: 90px;
  font-size: 13px;
}

.ui-direction-a .bottom-bar .table-phase-actions {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
}

.ui-direction-a .bottom-bar .table-phase-actions.visible {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
}

.ui-direction-a .bottom-bar .table-phase-action-head {
  display: block;
  min-width: 92px;
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 900;
  white-space: normal;
}

.ui-direction-a .bottom-bar .phase-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: var(--ui-space-2);
}

.ui-direction-a .bottom-bar .phase-action {
  min-width: 0;
  min-height: 46px;
  grid-column: auto;
  grid-row: auto;
  padding: 7px 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 5%, transparent), transparent),
    var(--ui-surface-3);
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 900;
  box-shadow: var(--ui-inset-highlight);
}

.ui-direction-a .bottom-bar .phase-action.primary {
  border-color: var(--ui-line-brass);
  background:
    linear-gradient(180deg, color-mix(in srgb, white 18%, transparent), transparent),
    var(--ui-action);
  color: var(--ui-action-text);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-xs);
}

.ui-direction-a .bottom-bar .phase-action.muted {
  background: color-mix(in srgb, var(--ui-surface-3) 82%, transparent);
  color: var(--ui-text-muted);
}

.ui-direction-a .bottom-bar .phase-action.danger {
  border-color: color-mix(in srgb, var(--ui-date-300) 42%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-danger) 58%, var(--ui-surface-2));
  color: var(--ui-danger-text);
}

.ui-direction-a .toast {
  right: var(--ui-space-4);
  bottom: calc(var(--ui-space-4) + var(--ui-safe-bottom));
  padding: 12px 14px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-2);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-md);
}