/* =========================================================================
   a11y.css — shared accessibility widget styles
   -------------------------------------------------------------------------
   Loaded by every game alongside assets/js/a11y.js, which injects the markup
   these rules target. Previously this block was pasted inline into 25 game
   files; edit it here only.
   ========================================================================= */

/* Inset from the edge rather than jammed against it. Screen corners are the
   hardest place on a display for an eye-gaze or head-mouse user to hold
   steady — tracking accuracy degrades at the extremes — so critical controls
   get a margin to land in. */
#a11yBar{position:fixed;right:20px;bottom:20px;z-index:99990;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end;font-family:Arial,Helvetica,sans-serif;}
.a11y-btn{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:52px;height:44px;padding:0 14px;border-radius:22px;border:2px solid rgba(255,255,255,.4);
  background:rgba(18,22,40,.78);color:#fff;font-weight:bold;font-size:.82rem;cursor:pointer;
  overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.a11y-btn .af{position:absolute;left:0;top:0;height:100%;width:0;
  background:rgba(255,255,255,.3);pointer-events:none;}
.a11y-btn span{position:relative;}
/* The smart Back/Home link is game chrome too. Individual games may choose
   their own visual treatment, but the interactive box stays gaze/touch sized. */
.a11y-back-link{display:inline-flex!important;align-items:center;justify-content:center;
  min-width:44px!important;min-height:44px!important;box-sizing:border-box;}
/* This is the control a player has to find and hit to reach every other
   accessibility setting. Keep the familiar gear, but pair it with a text
   label and a generous pill target so first-time users do not have to infer
   what a faded corner icon means. */
#a11yGear{height:44px;min-width:108px;max-width:min(260px,calc(100vw - 40px));padding:0 14px;border-radius:22px;
  font-size:.82rem;opacity:.9;transition:opacity .2s ease,transform .15s ease;}
#a11yGear:hover,#a11yGear:focus-visible{opacity:1;transform:scale(1.1);}
#a11yHelpBtn{position:absolute;right:calc(100% + 8px);bottom:0;min-width:82px;}
/* Short phone landscape leaves very little safe space beside end-screen
   controls. Keep the active method in the accessible name, but use the
   compact visible label so the gear cannot cover a game action. */
@media (max-height:480px) and (max-width:900px){
  #a11yGear{min-width:52px;width:52px;max-width:52px;padding:0;}
  #a11yGear span{font-size:0;}
  #a11yGear span::after{content:'⚙️';font-size:1rem;}
}
#a11yTogs{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  /* The panel has grown past what a short tablet screen can show. Cap it and
     let it scroll rather than pushing the gear button off the bottom. */
  max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;
  padding:2px;scrollbar-width:thin;}
#a11yTogs.a11y-hidden{display:none;}
#a11yTogs .a11y-btn{flex:0 0 auto;}
body.rm *{animation-duration:.001s!important;transition-duration:.001s!important;}
#a11yRing{position:fixed;width:20px;height:20px;border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 10px rgba(255,255,255,.9),0 0 4px rgba(0,0,0,.6);pointer-events:none;
  z-index:99999;transform:translate(-50%,-50%);display:none;left:-100px;top:-100px;}

/* ── Settings panel ─────────────────────────────────────────────────────
   One grouped panel rather than a stack of cycling buttons in a corner.
   Every control is at least 48px tall with real spacing between, and the
   selected option is marked by outline AND weight, never colour alone. */
:root{--a11y-ui-scale:1;}
/* Helpful Hints shows only the current step; Show Me may expose the whole
   sequence. Game-specific controls keep their own layout in the stronger
   support level, while Just Play is handled by each game's logic so
   essential feedback is never hidden accidentally. */
body.a11y-support-hints .turn-path .turn-step:not(.active),
body.a11y-support-hints .turn-path .turn-arrow,
body.a11y-support-hints #jobSteps .job-step:not(.current){display:none!important;}
body.a11y-support-hints #jobSteps{width:auto!important;min-width:150px;}
#a11yPanel{position:fixed;inset:0;z-index:99996;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(10,8,28,.85);backdrop-filter:blur(6px);
  font-family:Arial,Helvetica,sans-serif;
  font-size:calc(1rem * var(--a11y-ui-scale));}
