.play:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.practice {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 14px;
  background: #111824;
  color: var(--text);
  font: 700 13px "Manrope";
  cursor: pointer;
  margin-top: 10px;
}

.practice:hover { border-color: #526077; }

.queue-shell {
  min-height: 100dvh;
  max-width: 520px;
  margin: auto;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 32px;
}

.queue-shell h1 {
  font: 800 36px "Manrope";
  letter-spacing: -1.7px;
  margin: 10px 0;
}

.queue-shell p {
  color: var(--muted);
  min-height: 24px;
}

.queue-spade {
  font-size: 86px;
  color: var(--accent);
  filter: drop-shadow(0 0 30px #9bff7144);
}

.queue-pulse {
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}

.queue-pulse i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: queuePulse 1.2s infinite;
}

.queue-pulse i:nth-child(2) { animation-delay: .18s; }
.queue-pulse i:nth-child(3) { animation-delay: .36s; }

@keyframes queuePulse {
  0%, 70%, 100% { opacity: .25; transform: scale(.8); }
  35% { opacity: 1; transform: scale(1.25); }
}

.table-shell .players-grid {
  min-height: 270px;
}

.game-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-timer {
  --timer-progress: 360deg;
  width: 43px;
  height: 43px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent2) var(--timer-progress), #263143 0);
  box-shadow: 0 6px 20px #0007;
  transition: background .2s, transform .2s;
}

.turn-timer:before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0a1019;
}

.turn-timer span {
  position: relative;
  display: grid;
  place-items: center;
  line-height: 1;
}

.turn-timer strong { font: 800 14px "Manrope"; }
.turn-timer small { color: var(--muted); font: 800 6px "Manrope"; letter-spacing: .5px; }

