@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Scale with viewport - supports 5120x2880 (5K) and smaller */
html {
  font-size: clamp(0.75rem, 2vmin + 0.625rem, 2.25rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Press Start 2P', monospace;
  background: #0a0a0a;
  min-height: 100vh;
  height: 100vh;
  color: #ddd;
  overflow: hidden;
  image-rendering: pixelated;
}

.hidden { display: none !important; }

/* ── Join screen ── */
#join-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f1419 100%);
}

.join-card {
  background: #161b22;
  border: 0.0625rem solid #30363d;
  border-radius: 0.75rem;
  padding: 2.5rem;
  max-width: 20rem;
  width: 100%;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4), 0 0 0 0.0625rem rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.join-card h1 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  color: #c9b896;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 0 0.5rem;
}

.join-card .tagline {
  color: #8b949e;
  font-size: 0.5rem;
  margin-bottom: 2rem;
  letter-spacing: 0.0625rem;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 0 0.5rem;
  line-height: 1.6;
}

.join-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.join-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.join-form .form-group label {
  font-size: 0.5rem;
  color: #8b949e;
  letter-spacing: 0.0625rem;
}

.join-form .form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.6rem;
  font-family: 'Press Start 2P', monospace;
  color: #e6edf3;
  background: #0d1117;
  border: 0.0625rem solid #30363d;
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.join-form .form-control::placeholder {
  color: #484f58;
}

.join-form .form-control:hover {
  border-color: #484f58;
}

.join-form .form-control:focus {
  outline: none;
  border-color: #40916c;
  box-shadow: 0 0 0 0.1875rem rgba(64, 145, 108, 0.25);
}

.join-form .btn-join {
  margin-top: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.6rem;
  font-family: 'Press Start 2P', monospace;
  font-weight: 600;
  color: #fff;
  background: #238636;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  transition: background 0.2s, transform 0.1s;
}

.join-form .btn-join:hover {
  background: #2ea043;
}

.join-form .btn-join:active {
  transform: scale(0.98);
}

.join-card .hint {
  margin-top: 1.25rem;
  font-size: 0.45rem;
  color: #6e7681;
  line-height: 1.6;
  text-align: center;
}

/* ── Game screen ── */
#game-screen {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.winner-notification {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.2);
  border: 0.15rem solid #ffd700;
  border-radius: 0.3rem;
  margin: 0.5rem 0;
}

.winner-notification.hidden {
  display: none !important;
}

.btn-restart {
  padding: 0.4rem 1rem;
  background: #1b4332;
  border: 0.2rem solid #40916c;
  color: #ddd;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.waiting-msg {
  font-size: 0.5rem;
  color: #8b949e;
  padding: 0 0.5rem;
}

.btn-add-bot {
  padding: 0.4rem 1rem;
  background: #1a3a5a;
  border: 0.2rem solid #3498db;
  color: #ddd;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.btn-add-bot:hover { background: #2a4a6a; }

.btn-restart:hover { background: #2d6a4f; }
.btn-restart:disabled {
  background: #1a1a1a;
  border-color: #333;
  color: #444;
  cursor: not-allowed;
}

.btn-rebuy {
  background: #2d5016;
  border: 0.25rem solid #6bcb2d;
  color: #fff;
  font-size: 0.65rem;
  padding: 0.75rem 1.25rem;
  box-shadow: 0 0 1rem rgba(107, 203, 45, 0.4);
  animation: rebuy-pulse 1.5s ease-in-out infinite;
}

.btn-rebuy:hover { background: #3d6b1f; box-shadow: 0 0 1.25rem rgba(107, 203, 45, 0.6); }

@keyframes rebuy-pulse {
  0%, 100% { box-shadow: 0 0 1rem rgba(107, 203, 45, 0.4); }
  50% { box-shadow: 0 0 1.5rem rgba(107, 203, 45, 0.7); }
}

.game-scale-wrapper {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  overflow: auto;
}

/* Room bar */
.room-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: #111;
  border-bottom: 0.2rem solid #1a1a1a;
  flex-shrink: 0;
}

.room-bar #room-label {
  font-size: 0.6rem;
  color: #666;
  letter-spacing: 0.0625rem;
}

.btn-start {
  padding: 0.5rem 1.25rem;
  background: #1b4332;
  border: 0.1875rem solid #40916c;
  color: #ddd;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.btn-start:hover { background: #2d6a4f; }
.btn-start:disabled {
  background: #1a1a1a;
  border-color: #333;
  color: #444;
  cursor: not-allowed;
}

.btn-radio {
  padding: 0.375rem 0.75rem;
  background: #1a1a1a;
  border: 0.1875rem solid #333;
  color: #c9b896;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.btn-radio:hover {
  border-color: #c9b896;
  background: #222;
}

.chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-width: 0;
}

.chat-input {
  width: 8rem;
  max-width: 12rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.45rem;
  font-family: 'Press Start 2P', monospace;
  color: #ddd;
  background: #0a0a0a;
  border: 0.125rem solid #333;
  border-radius: 0.25rem;
}

.chat-input::placeholder {
  color: #555;
}

.chat-input:focus {
  outline: none;
  border-color: #555;
}

.chat-send {
  padding: 0.3rem 0.5rem;
  background: #1a1a1a;
  border: 0.125rem solid #333;
  color: #c9b896;
  font-size: 0.6rem;
  cursor: pointer;
  line-height: 1;
}

.chat-send:hover {
  border-color: #c9b896;
  background: #222;
}

.seat-chat-bubble {
  padding: 0.35rem 0.6rem;
  font-size: 0.45rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border: 0.125rem solid #555;
  border-radius: 0.25rem;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 10;
  animation: chatFadeIn 0.2s ease-out;
  flex-shrink: 0;
}

@keyframes chatFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Radio overlay */
.radio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  padding: 1.25rem;
}

