/* ---- Accessibility & controls (src/ui/access.js, gamepad.js, recovery.js) ---- */

/* Dropdowns in Settings rows, in the carved-slot look of the switches. */
.pz-select {
  flex: none; max-width: 100%; min-height: max(32px, calc(var(--u, 1px) * 50)); padding: 0 calc(var(--u, 1px) * 40) 0 calc(var(--u, 1px) * 16);
  font: inherit; font-size: max(13px, calc(var(--u, 1px) * 22)); font-weight: 700; color: var(--cream, #fff4dc); cursor: pointer;
  appearance: none; -webkit-appearance: none; border-radius: 999px; border: calc(var(--u, 1px) * 2.5) solid #b8873a;
  background: linear-gradient(45deg, transparent 50%, #f6d27a 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
              linear-gradient(-45deg, transparent 50%, #f6d27a 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
              linear-gradient(180deg, #0b1a10, #1b3420);
  box-shadow: 0 0 0 calc(var(--u, 1px) * 2) var(--bark, #3a2410);
}
.pz-select option { color: #1b1408; background: #f6e7bf; }
.pz-select:focus-visible { outline: 3px solid var(--focus, #ffd66a); outline-offset: 3px; }

/* Key bindings */
.ax-binds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--u, 1px) * 330)), 1fr)); gap: calc(var(--u, 1px) * 10) calc(var(--u, 1px) * 18); }
.ax-bind {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u, 1px) * 12); min-height: max(40px, calc(var(--u, 1px) * 64));
  padding: calc(var(--u, 1px) * 8) calc(var(--u, 1px) * 14); border-radius: calc(var(--u, 1px) * 16);
  background: linear-gradient(180deg, rgba(48,92,54,.6), rgba(22,48,28,.75)); border: calc(var(--u, 1px) * 2) solid rgba(201,150,65,.6);
  font-size: max(13px, calc(var(--u, 1px) * 22)); font-weight: 700; color: var(--cream, #fff4dc);
}
.ax-bind > span { min-width: 0; overflow-wrap: anywhere; }
.ax-key {
  flex: none; min-width: max(44px, calc(var(--u, 1px) * 76)); min-height: max(32px, calc(var(--u, 1px) * 46)); padding: 0 calc(var(--u, 1px) * 12);
  font: inherit; font-weight: 800; color: #2a1a08; cursor: pointer; text-align: center; display: inline-grid; place-items: center;
  border-radius: calc(var(--u, 1px) * 10); border: 0; background: linear-gradient(180deg, #fff4d4, #e6c98a);
  box-shadow: 0 calc(var(--u, 1px) * 4) 0 #8a5a26, inset 0 calc(var(--u, 1px) * 2) 0 #fff;
}
.ax-key.is-fixed { cursor: default; opacity: .8; }
.ax-key.is-listening { background: linear-gradient(180deg, #ffe48a, #f2b540); animation: ax-pulse 1s ease-in-out infinite; }
.ax-key:focus-visible { outline: 3px solid var(--focus, #ffd66a); outline-offset: 3px; }
@keyframes ax-pulse { 50% { filter: brightness(1.15); transform: translateY(-1px); } }
.ax-more { margin-top: calc(var(--u, 1px) * 14); }
.ax-more > summary {
  display: flex; align-items: center; gap: calc(var(--u, 1px) * 10); cursor: pointer; list-style: none; padding: calc(var(--u, 1px) * 10) 0;
  font-size: max(13px, calc(var(--u, 1px) * 22)); font-weight: 700; color: #ead7a6;
}
.ax-more > summary::-webkit-details-marker { display: none; }
.ax-more > summary svg { width: 1.4em; height: 1.4em; color: var(--gold, #f2c14e); }
.ax-more > summary::after { content: '▸'; margin-left: auto; transition: transform .15s; }
.ax-more[open] > summary::after { transform: rotate(90deg); }
.ax-actions { display: flex; justify-content: flex-end; margin-top: calc(var(--u, 1px) * 14); }
.ax-pad { margin-top: calc(var(--u, 1px) * 10); }

/* Reduce motion (Settings), on top of the device's own preference. */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* Colour-blind mode: the few DOM signals that are red vs green. */
html[data-cb="redgreen"] { --cb-ok: #8cc8ff; --cb-bad: #ff9a1f; }
html[data-cb="blueyellow"] { --cb-ok: #6fe6e2; --cb-bad: #ff3d77; }
html[data-cb] .pz-switch:checked { background: linear-gradient(180deg, color-mix(in srgb, var(--cb-ok) 80%, #fff), var(--cb-ok)); }

/* Gamepad: a cursor over the trail, and a ring on the focused control. */
.pad-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  border-radius: 50%; border: 3px solid #fff4d4; box-shadow: 0 0 0 2px #2b2a1f, inset 0 0 0 2px #2b2a1f; display: none;
}
.pad-cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff4d4; box-shadow: 0 0 0 2px #2b2a1f; }
html.pad-active .pad-cursor.on { display: block; }
html.pad-active .pad-focus { outline: 4px solid #ffd66a !important; outline-offset: 3px; }

/* Crash recovery screen */
.crash {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: rgba(8,16,10,.82); backdrop-filter: blur(3px); color: #fff4dc; font-family: Fredoka, system-ui, sans-serif;
}
.crash-card {
  width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 22px 22px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #305c36, #16301c); border: 3px solid #c99641; box-shadow: 0 0 0 3px #3a2410, 0 12px 40px rgba(0,0,0,.6);
}
.crash-card h2 { margin: 0 0 8px; font-size: calc(24px * var(--ts, 1)); }
.crash-card p { margin: 0 0 14px; font-size: calc(15px * var(--ts, 1)); line-height: 1.4; color: #e9f0d8; }
.crash-card .crash-err { font-family: ui-monospace, monospace; font-size: 12px; color: #c9d8b8; opacity: .8; overflow-wrap: anywhere; }
.crash-card .crash-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.crash-card button {
  min-height: 44px; padding: 0 20px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: calc(16px * var(--ts, 1));
  background: linear-gradient(180deg, #fff4d4, #e6c98a); color: #2a1a08; box-shadow: 0 4px 0 #8a5a26;
}
.crash-card button.primary { background: linear-gradient(180deg, #9fe27a, #45a236); color: #0e2410; box-shadow: 0 4px 0 #24601e; }
.crash-card button:focus-visible { outline: 3px solid #ffd66a; outline-offset: 3px; }