/* UX-06 focus, readability and accessibility settings. Loaded after the other
   stylesheets; settings classes are set on <html> by scripts/accessibility.js. */

/* Visible keyboard focus everywhere. :where() keeps this a fallback so the
   existing component rings still win where they are defined. */
/* Clipped (painted) buttons cut the outer outline; an inset ring stays visible. */
.settings-panel,.confirm-panel,.obox,.chapter-transition-inner{scroll-padding:12px}

/* Minimum readable sizes (ART_DIRECTION: small buttons >= 12px). */
#tcards .tcname{font-size:12px}
#tcards .tccost{font-size:12px}
#tcards .tcdesc{font-size:12px}
#tcards .tower-mastery,#tcards .tower-family{font-size:12px}
.settings-panel .settings-label{font-size:12px}
.settings-panel .settings-note-list,.settings-panel .settings-note-list div{font-size:12px}
#menu-screen .page-kicker,#menu-screen .home-mission-kicker{font-size:12px}

/* Touch targets >= 44px on phones. */
@media (max-width:760px),(pointer:coarse){
  .settings-panel input[type="range"]{min-height:44px}
}

/* Accessibility & display section inside Settings. */
.a11y-setting{margin:12px 0 4px}
.a11y-setting-label{font-size:13px;font-weight:700;margin-bottom:6px}
.a11y-choice-grid{display:grid;grid-template-columns:repeat(var(--a11y-choices,3),minmax(0,1fr));gap:6px}
.a11y-choice-grid .diff-btn{width:100%}
.a11y-choice[aria-pressed="true"]::before{content:"✓ ";font-weight:900}
.a11y-setting-help{margin:6px 0 0}
.a11y-scope{margin-top:12px;font-size:13px}
.a11y-scope summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.a11y-scope ul{margin:4px 0 0;padding-left:18px;line-height:1.5}

/* Status never by colour alone: unaffordable tower cards say so in text. */
#tcards .tcard.disabled:not(.locked) .tccost::after{content:" · short";font-weight:700}
html[lang^="zh"] #tcards .tcard.disabled:not(.locked) .tccost::after{content:" · 金币不足"}

/* Colour-vision aid: patterns and symbols on top of the text cues. */
html.a11y-status-enhanced #notifs .notif[data-kind="error"] .notif-label::before{content:"✕ "}
html.a11y-status-enhanced #notifs .notif[data-kind="warning"] .notif-label::before{content:"! "}

/* Reduced flashes: no full-screen white flash. */
html.a11y-reduce-flash #screen-flash{display:none!important}

/* Reduced motion (in-game setting or system preference): no decorative movement.
   Information (warnings, ranges, wave cards) stays; only animation is removed. */
html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
/* Larger text: the decorative brand wordmark yields space to the controls instead of sliding under them. */
#menu-screen .menu-brand-lockup,#menu-screen .menu-brand-lockup>div{min-width:0}
#menu-screen .menu-brand-lockup strong{display:block;overflow-wrap:anywhere;white-space:normal}