/* Frenzy: keyboard and gamepad play and the Controls screen (ARCHITECTURE 17). Focus is always visible to keyboard
   and pad players (input-touch.md section 5): html[data-input] names the device used last, and a pad moves focus
   without the key events that make the browser draw :focus-visible. No inline styles (the CSP). */

html[data-input='keyboard'] :is(button, a[href], summary, select, [tabindex]:not([tabindex='-1'])):focus,
html[data-input='gamepad'] :is(button, a[href], summary, select, [tabindex]:not([tabindex='-1'])):focus {
  outline: 3px solid var(--fin);
  outline-offset: 3px;
}
html[data-input='keyboard'] .choice:has(input:focus),
html[data-input='gamepad'] .choice:has(input:focus),
html[data-input='gamepad'] .shark-choice:has(input:focus),
html[data-input='keyboard'] .shark-choice:has(input:focus),
html[data-input='gamepad'] .slider:focus {
  outline: 3px solid var(--fin);
  outline-offset: 3px;
}

/* The board takes focus for the cursor; its frame is the canvas outline, inside the board box. */
.game-canvas:focus { outline: none; }
html[data-input='keyboard'] .game-canvas:focus,
html[data-input='gamepad'] .game-canvas:focus {
  outline: 3px solid var(--fin);
  outline-offset: -3px;
}

/* The live binding on the big button: a key cap after the label (text glyphs, open question 6). */
.big-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.glyph {
  display: inline-block;
  min-inline-size: 1.75em;
  padding: 0.0625rem 0.375rem;
  border: 2px solid currentColor;
  border-block-end-width: 3px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8125em;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  opacity: 0.9;
}

/* --- The Controls screen ----------------------------------------------------------------------------------------- */
.option-controls { display: grid; gap: 0.375rem; }
.option-controls button { justify-self: start; }

.controls { display: grid; gap: 0.75rem; }
.controls-intro { margin: 0; color: var(--muted); }
.controls-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.controls-tab { flex: 1 1 8rem; border-radius: 12px; }
.controls-tab[aria-selected='true'] { background: var(--fin); border-color: var(--fin); color: var(--fin-ink); }
.controls-tab[aria-selected='true']::before { content: '● '; }
.controls-list { display: grid; gap: 0.5rem; }
.controls-fixed, .controls-nopad { margin: 0; }
.controls-category { margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--muted); }
.controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.controls-names { display: grid; min-inline-size: 0; }
.controls-action { font-weight: 800; }
.controls-desc { color: var(--muted); font-size: 0.875rem; }
.controls-slots { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.controls-slot {
  min-inline-size: 4.5rem;
  min-block-size: var(--target);
  padding-inline: 0.5rem;
  border-radius: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.controls-slot.capturing { font-style: italic; border-style: dashed; background: var(--fin); color: var(--fin-ink); }
/* A shared input: a red frame and a dashed border, never colour alone (DESIGN 9.5). */
.controls-slot.conflict { border: 3px dashed #ff4d6d; }
.controls-slot.conflict::after { content: ' !'; }
.controls-reset-one { min-block-size: var(--target); }
.controls-status { min-block-size: 1.5em; margin: 0; font-weight: 700; }
.controls-footer { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.controls-footer button { flex: 1 1 10rem; border-radius: 12px; }
.controls-confirm { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 0.55); }
.controls-confirm[hidden] { display: none; }

@media (max-width: 30rem) {
  .controls-row { grid-template-columns: minmax(0, 1fr) auto; }
  .controls-slots { grid-column: 1 / -1; grid-row: 2; }
}
.big-button[hidden] { display: none; }