.radio-overlay.hidden {
  display: none !important;
}

.radio-panel {
  background: #111;
  border: 0.1875rem solid #8b6914;
  padding: 1.5rem;
  max-width: 20rem;
  width: 100%;
  box-shadow: 0 0 0 0.375rem #000;
}

.radio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.radio-header h2 {
  font-size: 0.7rem;
  color: #c9b896;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.radio-close {
  background: none;
  border: 0.125rem solid #333;
  color: #ddd;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.625rem;
  line-height: 1;
}

.radio-close:hover {
  border-color: #c9b896;
  color: #c9b896;
}

.radio-search-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.radio-search-wrap input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 0.1875rem solid #333;
  background: #0a0a0a;
  color: #c9b896;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
}

.radio-search-wrap input:focus {
  outline: none;
  border-color: #c9b896;
}

.radio-search-wrap button {
  padding: 0.625rem 0.875rem;
  background: #1b4332;
  border: 0.1875rem solid #40916c;
  color: #ddd;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.radio-search-wrap button:hover {
  background: #2d6a4f;
}

.sound-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.radio-volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.radio-volume-wrap label {
  font-size: 0.5rem;
  color: #666;
}

.radio-volume-wrap input[type="range"] {
  flex: 1;
  max-width: 7.5rem;
}

.radio-volume-wrap span {
  font-size: 0.5rem;
  color: #c9b896;
  min-width: 2.25rem;
}

.radio-results {
  max-height: 15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.radio-results .radio-empty {
  text-align: center;
  color: #555;
  font-size: 0.5rem;
  padding: 1rem 0;
}

.radio-station {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 0.125rem solid #333;
  background: #0a0a0a;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.radio-station:hover {
  border-color: #c9b896;
  background: #111;
}

.radio-station-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}

.radio-station-info {
  flex: 1;
  min-width: 0;
}

.radio-station-name {
  font-size: 0.5rem;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-station-meta {
  font-size: 0.45rem;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Now playing radio */
.now-playing-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  margin: 0.25rem;
  background: #111;
  border: 0.15rem solid #333;
  max-width: 22rem;
  flex-shrink: 0;
}

.now-playing-radio.hidden {
  display: none !important;
}

.now-playing-label {
  font-size: 0.55rem;
  color: #c9b896;
}

.now-playing-stop {
  padding: 0.375rem 0.75rem;
  background: #2a0e0e;
  border: 0.125rem solid #5a1a1a;
  color: #e74c3c;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  cursor: pointer;
}

.now-playing-stop:hover {
  border-color: #e74c3c;
  background: #3a0e0e;
}

/* ── Table ── */
.table-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem;
  overflow: auto;
}

.poker-table {
  background: #14532d;
  border: 0.4rem solid #8b6914;
  box-shadow: inset 0 0 2.5rem rgba(0,0,0,0.5), 0 0 0 0.2rem #000;
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  overflow: visible;
}

/* Phase label */
.phase-label {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  color: #6a6a4a;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  z-index: 2;
  margin: 0.25rem 0;
}

.hand-rank-label {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  color: #c9b896;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  z-index: 2;
  margin: 0.25rem 0;
}