.a11y-panel-card{background:rgba(24,16,58,.98);border:2px solid rgba(255,255,255,.26);
  border-radius:20px;padding:22px 24px;max-width:min(680px,94vw);
  max-height:88vh;overflow-y:auto;box-shadow:0 12px 44px rgba(0,0,0,.6);color:#fff;}
.a11y-panel-h{font-size:1.35em;font-weight:bold;color:#FFD700;margin:18px 0 4px;}
.a11y-panel-card > .a11y-panel-h:first-child{margin-top:0;}
.a11y-panel-sub{font-size:.85em;opacity:.72;margin-bottom:10px;line-height:1.45;}
.a11y-access-summary{margin:12px 0 8px;padding:12px 14px;border:2px solid #8FEAFF;
  border-radius:12px;background:rgba(143,234,255,.12);color:#fff;font-weight:bold;}
.a11y-access-setup-link{display:flex;align-items:center;justify-content:center;min-height:52px;
  margin:0 0 10px;border-width:2px;color:#fff;background:rgba(205,182,255,.12);}
.a11y-settings-details{margin:10px 0;border:1px solid rgba(255,255,255,.22);
  border-radius:14px;background:rgba(255,255,255,.045);overflow:hidden;}
.a11y-settings-details>summary{position:relative;min-height:52px;padding:15px 46px 15px 16px;
  color:#fff;font-weight:bold;cursor:pointer;list-style:none;}
.a11y-settings-details>summary::-webkit-details-marker{display:none;}
.a11y-settings-details>summary::after{content:'Show';position:absolute;right:15px;color:#cdb6ff;}
.a11y-settings-details[open]>summary::after{content:'Hide';}
.a11y-settings-details>.a11y-row,.a11y-settings-details>.a11y-panel-h,
.a11y-settings-details>.a11y-panel-sub,.a11y-settings-details>.a11y-aac-phrases,
.a11y-settings-details>.a11y-panel-links{margin-left:14px;margin-right:14px;}
.a11y-aac-phrases{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.a11y-aac-chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:6px 12px;font-size:.88em;color:#fff;}
.a11y-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.a11y-row-label{flex:0 0 auto;min-width:150px;font-weight:bold;font-size:.98em;}
.a11y-opts{display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.a11y-opt{position:relative;overflow:hidden;min-height:48px;padding:0 16px;
  border-radius:12px;border:2px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.09);color:#fff;font-size:.92em;cursor:pointer;}
.a11y-opt:hover{background:rgba(255,255,255,.18);}
.a11y-opt.on{border-color:#FFD700;background:rgba(255,215,0,.2);font-weight:bold;
  box-shadow:0 0 0 2px rgba(255,215,0,.35) inset;}
.a11y-opt .af{position:absolute;left:0;top:0;height:100%;width:0;
  background:rgba(255,255,255,.3);pointer-events:none;}
.a11y-opt span{position:relative;}
/* A grading this game does not act on. Dimmed and labelled rather than
   hidden, so a therapist can see the setting exists and is simply not used
   here — silently omitting it would look like a bug. */
.a11y-row.a11y-na{opacity:.55;}
.a11y-na-note{flex-basis:100%;font-size:.78em;color:#ffd08a;padding-left:2px;}
.a11y-numwrap{display:flex;align-items:center;gap:8px;}
.a11y-num{width:90px;min-height:44px;padding:0 10px;border-radius:12px;
  border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);
  color:#fff;font-size:.95em;font-weight:bold;}
.a11y-num:focus{outline:2px solid #FFD700;outline-offset:1px;}
.a11y-num-unit{color:rgba(255,255,255,.65);font-size:.88em;}

.a11y-panel-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.a11y-panel-link{color:#cdb6ff;text-decoration:none;font-weight:bold;font-size:.9em;
  padding:11px 16px;border-radius:12px;border:1px solid rgba(205,182,255,.32);}
.a11y-panel-link:hover{background:rgba(205,182,255,.14);}
.a11y-panel-close{position:relative;overflow:hidden;display:block;width:100%;
  min-height:56px;margin-top:16px;border-radius:14px;border:2px solid transparent;
  background:linear-gradient(145deg,#4D96FF,#7B2FFF);color:#fff;
  font-weight:bold;font-size:1.05em;cursor:pointer;}
.a11y-panel-close .af{position:absolute;left:0;top:0;height:100%;width:0;
  background:rgba(255,255,255,.3);pointer-events:none;}
.a11y-panel-close span{position:relative;}

/* On-demand game help: one concise answer, not another instruction flow.
   The large centered controls work for touch, gaze, and switch scanning. */
#a11yHelp{position:fixed;inset:0;z-index:99997;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(10,8,28,.84);backdrop-filter:blur(6px);
  font-family:Arial,Helvetica,sans-serif;}
.a11y-help-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(520px,92vw);
  padding:26px;border:2px solid rgba(255,255,255,.3);border-radius:20px;
  background:rgba(26,16,64,.98);color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.55);}
.a11y-help-title,.a11y-help-message,.a11y-help-action{grid-column:1/-1;}
.a11y-help-title{font-size:1.55rem;font-weight:bold;color:#FFD700;text-align:center;}
.a11y-help-message{font-size:1.15rem;line-height:1.45;text-align:center;}
.a11y-help-action{padding:12px 14px;border:2px solid #8FEAFF;border-radius:14px;
  background:rgba(143,234,255,.12);font-size:1.08rem;font-weight:bold;text-align:center;}
.a11y-help-control{position:relative;overflow:hidden;min-height:56px;border:2px solid rgba(255,255,255,.3);
  border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-size:1rem;font-weight:bold;cursor:pointer;}
.a11y-help-control:last-child{background:linear-gradient(145deg,#4D96FF,#7B2FFF);}
.a11y-help-control .af{position:absolute;left:0;top:0;width:0;height:100%;background:rgba(255,255,255,.3);pointer-events:none;}
.a11y-help-control span{position:relative;}
@media (max-width:480px),(max-height:480px){
  .a11y-help-card{padding:18px;gap:9px;}
  .a11y-help-title{font-size:1.3rem;}
  .a11y-help-message{font-size:1rem;}
}

/* Dwell/gaze scroll zones for the settings panel. The card itself scrolls on
   a real mouse wheel or touch drag, but an eye-gaze or head-mouse user has no
   equivalent gesture - hovering one of these for as long as it takes to read
   it is their only way to reach settings below the fold. Sticky, not fixed,
   so each stays pinned to its own edge of the scrolling card wherever that
   card lands on screen. */
.a11y-scroll-zone{position:sticky;height:30px;margin:0 -24px;display:none;
  align-items:center;justify-content:center;
  font-size:1.1em;color:#fff;opacity:.65;cursor:pointer;z-index:5;
  pointer-events:auto;user-select:none;}
.a11y-scroll-zone.a11y-scroll-visible{display:flex;}
.a11y-scroll-zone:hover,.a11y-scroll-zone.hot{opacity:1;}
.a11y-scroll-up{top:0;background:linear-gradient(rgba(24,16,58,.98),rgba(24,16,58,.75));}
.a11y-scroll-down{bottom:0;background:linear-gradient(rgba(24,16,58,.75),rgba(24,16,58,.98));}

/* Hide score from the child when the therapist has turned it off.
   Section 11: clinical numbers should not sit over the child's game. */
body.a11y-hide-score .score-display,body.a11y-hide-score #scoreDisplay,
body.a11y-hide-score .score,body.a11y-hide-score .combo{visibility:hidden!important;}

/* ── Switch scanning highlight ──────────────────────────────────────────
   Has to read from across a room, on top of artwork of any colour, for a
   child who may have low vision. A thick outline plus a contrasting halo
   works where a colour change alone would not. No flashing: the highlight
   moves, it never blinks (CLAUDE.md rule 2). */
.a11y-scan-on{
  outline:5px solid #FFD700!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 9px rgba(0,0,0,.55),0 0 22px 6px rgba(255,215,0,.75)!important;
  border-radius:8px;
  position:relative;z-index:99991;
}
/* While scanning, the pointer ring is noise — the highlight is the cursor. */
body.a11y-scanning #a11yRing{display:none!important;}
#a11yScanStatus{position:fixed;left:50%;bottom:14px;z-index:99994;
  transform:translateX(-50%);width:min(680px,92vw);padding:10px 16px;
  border:3px solid #FFD700;border-radius:16px;background:rgba(7,21,45,.96);
  color:#fff;text-align:center;font:bold 1rem/1.35 Arial,Helvetica,sans-serif;
  box-shadow:0 5px 24px rgba(0,0,0,.55);}
#a11yScanStatus[hidden]{display:none!important;}

/* Eye-gaze + switch confirmation: show which pointed-at target the separate
   switch will activate. This is intentionally distinct from scan focus. */
.a11y-confirm-ready{outline:5px solid #8FEAFF!important;outline-offset:3px!important;
  box-shadow:0 0 0 8px rgba(0,0,0,.5),0 0 20px rgba(143,234,255,.8)!important;}

/* ── Pause overlay ──────────────────────────────────────────────────────
   Big, high-contrast, centred. Controls sit well inside the screen rather
   than near an edge, because gaze and head-mouse accuracy falls off at the
   extremes of a display. */
#a11yPause{position:fixed;inset:0;z-index:99995;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,8,28,.82);backdrop-filter:blur(6px);
  font-family:Arial,Helvetica,sans-serif;}
.a11y-pause-card{display:flex;flex-direction:column;gap:14px;align-items:stretch;
  background:rgba(26,16,64,.96);border:2px solid rgba(255,255,255,.28);
  border-radius:20px;padding:28px 32px;box-shadow:0 10px 40px rgba(0,0,0,.55);
  max-width:min(420px,90vw);}
.a11y-pause-title{font-size:1.7rem;font-weight:bold;color:#FFD700;
  text-align:center;margin-bottom:4px;}
.a11y-pause-btn{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;min-height:62px;padding:0 26px;border-radius:16px;
  border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  color:#fff;font-weight:bold;font-size:1.15rem;cursor:pointer;}
.a11y-pause-btn:hover{background:rgba(255,255,255,.2);}
.a11y-pause-btn .af{position:absolute;left:0;top:0;height:100%;width:0;
  background:rgba(255,255,255,.3);pointer-events:none;}
.a11y-pause-btn span{position:relative;}

/* Belt-and-braces: if a child's device asks for reduced motion, honour it from
   the first painted frame rather than waiting for a11y.js to add body.rm.
   An explicit in-game choice still wins, because body.rm / body:not(.rm) is
   applied by script and lands later in the cascade. */
@media (prefers-reduced-motion: reduce){
  body:not(.a11y-motion-full) *{animation-duration:.001s!important;transition-duration:.001s!important;}
}

/* Dwell fill for site-navigation links (injected by a11y.js's nav-dwell
   upgrade — see the comment there). A soft overlay works on every card/button
   background this ships against, light or dark. */
.a11y-nav-fill{position:absolute;inset:0;width:0;height:100%;
  background:rgba(255,255,255,.32);pointer-events:none;border-radius:inherit;
  z-index:1;}

/* Universal "just activated" confirmation, applied by dwellOrClick()'s
   fire() to every control site-wide — see the comment there. filter-only,
   deliberately no transform, so it never fights a button's own hover/press
   transform. Reduced motion is already handled by the global
   animation-duration squash above. */
@keyframes a11yActivatePulse{
  0%{filter:brightness(1.7) saturate(1.35);}
  100%{filter:brightness(1) saturate(1);}
}
.a11y-activated{animation:a11yActivatePulse .25s ease-out;}