/* 117 — accessibility toolbar. Shared by every public page (index, privacy,
   terms, accessibility) -- see a11y.js, which builds the button/panel DOM.
   Relies on --ink/--muted/--line/--rust custom properties already defined
   by each page's own stylesheet (styles.css for index.html, an inline
   :root block on the standalone pages) -- same names, same values. */

.a11y-btn{
  position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:750;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:none;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.a11y-btn:hover{background:var(--rust);}
.a11y-btn svg{width:24px;height:24px;display:block;}

.a11y-panel{
  position:fixed;right:16px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:750;
  width:min(270px,calc(100vw - 32px));
  background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:12px;
  padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.22);
  display:none;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.a11y-panel.on{display:block;}
.a11y-panel h2{font-size:12.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;}
.a11y-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;gap:10px;}
.a11y-row:first-of-type{border-top:0;}
.a11y-toggle{
  width:40px;height:23px;border-radius:12px;border:1.5px solid var(--ink);
  background:#fff;position:relative;cursor:pointer;flex:0 0 auto;padding:0;
}
.a11y-toggle::after{
  content:"";position:absolute;top:1px;left:1px;width:17px;height:17px;border-radius:50%;
  background:var(--ink);transition:transform .15s ease;
}
.a11y-toggle.on{background:var(--ink);}
.a11y-toggle.on::after{background:#fff;transform:translateX(17px);}
.a11y-textsize{display:flex;gap:5px;}
.a11y-textsize button{
  min-width:28px;height:28px;padding:0 6px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  font-weight:700;font-size:11px;cursor:pointer;border-radius:6px;
}
.a11y-textsize button.on{background:var(--ink);color:#fff;}
.a11y-reset{
  display:block;width:100%;margin-top:14px;padding:8px;border:1.5px solid var(--ink);
  background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.02em;cursor:pointer;border-radius:8px;
}
.a11y-reset:hover{background:var(--ink);color:#fff;}
.a11y-statement{display:block;margin-top:10px;text-align:center;font-size:11px;color:var(--muted);text-decoration:none;}
.a11y-statement:hover{color:var(--rust);}

/* ---------- modes, applied as classes on <html> by a11y.js ---------- */
.a11y-contrast{--ink:#000000;--muted:#3A3A3A;--line:#000000;--rust:#A83010;}
.a11y-underline a{text-decoration:underline !important;}
.a11y-readable body,.a11y-readable p,.a11y-readable li,.a11y-readable a,.a11y-readable div{
  font-family:Arial,Helvetica,sans-serif !important;line-height:1.7 !important;letter-spacing:.01em !important;
}
html.a11y-text-lg{zoom:1.15;}
html.a11y-text-xl{zoom:1.3;}
/* header nav's "GAMES" button on index.html is a deliberate always-blink
   design choice (the artist asked twice), so it stays exempt from the
   motion kill-switch below; everything else on the page is fair game. */
.a11y-motion-off *:not(.nav-games):not(.nav-games *){
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
.a11y-motion-off{scroll-behavior:auto !important;}