/* Тохиргоо: one column of panels; the board themes as a grid of live previews. */
@layer page {
  .settings { max-width: 760px; margin: 0 auto; }
  .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-3); }
  .theme-opt {
    position: relative;
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
  }
  .theme-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .theme-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
  .theme-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .theme-opt__board chess-board { display: block; pointer-events: none; }
  .theme-opt__name { font-size: var(--fs-13); font-weight: var(--fw-bold); text-align: center; }
  /* The pieces: seven cards like the themes', each with four of its pieces on the device's own board's squares
     (the strip is a .chess-board in that theme, so its sheet gives the colours; a world's frame stays off it). */
  .piece-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-3); }
  .piece-opt__art.chess-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    aspect-ratio: auto;
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: none;
    background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 50% 200%;
    pointer-events: none;
  }
  .piece-opt__art img, .piece-opt__art svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
  .pieces-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); }
  .volume { flex: 1; min-height: var(--control-h); accent-color: var(--primary); }
  fieldset.field legend { margin-bottom: var(--sp-2); }
}