:root {
  --blackjack-felt: #17463b;
  --blackjack-felt-dark: #102c29;
  --blackjack-gold: #fbbf24;
  --blackjack-green: #34d399;
  --blackjack-red: #f87171;
  --blackjack-gold-highlight-shadow: rgba(251, 191, 36, 0.2);
  --blackjack-surface: rgba(15, 23, 42, 0.72);
  --blackjack-surface-soft: rgba(15, 23, 42, 0.48);
  --blackjack-border: rgba(251, 191, 36, 0.24);
  --blackjack-muted: #cbd5e1;
  --blackjack-subtle: #94a3b8;
  --blackjack-card-panel: #161d26;
  --blackjack-card-border: #2b3948;
  --blackjack-card-hidden-background: #344659;
  --blackjack-card-hidden-color: #a8b4c0;
  --blackjack-card-black-suit-color: #f5f7ff;
  --blackjack-card-red-suit-color: #ff8a8a;
  --blackjack-card-rank-font-family: var(--font-family);
  --blackjack-card-suit-font-family: Georgia, 'Times New Roman', serif;
  --base-game-next-round-agreement-border: var(--blackjack-border);
  --base-game-next-round-agreement-muted: var(--blackjack-muted);
}

.blackjack-create-panel {
  align-content: start;
}

.blackjack-create-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.blackjack-create-intro p {
  margin: 0;
}

.blackjack-create-intro .base-game-button {
  flex: 0 0 auto;
}

.blackjack-standard-room-form > #create-room-button {
  width: 100%;
  margin-top: 20px;
}

.blackjack-standard-room-form > #create-room-button + .blackjack-field-help {
  margin-top: 10px;
}

.blackjack-strategy-option {
  display: grid;
  gap: 7px;
  margin: 20px 0 8px;
  color: var(--blackjack-muted);
  font-weight: 700;
}

.blackjack-strategy-option select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
}

.blackjack-field-help {
  min-height: 2.7em;
  margin: 0 0 16px;
  color: var(--blackjack-subtle);
  font-size: 0.9rem;
}

.blackjack-field-help.error {
  color: #fca5a5;
}

.blackjack-sandbox-dialog {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
}

.blackjack-sandbox-dialog form {
  margin: 0;
}

body.base-game-game-active:not(.base-game-room-sidebar-collapsed) .blackjack-room-main {
  padding-inline-end: 18px;
}

.blackjack-round-boundary-form {
  display: grid;
  width: min(100%, 680px);
  gap: 7px;
  margin: 0;
}

.blackjack-round-boundary-form[hidden] {
  display: none;
}

.blackjack-round-boundary-form > label {
  color: var(--blackjack-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.blackjack-round-boundary-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.blackjack-round-boundary-fields input {
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 8px;
  color: #f8fafc;
  background: #0f172a;
}

.blackjack-round-boundary-fields input:focus {
  border-color: var(--blackjack-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}

.blackjack-round-boundary-help {
  margin: 0;
  color: var(--blackjack-subtle);
  font-size: 0.82rem;
}

.blackjack-next-round-controls {
  display: grid;
  width: min(100%, 680px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.blackjack-next-round-controls[hidden] {
  display: none;
}

.blackjack-next-round-controls > .blackjack-round-boundary-form {
  width: 100%;
}