.jft-accessibility-settings {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  color: var(--menu-cream, #fff4da);
}

.jft-accessibility-intro,
.jft-accessibility-group-copy,
.jft-accessibility-description,
.jft-accessibility-live {
  margin: 0;
  color: var(--menu-muted, #e7d8c3);
  line-height: 1.42;
}

.jft-accessibility-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}

.jft-accessibility-group {
  min-width: 0;
  margin: 0;
  padding: clamp(10px, 1.7vw, 16px);
  border: 1px solid color-mix(in srgb, var(--menu-gold, #f7c65c) 58%, transparent);
  border-radius: 14px;
  background: rgba(8, 12, 31, .54);
}

.jft-accessibility-group legend {
  padding: 0 7px;
  color: var(--menu-gold, #f7c65c);
  font-family: var(--menu-display-font, sans-serif);
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 900;
}

.jft-accessibility-group-copy { min-height: 3em; font-size: .88em; }

.jft-accessibility-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.jft-accessibility-field-copy { display: grid; gap: 3px; min-width: 0; }
.jft-accessibility-label { font-weight: 850; }
.jft-accessibility-description { font-size: .78em; }

.jft-accessibility-select,
.jft-accessibility-checkbox {
  min-width: 44px;
  min-height: 44px;
  accent-color: var(--menu-focus, #60e3ff);
}

.jft-accessibility-select {
  max-width: 180px;
  padding: 8px 30px 8px 10px;
  border: 2px solid rgba(255, 255, 255, .58);
  border-radius: 10px;
  background: #101a3d;
  color: #fff;
  font: 800 .88em var(--menu-body-font, sans-serif);
}

.jft-accessibility-checkbox { width: 24px; justify-self: end; }
.jft-accessibility-select:focus-visible,
.jft-accessibility-checkbox:focus-visible { outline: 3px solid var(--menu-focus, #60e3ff); outline-offset: 3px; }

.jft-accessibility-preview {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(220px, 1.5fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border: 2px solid rgba(247, 198, 92, .72);
  border-radius: 14px;
  background: rgba(5, 9, 25, .78);
}

.jft-accessibility-preview-notice,
.jft-accessibility-preview-dialogue {
  padding: calc(8px * var(--access-preview-ui-scale, 1));
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  background: rgba(21, 31, 66, .84);
  font-size: calc(.82em * var(--access-preview-ui-scale, 1));
  font-weight: 800;
}

.jft-accessibility-preview-dialogue { font-size: calc(.82em * var(--access-preview-dialogue-scale, 1)); }
.jft-accessibility-preview-effects { display: flex; gap: 6px; }
.jft-accessibility-preview-effects span { padding: 6px; border-radius: 8px; background: #8b2f56; font-size: .72em; font-weight: 900; }
.jft-accessibility-preview-shake { transform: translateX(calc(3px * var(--access-preview-shake-scale, 1))); }
.jft-accessibility-preview-flash { opacity: var(--access-preview-flash-scale, 1); }
.jft-accessibility-live { grid-column: 1 / -1; font-size: .78em; }
.jft-accessibility-settings[data-high-contrast="true"] .jft-accessibility-preview { background: #02030a; border-color: #fff08a; }

.jft-accessibility-actions { justify-content: flex-end; }
.jft-accessibility-confirm {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 6vh auto 0;
  padding: clamp(20px, 4vw, 34px);
  border: 3px solid var(--menu-gold, #f7c65c);
  border-radius: 18px;
  background: #0c1231;
  color: var(--menu-cream, #fff4da);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.jft-accessibility-confirm h2,
.jft-accessibility-confirm p { margin: 0; }

@media (max-width: 900px), (max-height: 520px) {
  .jft-accessibility-groups { grid-template-columns: 1fr; }
  .jft-accessibility-group-copy { min-height: 0; }
  .jft-accessibility-preview { grid-template-columns: 1fr 1fr; }
  .jft-accessibility-preview > strong,
  .jft-accessibility-live { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .jft-accessibility-field { grid-template-columns: minmax(0, 1fr) auto; }
  .jft-accessibility-preview { grid-template-columns: 1fr; }
  .jft-accessibility-preview > *, .jft-accessibility-live { grid-column: 1; }
  .jft-accessibility-actions { justify-content: stretch; }
  .jft-accessibility-actions .jft-menu-button { flex: 1 1 100%; }
}

/* Shared player-facing runtime preferences. Checkpoint E extends these rules
   through legacy communication, selection, locked, disabled, and touch states. */
.jft-character-dialogue {
  --jft-dialogue-max-height: calc(180px * var(--jft-dialogue-text-scale, 1));
  font-size: calc(15px * var(--jft-dialogue-text-scale, 1));
  gap: calc(8px * var(--jft-access-ui-scale, 1));
  padding: calc(7px * var(--jft-access-ui-scale, 1)) calc(9px * var(--jft-access-ui-scale, 1));
}
.jft-character-dialogue[data-layout="mobile"] { font-size: calc(12.5px * var(--jft-dialogue-text-scale, 1)); }
.jft-character-dialogue .jft-dialogue-speaker { font-size: calc(12px * var(--jft-dialogue-text-scale, 1)); }
.jft-character-dialogue .jft-dialogue-detail { font-size: calc(10.5px * var(--jft-dialogue-text-scale, 1)); }
.jft-character-dialogue[data-layout="mobile"] .jft-dialogue-speaker { font-size: calc(10.5px * var(--jft-dialogue-text-scale, 1)); }
.jft-character-dialogue[data-layout="mobile"] .jft-dialogue-detail { font-size: calc(9.5px * var(--jft-dialogue-text-scale, 1)); }

html[data-jft-reduced-motion="true"] .jft-menu-view,
html[data-jft-reduced-motion="true"] .jft-character-dialogue,
html[data-jft-reduced-motion="true"] .jft-olivia-radio,
html[data-jft-reduced-motion="true"] .jft-notice,
html[data-jft-reduced-motion="true"] .jft-accessibility-preview * {
  animation: none !important;
  transition: none !important;
}

.jft-hud[data-reduced-flashes="true"] .jft-vitality[data-feedback],
.jft-notifications[data-reduced-flashes="true"] .jft-notice,
html[data-jft-reduced-flashes="true"] .jft-accessibility-preview-flash {
  animation: none !important;
  filter: none !important;
}

.jft-hud[data-high-contrast="true"] .jft-panel,
.jft-notifications[data-high-contrast="true"] .jft-panel,
html[data-jft-high-contrast="true"] .jft-character-dialogue,
html[data-jft-high-contrast="true"] .jft-olivia-radio,
html[data-jft-high-contrast="true"] .jft-menu-panel {
  background-color: rgba(2, 4, 12, .97) !important;
  color: #fff !important;
  filter: contrast(1.16) drop-shadow(0 0 1px #000) !important;
}

html[data-jft-high-contrast="true"] .jft-menu-host {
  --menu-cream: #fff;
  --menu-muted: #f4f0e3;
  --menu-focus: #7ef4ff;
  background-color: #050711;
}

html[data-jft-high-contrast="true"] .jft-menu-button {
  border-color: #fff !important;
  background: #080b13 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px #000 !important;
}

html[data-jft-high-contrast="true"] .jft-menu-button.is-primary,
html[data-jft-high-contrast="true"] .jft-menu-button[aria-current="true"] {
  border-color: #fff36a !important;
  background: #fff36a !important;
  color: #050505 !important;
}

html[data-jft-high-contrast="true"] .jft-menu-button:disabled,
html[data-jft-high-contrast="true"] .jft-level-card[data-availability="locked-preview"] {
  border-style: dashed !important;
  border-color: #d7d7d7 !important;
  background: #171717 !important;
  color: #f4f4f4 !important;
  opacity: .82 !important;
}

html[data-jft-high-contrast="true"] .touch-btn {
  --touch-stroke: #fff;
  color: #fff;
  text-shadow: 0 2px 3px #000, 0 0 5px #000;
}

html[data-jft-high-contrast="true"] .touch-btn::before {
  background: rgba(0, 0, 0, .94);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #fff;
  opacity: 1;
}

html[data-jft-high-contrast="true"] .touch-btn:disabled::before,
html[data-jft-high-contrast="true"] .touch-btn.is-disabled::before {
  border-style: dashed;
}

html[data-jft-high-contrast="true"] :is(.jft-menu-button, .jft-accessibility-select):focus-visible {
  outline-color: #fff36a !important;
  outline-width: 4px !important;
}
