/* The Royal Game of Ur. Copyright (C) 2026 MrSuttonmann. GNU AGPL-3.0 or later; see LICENSE. */

/* Buttons, dropdowns and the setup strip (mode, opponent, variant and Start game). */

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--hand); overflow: hidden; background: var(--bone); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 5px 13px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.seg input:checked + label { background: var(--woad); color: var(--bone); }
.seg input:focus-visible + label { outline: 2px dashed var(--vermilion); outline-offset: -4px; }
select, .btn {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--bone); border: 1.5px solid var(--ink); border-radius: var(--hand); padding: 5px 13px; cursor: pointer;
}
.btn:hover, select:hover { background: var(--paper-deep); }
.btn:focus-visible, select:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 3px; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 10px 8px 12px; background: rgba(246,236,210,.7); border: 1.5px solid var(--ink-soft); border-radius: var(--hand);
}
.tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tb-group.tools { gap: 2px; }
.field { display: inline-flex; align-items: center; gap: 8px; }
/* setup strip: mode and Start game share the first row; opponent and variant fill the second */
.toolbar .seg { order: 1; }
#newgame { order: 2; margin-left: auto; }
.tb-break { order: 3; flex-basis: 100%; height: 0; }
#level-field { order: 4; }
#variant-field { order: 5; }
.toolbar .field { flex: 1 1 220px; }
.toolbar .field select { flex: 1; min-width: 0; }

/* the Variant button in the setup strip: the current variant, and an invitation to choose */
.variant-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.variant-btn .chooser { font-family: var(--f-note); font-style: italic; font-weight: 400; color: var(--vermilion); white-space: nowrap; }
.variant-btn:disabled { opacity: .55; cursor: not-allowed; }
.variant-btn:disabled .chooser { visibility: hidden; }

.field > span { font-family: var(--f-note); font-style: italic; font-size: 15px; color: var(--ink-soft); }
/* the green call to start a game; between games only */
.btn.start { color: #fffaf0; background: var(--green); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.btn.start:hover { background: #3e6a2e; }
.seg input:disabled + label { opacity: .5; cursor: not-allowed; }
select:disabled { opacity: .55; cursor: not-allowed; }

.btn.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn.with-icon svg { width: 20px; height: 20px; }

.btn.danger { background: var(--vermilion); color: var(--bone); }

/* phones: mode and New game share the first row; the opponent and variant pickers get full-width rows */
@media (max-width: 480px) {
  .seg label { padding: 5px 10px; font-size: 14px; }
  #newgame { order: 2; padding: 5px 10px; font-size: 14px; }
  .toolbar .field { flex: 1 1 100%; }
  .toolbar .field > span { min-width: 4.6em; }   /* line the two dropdowns up */
  .field select { flex: 1; min-width: 0; }
}

/* the narrowest phones: a little tighter still, so mode and Start game stay on one row */
@media (max-width: 400px) {
  .seg label { padding: 5px 7px; font-size: 13.5px; }
  #newgame { padding: 5px 8px; gap: 4px; font-size: 13.5px; }
  #newgame svg { width: 16px; height: 16px; }
}