/* Community area: pot + board + winning hand - centered on table */
.community-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem;
}

.table-pot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  background: rgba(0,0,0,0.7);
  border: 0.15rem solid #8b6914;
}

.table-pot-label {
  font-size: 0.65rem;
  color: #6a6a4a;
  text-transform: uppercase;
}

.table-pot-amount {
  font-size: 0.8rem;
  color: #ffd700;
}

.table-pot-chips {
  display: flex;
  gap: 0.15rem;
  align-items: flex-end;
}

.table-pot-chips .chip-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.table-pot-chips .chip-icon.chip-stack {
  width: 1.4rem;
  height: 1.9rem;
}

.board-cards {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem;
}

.board-cards .card {
  width: 5rem;
  height: 7rem;
  background-size: 5rem 7rem;
}

.winning-hand-row .winning-hand-cards .card {
  width: 4rem;
  height: 5.6rem;
  background-size: 4rem 5.6rem;
}

.winning-hand-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem;
}

.winning-hand-row .winning-hand-label {
  font-size: 0.5rem;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.winning-hand-row .winning-hand-cards {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.winning-hand-row .winning-card {
  border: 0.15rem solid transparent;
}

.winning-hand-row .winning-card.from-hole {
  box-shadow: 0 0 1rem rgba(255, 215, 0, 0.9);
  border: 0.2rem solid #ffd700;
  outline: 0.15rem solid rgba(255, 215, 0, 0.5);
}

/* ── Cards ── */
.card {
  width: 6.9rem;
  height: 9.6rem;
  background-size: 6.9rem 9.6rem;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0.15rem 0.4rem rgba(0,0,0,0.7);
  image-rendering: pixelated;
}

.card.back {
  background-image: url('/cards/backs/blue.png');
}

.card.folded {
  opacity: 0.3;
  filter: grayscale(0.8);
}

.card.dealing {
  animation: dealIn 0.35s ease-out both;
}

@keyframes dealIn {
  from {
    transform: translateY(-5rem) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ── Players ── */
.players-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: visible;
}

.player-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  pointer-events: auto;
  max-width: 14rem;
  margin: 0.5rem;
  overflow: visible;
}

.seat-chip-stack {
  display: flex;
  gap: 0.15rem;
  align-items: flex-end;
  justify-content: center;
  margin: 0.25rem 0;
}

.seat-chip-stack .chip-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.seat-chip-stack .chip-icon.chip-stack {
  width: 1.5rem;
  height: 2rem;
}

.player-seat .player-cards {
  display: flex;
  gap: 0.25rem;
  margin: 0.25rem 0;
}

.player-seat .player-cards .card {
  width: 5rem;
  height: 7rem;
  background-size: 5rem 7rem;
}

.seat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  max-width: 100%;
  overflow: visible;
  margin: 0.25rem 0;
}

.seat-info .seat-name {
  font-size: 0.75rem;
  color: #ddd;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-info .seat-chips {
  font-size: 0.75rem;
  color: #c9b896;
}

.seat-info .seat-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.55rem;
  color: #9a8b6e;
  margin-top: 0.15rem;
}

.seat-info .seat-streak-current {
  color: inherit;
}

.seat-info .seat-streak-best {
  color: #9a8b6e;
}

.seat-info .seat-streak-current-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.seat-info .seat-streak-current-wrap.seat-streak-current-fire {
  position: relative;
  padding: 0.15rem 0.3rem;
}