.turn-timer.mine {
  background: conic-gradient(var(--accent) var(--timer-progress), #263143 0);
  transform: scale(1.05);
}

.turn-timer.urgent {
  background: conic-gradient(var(--danger) var(--timer-progress), #3a2228 0);
  animation: timerUrgent .7s ease-in-out infinite alternate;
}

@keyframes timerUrgent {
  to { transform: scale(1.1); filter: drop-shadow(0 0 8px #ff6d7575); }
}

.auction-bar {
  margin: 4px 14px 0;
  padding: 10px 12px 11px;
  border: 1px solid #2b3a4d;
  border-radius: 16px;
  background: #090e17c9;
  box-shadow: 0 12px 34px #0004;
  backdrop-filter: blur(14px);
}

.auction-bar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.auction-bar header strong {
  color: #dce5f1;
  font: 800 10px "Manrope";
  letter-spacing: 1px;
  text-transform: uppercase;
}

.auction-bar header span {
  color: var(--muted);
  font-size: 9px;
}

.auction-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.auction-step {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  column-gap: 5px;
  padding: 6px;
  border: 1px solid #242f3e;
  border-radius: 10px;
  background: #111824;
  color: #728096;
  transition: border-color .25s, background .25s, transform .25s;
}

.auction-step i {
  grid-row: span 2;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #263143;
  color: #99a7ba;
  font: 800 8px "Manrope";
  font-style: normal;
}

.auction-step span,
.auction-step b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-step span { font-size: 8px; }
.auction-step b { font: 800 10px "Manrope"; }

.auction-step.said {
  color: #fff;
  border-color: #3c4b5f;
}

.auction-step.said i {
  background: #dfe7f1;
  color: #101620;
}

.auction-step.active {
  color: var(--accent);
  border-color: #79d95b;
  background: #18251d;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px #9bff7118;
}

.bid-dock {
  margin: 8px 14px 0;
  padding: 10px 11px 11px;
  border: 1px solid #78d65b80;
  border-radius: 17px;
  background: #111a17f2;
  box-shadow: 0 12px 34px #0007, 0 0 28px #9bff710d;
  animation: bidDockIn .38s cubic-bezier(.18,.9,.25,1.12) both;
}

.bid-dock-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bid-dock-copy strong { font: 800 13px "Manrope"; }
.bid-dock-copy > span { color: var(--muted); font-size: 9px; }
.bid-dock-copy > span b { color: #fff; font: 800 13px "Manrope"; margin-left: 4px; }

.bid-dock .bids {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.bid-dock .bids button {
  aspect-ratio: auto;
  min-width: 0;
  height: 37px;
  padding: 0;
  border: 1px solid #364738;
  border-radius: 10px;
  background: #19231d;
  color: #fff;
  font: 800 13px "Manrope";
  cursor: pointer;
}

.bid-dock .bids button:hover,
.bid-dock .bids button:active {
  border-color: var(--accent);
  background: #2a3d2d;
  transform: translateY(-1px);
}

.bid-dock .bids .nil {
  grid-column: span 2;
  height: 37px;
  color: #ff9ca5;
}

.table-shell.bidding .players-grid {
  min-height: 170px;
}

@keyframes bidDockIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.player > span strong,
.player > span small {
  display: block;
  text-align: center;
  white-space: nowrap;
}

.player > span strong { color: #d5deeb; font-size: 10px; }
.player > span small { color: var(--accent2); font-size: 9px; margin-top: 2px; }

.self-stats {
  display: grid;
  grid-template-columns: 38px minmax(80px, 1fr) repeat(3, minmax(42px, auto));
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 8px;
  padding: 8px 10px;
  border: 1px solid #354154;
  border-radius: 15px;
  background: #0b111bd9;
  box-shadow: 0 10px 28px #0005;
  transition: border-color .25s, box-shadow .25s;
}

.self-stats.active {
  border-color: #74d957;
  box-shadow: 0 0 0 3px #9bff7112, 0 10px 28px #0005;
}

.self-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #637188;
  border-radius: 12px;
  background: linear-gradient(145deg,#2b374c,#141b27);
  font: 800 11px "Manrope";
}

.self-stats small {
  display: block;
  color: var(--muted);
  font: 700 7px "Manrope";
  letter-spacing: .7px;
  white-space: nowrap;
}

.self-stats strong { font: 800 12px "Manrope"; }
.self-stats > span { text-align: center; }
.self-stats > span b { display: block; color: #fff; font: 800 16px "Manrope"; }
.self-stats > span:nth-last-child(3) b { color: var(--accent); }

.played {
  overflow: visible;
  animation: none;
}

.played.newest {
  animation-duration: .48s;
  animation-timing-function: cubic-bezier(.18,.9,.25,1.22);
  animation-fill-mode: both;
}

.played b { font: 800 14px "Manrope"; }

.played > i {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #101722;
  color: #fff;
  border: 1px solid #5c6a7e;
  font: 800 8px "Manrope";
  font-style: normal;
}

.played > small {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  min-width: 62px;
  padding: 3px 5px;
  border-radius: 7px;
  background: #080d15e8;
  color: #e8edf5;
  font: 700 8px "Manrope";
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 12px #0008;
}

.played.newest.s0 { animation-name: cardFromBottom; }
.played.newest.s1 { animation-name: cardFromLeft; }
.played.newest.s2 { animation-name: cardFromTop; }
.played.newest.s3 { animation-name: cardFromRight; }

@keyframes cardFromBottom {
  from { opacity: 0; transform: translateY(120px) rotate(-6deg) scale(.72); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes cardFromLeft {
  from { opacity: 0; transform: translateX(-110px) rotate(-22deg) scale(.72); }
  to { opacity: 1; transform: translateX(0) rotate(7deg) scale(1); }
}

@keyframes cardFromTop {
  from { opacity: 0; transform: translateY(-110px) rotate(10deg) scale(.72); }
  to { opacity: 1; transform: translateY(0) rotate(2deg) scale(1); }
}

@keyframes cardFromRight {
  from { opacity: 0; transform: translateX(110px) rotate(20deg) scale(.72); }
  to { opacity: 1; transform: translateX(0) rotate(-7deg) scale(1); }
}

.bid-overlay {
  top: 70px;
  bottom: 184px;
  padding: 8px 14px;
  place-items: center;
  background: linear-gradient(180deg, #070a11f2 0%, #070a11d8 78%, transparent 100%);
  backdrop-filter: none;
  pointer-events: none;
}

.bid-sheet {
  max-height: 100%;
  overflow-y: auto;
  pointer-events: auto;
  border-radius: 24px;
  padding: 18px 18px 16px;
  box-shadow: 0 24px 70px #000d;
  animation: bidSheetIn .44s cubic-bezier(.18,.9,.25,1.12) both;
}

.bid-sheet h2 { font-size: 25px; }
.bid-sheet .bids { margin: 12px 0; }
.bid-sheet .bids .nil { height: 42px; }

@keyframes bidSheetIn {
  from { opacity: 0; transform: translateY(-22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.trick-winner {
  position: absolute;
  z-index: 25;
  top: 47%;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  transform: translate(-50%, -50%);
  padding: 18px 14px 16px;
  overflow: hidden;
  border: 1px solid #a9ff8a80;
  border-radius: 24px;
  background: #0a111beF;
  box-shadow: 0 22px 80px #000d, 0 0 50px #9bff7125;
  text-align: center;
  pointer-events: none;
  animation: winnerIn 1.9s cubic-bezier(.18,.9,.22,1) both;
}

.winner-glow {
  position: absolute;
  inset: -100px;
  background: radial-gradient(circle, #9bff7135, transparent 55%);
  animation: winnerGlow 1.4s ease-out both;
}

.trick-winner > *:not(.winner-glow) { position: relative; }
.trick-winner h2 { margin: 3px 0 15px; font: 800 23px "Manrope"; letter-spacing: -.8px; }

.winner-cards {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.mini-card {
  width: 66px;
  min-width: 0;
  padding: 8px 5px 6px;
  border-radius: 10px;
  background: #f8f6f1;
  color: #151923;
  box-shadow: 0 8px 22px #0008;
  animation: miniCardIn .5s calc(var(--i) * .08s) cubic-bezier(.18,.9,.25,1.18) both;
}

.mini-card.red { color: #dd3d4d; }
.mini-card i { display: block; color: #687487; font: 700 8px "Manrope"; font-style: normal; }
.mini-card b { display: block; margin: 3px 0; font: 800 17px "Manrope"; }
.mini-card small { display: block; overflow: hidden; color: #566174; font: 700 8px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }

@keyframes winnerIn {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(.88); }
  15%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(.96); }
}

@keyframes winnerGlow {
  from { opacity: 0; transform: scale(.55); }
  45% { opacity: 1; }
  to { opacity: 0; transform: scale(1.25); }
}

@keyframes miniCardIn {
  from { opacity: 0; transform: translateY(24px) rotate(-5deg) scale(.8); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-height: 740px) {
  .table-shell .players-grid { min-height: 220px; }
  .table-shell.bidding .players-grid { min-height: 120px; }
  .auction-bar { padding-top: 7px; padding-bottom: 8px; }
  .auction-bar header { margin-bottom: 5px; }
  .bid-dock { margin-top: 5px; padding-top: 7px; padding-bottom: 8px; }
  .bid-dock-copy { margin-bottom: 5px; }
  .bid-dock .bids button,
  .bid-dock .bids .nil { height: 32px; }
  .hand { height: 135px; }
  .bid-overlay { top: 58px; bottom: 170px; }
  .bid-sheet { padding-top: 13px; }
  .bid-sheet .contract-preview { padding: 9px; }
}

@media (max-width: 390px) {
  .auction-step { grid-template-columns: 14px 1fr; padding: 5px 3px; column-gap: 3px; }
  .auction-step i { width: 14px; height: 14px; }
  .self-stats { grid-template-columns: 34px minmax(66px, 1fr) repeat(3, minmax(37px, auto)); gap: 4px; padding-inline: 6px; }
  .self-stats strong { font-size: 10px; }
  .self-stats small { font-size: 6px; letter-spacing: .4px; }
  .mini-card { width: 58px; }
  .bid-dock .bids { gap: 4px; }
  .bid-dock .bids button { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .played,
  .bid-sheet,
  .bid-dock,
  .trick-winner,
  .winner-glow,
  .mini-card { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}