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

/* Dialog windows (all drawn as a manuscript leaf), the confirm dialog and the Options window. */

dialog.confirm { width: min(440px, calc(100vw - 24px)); }
.confirm h2 { font-family: var(--f-display); font-weight: 400; font-size: 26px; margin: 0; }
.confirm p { margin: 0; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* stats modal: a manuscript leaf */
dialog.stats {
  width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden;
  color: var(--ink); background: var(--bone); border: 2px solid var(--ink);
  border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px;
  box-shadow: 0 0 0 5px var(--bone), 0 0 0 6.5px var(--ink-soft), 0 24px 50px -20px rgba(40,28,18,.7);
}
dialog.stats::backdrop { background: rgba(40,28,18,.5); }
.stats-inner { max-height: calc(100dvh - 28px); overflow-y: auto; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.stats-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stats-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 28px; margin: 0; }
.stats-tabs { display: flex; gap: 6px; border-bottom: 1.5px solid var(--ink-soft); }
.stats-tabs button {
  font: inherit; font-weight: 600; font-size: 15px; color: var(--ink-soft); background: none; cursor: pointer;
  border: 1.5px solid transparent; border-bottom: 0; border-radius: 10px 12px 0 0; padding: 5px 14px; margin-bottom: -1.5px;
}
.stats-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); border-color: var(--ink-soft); }
.stats-tabs button:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 2px; }

.opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.now-playing { margin: 6px 0 0; font-family: var(--f-note); font-style: italic; font-size: 14px; color: var(--ink-soft); }
.opt-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.opt-range input[type=range] { -webkit-appearance: none; appearance: none; flex: 1 1 160px; max-width: 260px; height: 22px; background: none; cursor: pointer; }
.opt-range input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--paper-deep); border: 1.5px solid var(--ink); border-radius: 5px 3px 6px 3px; }
.opt-range input[type=range]::-moz-range-track { height: 6px; background: var(--paper-deep); border: 1.5px solid var(--ink); border-radius: 5px 3px 6px 3px; }
.opt-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--ochre); border: 1.5px solid var(--ink); }
.opt-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ochre); border: 1.5px solid var(--ink); }
.opt-range input[type=range]:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 3px; }
.opt b { display: block; }
.opt small { display: block; font-size: 14px; color: var(--ink-soft); }
.toggle {
  appearance: none; flex-shrink: 0; position: relative; width: 40px; height: 22px; margin: 2px 0 0; cursor: pointer;
  background: var(--paper-deep); border: 1.5px solid var(--ink); border-radius: 12px 10px 13px 9px;
}
.toggle::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bone); border: 1.5px solid var(--ink); transition: transform .2s;
}
.toggle:checked { background: var(--sage); }
.toggle:checked::before { transform: translateX(17px); background: #fffaf0; }
.toggle:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 3px; }