.seat-info .seat-streak-current-wrap .seat-streak-fire {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  transform: translate(-50%, -50%);
  background: url('/feuer-fire.gif') center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.seat-info .seat-streak-current-wrap .seat-streak-current {
  position: relative;
  z-index: 1;
  color: inherit;
}

.seat-info .seat-streak-current-wrap.seat-streak-current-fire .seat-streak-current {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 0.15rem #000, 0 0 0.3rem #000;
}

.seat-info .seat-folded {
  font-size: 0.6rem;
  color: #666;
  font-style: italic;
}

.player-seat.is-turn .seat-info .seat-name {
  color: #ffd700;
}

/* ── Chip icons ── */
.chip-icon {
  width: 1.75rem;
  height: 1.75rem;
  image-rendering: pixelated;
  vertical-align: middle;
  flex-shrink: 0;
}

.chip-icon.chip-stack {
  width: 1.75rem;
  height: 2.25rem;
}

.chip-icons {
  display: inline-flex;
  gap: 0.15rem;
  align-items: flex-end;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.chips-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.bet-row-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.pot-chips {
  display: inline-flex;
  gap: 0.15rem;
  align-items: flex-end;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.pot-chips .chip-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.pot-chips .chip-icon.chip-stack {
  width: 1.25rem;
  height: 1.75rem;
}

.seat-bet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0.5rem 0;
}

.seat-bet-amount {
  font-size: 0.75rem;
  color: #ffd700;
}

.seat-bet-chips {
  display: flex;
  gap: 0.1rem;
  align-items: flex-end;
  justify-content: center;
}

.seat-bet-chips .chip-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.seat-bet-chips .chip-icon.chip-stack {
  width: 1.4rem;
  height: 1.9rem;
}

/* ── Controls ── */
.controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  background: #111;
  border: 0.2rem solid #1a1a1a;
  flex-shrink: 0;
  min-width: 0;
}

.turn-timer {
  font-size: 0.65rem;
  color: #ffd700;
  min-width: 3.75rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border: 0.15rem solid #8b6914;
  background: #1a1a0a;
}

.turn-timer.hidden {
  display: none !important;
}

.pot-in-controls {
  font-size: 0.85rem;
  color: #c9b896;
  min-width: 6.25rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.btn {
  padding: 0.6rem 1rem;
  border: 0.2rem solid #333;
  background: #1a1a1a;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  transition: background 0.1s, border-color 0.1s;
}

.btn:hover:not(:disabled) {
  background: #222;
  border-color: #555;
}

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-fold { color: #e74c3c; border-color: #5a1a1a; }
.btn-fold:hover:not(:disabled) { background: #2a0e0e; border-color: #e74c3c; }

.btn-check { color: #3498db; border-color: #1a3a5a; }
.btn-check:hover:not(:disabled) { background: #0e1a2a; border-color: #3498db; }

.btn-call { color: #2ecc71; border-color: #1a4a2a; }
.btn-call:hover:not(:disabled) { background: #0e2a1a; border-color: #2ecc71; }

.btn-bet { color: #c9b896; border-color: #4a3a1a; }
.btn-bet:hover:not(:disabled) { background: #2a1e0e; border-color: #c9b896; }

.btn-allin { color: #ff6b6b; border-color: #6b1a1a; }
.btn-allin:hover:not(:disabled) { background: #3a0e0e; border-color: #ff6b6b; }

.bet-row {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.btn-pot {
  padding: 0.4rem 0.5rem;
  font-size: 0.5rem;
  min-width: 2rem;
}

.btn-pot:hover:not(:disabled) {
  background: #2a1e0e;
  border-color: #c9b896;
}

.bet-row input {
  width: 5rem;
  min-width: 0;
  padding: 0.625rem 0.5rem;
  border: 0.1875rem solid #333;
  background: #0a0a0a;
  color: #c9b896;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  text-align: center;
}

.bet-row input:focus {
  outline: none;
  border-color: #c9b896;
}

/* ── Toast ── */
.message-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  border: 0.1875rem solid #333;
  color: #ddd;
  padding: 0.75rem 1.5rem;
  font-size: 0.55rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 500;
}

.message-toast.show { opacity: 1; }

/* ── Showdown ── */
.showdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  overflow-y: auto;
}

.showdown-modal {
  background: #111;
  border: 0.1875rem solid #8b6914;
  padding: 2rem;
  max-width: 45rem;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 0 0 0.375rem #000;
}

.showdown-winner-banner {
  font-size: 0.85rem;
  color: #ffd700;
  text-align: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 215, 0, 0.12);
  border: 0.125rem solid #ffd700;
  letter-spacing: 0.125rem;
}

.showdown-modal h2 {
  color: #c9b896;
  font-size: 0.7rem;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.8;
}

.showdown-section-label {
  font-size: 0.5rem;
  color: #6a6a4a;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.showdown-board-section {
  margin-bottom: 1rem;
}

.showdown-board-cards {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.showdown-winning-section {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 215, 0, 0.08);
  border: 0.125rem solid #ffd700;
}

.showdown-winning-label {
  font-size: 0.55rem;
  color: #ffd700;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.125rem;
}

.showdown-winning-cards {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}

.showdown-winning-card {
  width: 6rem;
  height: 8.3125rem;
  background-size: 6rem 8.3125rem;
  image-rendering: pixelated;
}

.showdown-winning-card.from-hole {
  box-shadow: 0 0 0.875rem rgba(255, 215, 0, 0.9);
  border: 0.1875rem solid #ffd700;
  outline: 0.125rem solid rgba(255, 215, 0, 0.5);
}

.showdown-hands-section {
  margin-bottom: 1.5rem;
}

.showdown-card {
  width: 5.5rem;
  height: 7.6875rem;
  background-size: 5.5rem 7.6875rem;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.6);
  image-rendering: pixelated;
}

.showdown-hands {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.showdown-hand-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem;
  border: 0.125rem solid #222;
  background: rgba(255,255,255,0.02);
}

.showdown-hand-row.winner {
  border: 0.1875rem solid #ffd700;
  background: rgba(255,215,0,0.08);
}

.showdown-hand-row.folded {
  opacity: 0.7;
  border-color: #333;
}

.showdown-hand-row.folded .showdown-player-name {
  color: #666;
}

.showdown-player-name {
  min-width: 7.5rem;
  font-size: 0.55rem;
  color: #ddd;
}

.showdown-hand-row.winner .showdown-player-name {
  color: #ffd700;
}

.showdown-hand-cards {
  display: flex;
  gap: 0.375rem;
}

.btn-dismiss {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #1b4332;
  border: 0.1875rem solid #40916c;
  color: #ddd;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.btn-dismiss:hover { background: #2d6a4f; }

/* ── Game type selector ── */
.game-type-selector {
  display: flex;
  gap: 0.25rem;
  width: 100%;
}

.game-type-btn {
  flex: 1;
  padding: 0.6rem 0.5rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.4rem;
  color: #8b949e;
  background: #0d1117;
  border: 0.125rem solid #30363d;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.game-type-btn:hover {
  border-color: #484f58;
  color: #c9d1d9;
}

.game-type-btn.active {
  background: #1b4332;
  border-color: #40916c;
  color: #fff;
  box-shadow: 0 0 0.5rem rgba(64, 145, 108, 0.3);
}

/* ── Blackjack screen ── */
#bj-screen {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 1;
}

.bj-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 1.5rem;
}

.bj-status-label {
  font-size: 0.7rem;
  color: #c9b896;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  text-align: center;
  padding: 0.5rem;
  min-height: 1.5rem;
}

.bj-dealer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.bj-dealer-label {
  font-size: 0.55rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.bj-dealer-cards {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  min-height: 5rem;
}

.bj-dealer-total {
  font-size: 0.65rem;
  color: #e6edf3;
  text-align: center;
  min-height: 1rem;
}

.bj-players-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 40rem;
  padding: 0.5rem;
}

.bj-player-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.bj-chat-bubble {
  padding: 0.35rem 0.6rem;
  font-size: 0.45rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border: 0.125rem solid #555;
  border-radius: 0.25rem;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 10;
  animation: chatFadeIn 0.2s ease-out;
}

.bj-player-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(13, 17, 23, 0.6);
  border: 0.125rem solid #30363d;
  border-radius: 0.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}

.bj-player-row.bj-active-turn {
  border-color: #f0ad4e;
  box-shadow: 0 0 0.75rem rgba(240, 173, 78, 0.35);
}

.bj-player-row.bj-is-me {
  background: rgba(27, 67, 50, 0.3);
}

.bj-player-name {
  font-size: 0.5rem;
  color: #c9b896;
  min-width: 5rem;
  text-transform: uppercase;
}

.bj-player-cards {
  display: flex;
  gap: 0.25rem;
  min-height: 4rem;
}

.bj-player-cards .card {
  width: 3rem;
  height: 4.2rem;
  background-size: 3rem 4.2rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
}

.bj-dealer-cards .card {
  width: 3.5rem;
  height: 4.9rem;
  background-size: 3.5rem 4.9rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
}

.bj-player-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  font-size: 0.45rem;
}

.bj-player-total {
  color: #e6edf3;
  font-weight: bold;
}

.bj-player-bet {
  color: #f0ad4e;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bj-player-chips {
  color: #40916c;
}

.bj-player-status {
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.bj-status-busted { background: #6b2020; color: #ff6b6b; }
.bj-status-blackjack { background: #3d2e0a; color: #f0ad4e; }
.bj-status-stood { background: #1a3a4a; color: #74c0fc; }
.bj-status-won { background: #1b4332; color: #52b788; }
.bj-status-lost { background: #3d1010; color: #e06666; }
.bj-status-push { background: #2d2d2d; color: #aaa; }

#bj-bet-controls .bet-row {
  justify-content: center;
}

#bj-controls {
  justify-content: center;
  gap: 0.75rem;
}