/* GGE accessibility settings button + the visitor-chosen display modes.
   Loaded on every page. Settings are saved in the visitor's own browser. */

/* ---------- Skip link (shown when a keyboard user tabs to it) ---------- */
.gge-skip{position:absolute;left:12px;top:-200px;z-index:2147483646;background:#39FF14;color:#000;font:700 16px/1.2 "Instrument Sans","Helvetica Neue",Arial,sans-serif;padding:12px 18px;border-radius:10px;text-decoration:none;border:3px solid #000}
.gge-skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
.gge-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- The button + panel (fixed pixel sizes so it never resizes itself) ---------- */
.gge-a11y{--a-bg:#0B0D0B;--a-panel:#141614;--a-ink:#FFFFFF;--a-muted:#B9BEB7;--a-line:rgba(255,255,255,.18);--a-green:#39FF14;
  font:400 15px/1.4 "Instrument Sans","Helvetica Neue",Arial,sans-serif;color:var(--a-ink);letter-spacing:normal;word-spacing:normal;text-align:left}
.gge-a11y *,.gge-a11y *::before,.gge-a11y *::after{box-sizing:border-box}
.gge-a11y-toggle{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147483600;width:54px;height:54px;border-radius:50%;
  background:#000;color:var(--a-green);border:2px solid var(--a-green);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s ease,box-shadow .2s ease}
.gge-a11y-toggle:hover{transform:scale(1.06);box-shadow:0 0 0 4px rgba(57,255,20,.25),0 8px 24px rgba(0,0,0,.5)}
.gge-a11y-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.gge-a11y-toggle svg{width:30px;height:30px;display:block}
.gge-a11y-toggle[aria-expanded="true"]{background:var(--a-green);color:#000}
.gge-a11y-dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--a-green);border:2px solid #000;display:none}
.gge-a11y.is-custom .gge-a11y-dot{display:block}

/* Game screens: tuck the button onto the left edge so it never covers game controls */
.gge-a11y.is-edge .gge-a11y-toggle{bottom:auto;top:50%;left:0;width:40px;height:52px;border-radius:0 12px 12px 0;border-left:0;transform:translateY(-50%)}
.gge-a11y.is-edge .gge-a11y-toggle:hover{transform:translateY(-50%)}
.gge-a11y.is-edge .gge-a11y-toggle svg{width:24px;height:24px}

.gge-a11y-panel{position:fixed;left:16px;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:2147483601;width:min(360px,calc(100vw - 32px));
  max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;background:var(--a-bg);border:2px solid var(--a-green);border-radius:20px;
  padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.gge-a11y-panel[hidden]{display:none}
.gge-a11y.is-edge .gge-a11y-panel{bottom:auto;top:50%;left:48px;transform:translateY(-50%);width:min(360px,calc(100vw - 60px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.gge-a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.gge-a11y-head h2{margin:0;font:900 26px/1 "Big Shoulders Display","Arial Narrow",Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--a-ink)}
.gge-a11y-close{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--a-line);background:transparent;color:var(--a-ink);cursor:pointer;display:grid;place-items:center;padding:0}
.gge-a11y-close:hover{border-color:var(--a-ink)}
.gge-a11y-close svg{width:18px;height:18px}
.gge-a11y-note{margin:0 0 14px;color:var(--a-muted);font-size:13px}
.gge-a11y button:focus-visible,.gge-a11y a:focus-visible{outline:3px solid var(--a-green);outline-offset:2px}

.gge-a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--a-line)}
.gge-a11y-row > span{font-weight:700}
.gge-a11y-step{display:flex;align-items:center;gap:6px}
.gge-a11y-step button{min-width:46px;height:40px;border-radius:10px;border:1.5px solid var(--a-line);background:var(--a-panel);color:var(--a-ink);font:700 16px/1 inherit;font-family:inherit;cursor:pointer;padding:0 10px}
.gge-a11y-step button:hover:not(:disabled){border-color:var(--a-green)}
.gge-a11y-step button:disabled{opacity:.4;cursor:not-allowed}
.gge-a11y-step output{min-width:52px;text-align:center;font-weight:700;color:var(--a-green)}
.gge-a11y-seg{display:flex;border:1.5px solid var(--a-line);border-radius:10px;overflow:hidden}
.gge-a11y-seg button{border:0;background:var(--a-panel);color:var(--a-ink);font:600 14px/1 inherit;font-family:inherit;padding:11px 12px;cursor:pointer}
.gge-a11y-seg button + button{border-left:1.5px solid var(--a-line)}
.gge-a11y-seg button[aria-pressed="true"]{background:var(--a-green);color:#000}

.gge-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px;border-top:1px solid var(--a-line)}
.gge-a11y-sw{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:92px;text-align:left;padding:12px;border-radius:14px;border:1.5px solid var(--a-line);background:var(--a-panel);color:var(--a-ink);cursor:pointer;font-family:inherit}
.gge-a11y-sw:hover{border-color:rgba(255,255,255,.5)}
.gge-a11y-sw svg{width:24px;height:24px;color:var(--a-green);flex:none}
.gge-a11y-sw b{font-size:14px;line-height:1.2}
.gge-a11y-sw small{font-size:12px;line-height:1.3;color:var(--a-muted)}
.gge-a11y-sw[aria-checked="true"]{background:var(--a-green);border-color:var(--a-green);color:#000}
.gge-a11y-sw[aria-checked="true"] svg,.gge-a11y-sw[aria-checked="true"] small{color:#000}
.gge-a11y-sw .on{display:none;margin-left:auto}
.gge-a11y-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--a-line)}
.gge-a11y-reset{border:1.5px solid var(--a-ink);background:transparent;color:var(--a-ink);border-radius:999px;padding:9px 16px;font:700 14px/1 inherit;font-family:inherit;cursor:pointer}
.gge-a11y-reset:hover{background:var(--a-ink);color:#000}
.gge-a11y-foot a{color:var(--a-green);font-weight:700;font-size:14px}
@media (max-width:380px){.gge-a11y-grid{grid-template-columns:1fr}.gge-a11y-sw{min-height:0}}

/* Reading guide: a highlighted strip that follows the pointer */
.gge-a11y-guide{position:fixed;left:0;right:0;top:0;height:44px;margin-top:-22px;pointer-events:none;z-index:2147483500;
  border-block:3px solid #39FF14;background:rgba(57,255,20,.10);box-shadow:0 0 0 100vmax rgba(0,0,0,.35);display:none}
html.a11y-guide .gge-a11y-guide{display:block}

/* ---------- Visitor-chosen modes (classes are put on <html>) ---------- */

/* Text size */
html.a11y-text-1{font-size:115%}
html.a11y-text-2{font-size:130%}
html.a11y-text-3{font-size:150%}

/* Readable font */
html.a11y-font body,html.a11y-font body *:not(svg):not(svg *){font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif!important}
html.a11y-font body h1,html.a11y-font body h2,html.a11y-font body h3{letter-spacing:0!important}

/* Text spacing */
html.a11y-spacing body p,html.a11y-spacing body li,html.a11y-spacing body dd,html.a11y-spacing body dt,
html.a11y-spacing body label,html.a11y-spacing body summary,html.a11y-spacing body td{line-height:1.9!important;letter-spacing:.04em!important;word-spacing:.14em!important}
html.a11y-spacing body p{margin-bottom:1.2em}

/* Highlight links and buttons */
html.a11y-links body a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important}
html.a11y-links body a,html.a11y-links body button,html.a11y-links body summary,html.a11y-links body [role="tab"]{outline:2px solid #FFD400!important;outline-offset:2px!important}
html.a11y-links .gge-a11y a,html.a11y-links .gge-a11y button{outline:none!important}

/* Stop animations (same approach the games use for "reduce motion") */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}

/* Big cursor */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l0 36 9-9 6 14 7-3-6-14 13 0z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3,auto!important}
html.a11y-cursor a,html.a11y-cursor a *,html.a11y-cursor button,html.a11y-cursor button *,html.a11y-cursor summary,html.a11y-cursor summary *,html.a11y-cursor label,html.a11y-cursor select,html.a11y-cursor [role="tab"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l0 36 9-9 6 14 7-3-6-14 13 0z' fill='%2339FF14' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3,pointer!important}

/* High contrast: pure black and white, brighter outlines, underlined links */
html:root.a11y-contrast{--bg:#000;--panel:#000;--ink:#fff;--muted:#fff;--line:rgba(255,255,255,.8);--accent:#39FF14;--deep:#000;--deep-ink:#fff;
  --night:#000;--night-2:#000;--violet:#000;--plum:#000;color-scheme:dark}
html.a11y-contrast body{background:#000!important;color:#fff!important}
html.a11y-contrast body .hero,html.a11y-contrast body .hof-hero,html.a11y-contrast body .feature,html.a11y-contrast body .f-art,
html.a11y-contrast body .cta .box,html.a11y-contrast body .panel,html.a11y-contrast body form,html.a11y-contrast body .board-card,
html.a11y-contrast body .ahead,html.a11y-contrast body .top{background:#000!important}
html.a11y-contrast body .panel,html.a11y-contrast body form,html.a11y-contrast body .feature,html.a11y-contrast body .board-card{border:2px solid #fff!important}
html.a11y-contrast body .wall .head p,html.a11y-contrast body .band-group h3,html.a11y-contrast body .wall-note,html.a11y-contrast body .cta p,
html.a11y-contrast body .lede,html.a11y-contrast body .f-body p,html.a11y-contrast body .nav a,html.a11y-contrast body .anav a:not(.abtn),
html.a11y-contrast body .direct small,html.a11y-contrast body footer,html.a11y-contrast body .opt{color:#fff!important}
html.a11y-contrast body a:not(.btn):not(.abtn):not(.gge-skip){text-decoration:underline!important;text-underline-offset:3px}
html.a11y-contrast body input,html.a11y-contrast body select,html.a11y-contrast body textarea{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.a11y-contrast body ::placeholder{color:#d0d0d0!important;opacity:1}
html.a11y-contrast body .btn-ghost,html.a11y-contrast body .abtn-ghost{border-color:#fff!important;color:#fff!important}
html.a11y-contrast body :focus-visible{outline:4px solid #FFD400!important;outline-offset:3px!important}

@media print{.gge-a11y,.gge-skip,.gge-a11y-guide{display:none!important}}

/* Keep the homepage header tidy when text is enlarged */
html[class*="a11y-text-"] .top .wrap{height:auto;min-height:68px;padding-block:.5rem}
html[class*="a11y-text-"] .nav a{white-space:nowrap}
@media (max-width:1500px){html.a11y-text-2 .nav a:not(.btn),html.a11y-text-3 .nav a:not(.btn){display:none}}
@media (max-width:1200px){html.a11y-text-1 .nav a:not(.btn){display:none}}
@media (max-width:520px){html[class*="a11y-text-"] .nav .btn-arcade{display:none}}

/* Compact panel on phones */
@media (max-width:480px){.gge-a11y-panel{padding:14px}.gge-a11y-sw{min-height:0;padding:10px;gap:4px}.gge-a11y-row{padding:9px 0}.gge-a11y-note{margin-bottom:10px}}