/* ==========================================================================
   Russian Hand - table settings (src/ui/ChoiceGroup.js)

   The pill buttons of the Create Private Room dialog and of the in-room Game Settings, and the Game Settings sheet.
   One radio group of pills per setting: the chosen pill glows orange, every other pill is a dark chip.

   Written to stand on its own:
   - ChoiceGroup.js links this file itself when the page does not, so the pills never depend on another stylesheet being
     present or up to date (a cached older ui-extra.css used to leave them as raw browser buttons).
   - Every pill rule sits under .choice-group (specificity 0,2,0 and up), so a generic button rule of the page, such as
     `.menu-overlay button` (0,1,1) in the main menu, cannot override it.
   - Everything that matters is set explicitly (appearance, background, border, padding, font, colour) instead of
     being left to the browser or inherited from the dialog around it.
   Logical properties only, so the rows mirror themselves under dir="rtl".
   ========================================================================== */

.choice-group {
  --choice-gold: var(--gold-accent, #f59e0b);
  --choice-gold-soft: #fbbf24;
  --choice-ink: #1f1300;
  --choice-text: var(--text-main, #f8fafc);
  --choice-line: var(--panel-border, rgba(245, 158, 11, 0.28));
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.choice-group .choice-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--choice-gold-soft);
}

/* Equal tiles: as many per row as fit (at least 64px each), and a short row (2-4 pills) shares the whole width. */
.choice-group .choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  min-width: 0;
}

/* One pill: a dark, rounded chip with room to breathe and readable text. */
.choice-group .choice {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  border: 1px solid var(--choice-line);
  border-radius: 14px;
  background-color: #13281e;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  color: var(--choice-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* The chosen pill: prominent, orange, glowing. */
.choice-group .choice.is-selected {
  border-color: transparent;
  background-color: #f59e0b;
  background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
  color: var(--choice-ink);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 4px 14px rgba(245, 158, 11, 0.45);
}

.choice-group .choice:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* A locked group (not the host, or a round is running) still shows what is set. */
.choice-group .choice.is-selected:disabled {
  opacity: 0.72;
}

.choice-group .choice:active:not(:disabled) {
  transform: scale(0.96);
}

.choice-group .choice:focus-visible {
  outline: 2px solid var(--choice-gold);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .choice-group .choice:hover:not(:disabled):not(.is-selected) {
    background-color: #1c3a2b;
  }
}

/* Small print under a group (balance, how a bet works). */
.choice-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}

/* The hidden attribute has to win over the display rules of this file whatever other stylesheet is (or is not) loaded:
   the custom opening-points field, the bet note and the Save button are shown and hidden with it. */
.choice-group[hidden],
.choice-note[hidden],
.settings-sheet [hidden] {
  display: none !important;
}

/* ---- In-room Game Settings: the same dark sheet and gold accents as the Create Private Room dialog ---- */
.modal-content.settings-sheet {
  position: relative;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(14, 36, 25, 0.97), rgba(6, 18, 12, 0.97));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.modal-content.settings-sheet::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-accent, #f59e0b), transparent);
  opacity: 0.7;
}

.settings-sheet .modal-header {
  padding: 16px 18px 6px;
  border-bottom: none;
}

.settings-sheet .modal-header h2 {
  font-size: 1.2rem;
  color: #fbbf24;
}

.settings-sheet .modal-body {
  padding: 8px 18px 18px;
}

.settings-sheet .settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-sheet .settings-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-sheet .settings-custom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 16px or more: iOS Safari zooms the page on focus into anything smaller, and the zoom sticks. */
.settings-sheet .settings-number {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--panel-border, rgba(245, 158, 11, 0.28));
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.settings-sheet .settings-number:focus {
  outline: none;
  border-color: var(--gold-accent, #f59e0b);
}

.settings-sheet .settings-number:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-sheet .settings-note {
  margin: 0;
}

.settings-sheet .btn-action.settings-submit {
  width: 100%;
  min-height: 48px;
  margin: 0;
  justify-content: center;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  color: #1f1300;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}