:root {
  --a11y-focus: #ffd84d;
  --a11y-panel-bg: #071b14;
  --a11y-panel-text: #fff;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 10px;
  z-index: 100002;
  padding: 12px 16px;
  border: 3px solid #fff;
  border-radius: 8px;
  background: #071b14;
  color: #fff;
  font: 800 1rem/1.2 Arial, sans-serif;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 4px solid var(--a11y-focus) !important;
  outline-offset: 4px !important;
}

html[data-a11y-text="large"] { font-size: 125% !important; }
html[data-a11y-text="xlarge"] { font-size: 145% !important; }

html[data-a11y-readable="true"] body,
html[data-a11y-readable="true"] button,
html[data-a11y-readable="true"] input,
html[data-a11y-readable="true"] textarea,
html[data-a11y-readable="true"] select {
  font-family: Arial, Verdana, sans-serif !important;
  letter-spacing: .035em !important;
  line-height: 1.7 !important;
  word-spacing: .08em !important;
}

html[data-a11y-links="true"] a:not(.a11y-trigger),
html[data-a11y-links="true"] button:not(.a11y-trigger):not(.a11y-close) {
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
  box-shadow: 0 0 0 3px #ffd84d !important;
}

html[data-a11y-contrast="true"] body,
html[data-a11y-contrast="true"] main,
html[data-a11y-contrast="true"] section,
html[data-a11y-contrast="true"] article,
html[data-a11y-contrast="true"] header,
html[data-a11y-contrast="true"] footer,
html[data-a11y-contrast="true"] aside,
html[data-a11y-contrast="true"] nav,
html[data-a11y-contrast="true"] .panel,
html[data-a11y-contrast="true"] .overlay,
html[data-a11y-contrast="true"] .game-card,
html[data-a11y-contrast="true"] .leaderboard {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
}

html[data-a11y-contrast="true"] :where(h1,h2,h3,h4,p,span,strong,small,em,label,legend,li,cite) {
  color: #fff !important;
  text-shadow: none !important;
}

html[data-a11y-contrast="true"] :where(a, button) {
  background: #000 !important;
  color: #ffd84d !important;
  border: 2px solid #ffd84d !important;
  text-shadow: none !important;
}

html[data-a11y-contrast="true"] input {
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #ffd84d !important;
}

html[data-a11y-calm="true"] *,
html[data-a11y-calm="true"] *::before,
html[data-a11y-calm="true"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

html[data-a11y-calm="true"] .hero-noise,
html[data-a11y-calm="true"] .gold-orbit,
html[data-a11y-calm="true"] .book-shadow { display: none !important; }

.a11y-trigger {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 100000;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0b442f;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  font: 900 16px/1 Arial, sans-serif;
  cursor: pointer;
}

.a11y-trigger[aria-expanded="true"] { background: #a72426; }

.a11y-panel {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px);
  z-index: 99999;
  width: min(360px, calc(100vw - 20px));
  max-height: min(650px, calc(100vh - 90px));
  overflow: auto;
  border: 3px solid #e1b63c;
  border-radius: 16px;
  background: var(--a11y-panel-bg);
  color: var(--a11y-panel-text);
  box-shadow: 0 10px 38px rgba(0,0,0,.55);
  font: 600 16px/1.4 Arial, sans-serif;
}

.a11y-panel[hidden] { display: none !important; }
.a11y-panel * { box-sizing: border-box; }
.a11y-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 10px; }
.a11y-panel h2 { margin:0; color:#fff; font:900 1.2rem/1.1 Arial,sans-serif; }
.a11y-close { width:44px; height:44px; border:2px solid #fff; border-radius:50%; background:transparent; color:#fff; font-size:1.4rem; cursor:pointer; }
.a11y-panel p { margin:0; padding:0 14px 12px; color:#fff; font-size:.9rem; }
.a11y-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; }
.a11y-option {
  min-height:58px;
  padding:9px 8px;
  border:2px solid #b8c9c1;
  border-radius:10px;
  background:#12392b;
  color:#fff;
  font:800 .92rem/1.2 Arial,sans-serif;
  cursor:pointer;
}
.a11y-option[aria-pressed="true"] { border-color:#ffd84d; background:#245e46; color:#fff; box-shadow:inset 0 0 0 2px #ffd84d; }
.a11y-option.reading { background:#8e2528; border-color:#fff; }
.a11y-reset { grid-column:1 / -1; min-height:46px; background:#fff; color:#071b14; }
.a11y-statement { display:block; margin:0 12px 14px; padding:11px; border:2px solid #e1b63c; border-radius:10px; color:#fff; text-align:center; font-weight:800; }
.a11y-status { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

@media (max-width: 560px) {
  .a11y-panel { width:calc(100vw - 20px); }
  .a11y-grid { grid-template-columns:1fr 1fr; }
  .a11y-option { min-height:54px; font-size:.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

@media (forced-colors: active) {
  .a11y-trigger, .a11y-panel, .a11y-option { forced-color-adjust:auto; }
}