/* ============================================================
   Invisible accessibility layer for the Exquisite Corpse
   Experience. Nothing in this file changes how the page looks
   or behaves for mouse/visual users:

   - .ec-a11y-hotspot buttons sit exactly on top of the canvas's
     own clickable buttons so keyboard/screen-reader users can
     reach them, but are fully transparent (no fill, border, or
     visible text) and draw no focus ring of their own -- assistive
     tech already shows its own focus indicator when one of these
     is focused, so adding a second one here would just double up.
   - .ec-a11y-sr-only hides the live-announcement region from the
     screen entirely while keeping it readable by screen readers.
   ============================================================ */

.ec-a11y-hotspot {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	/* Matches the round (top/mid/bot) and pill-shaped (expunge) canvas
	   buttons underneath: 9999px always clamps to half of whichever
	   side is smaller, so this is a circle on the square hotspots and
	   a stadium/pill on the wide expunge one. Used so the focus
	   indicator below can hug the actual button shape instead of
	   drawing a big rectangle around it. */
	border-radius: 9999px;
	background: transparent;
	color: transparent;
	font-size: 1px;
	line-height: 0;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	/* Without this, touch browsers wait ~300ms after a tap before
	   firing click (in case it turns into a double-tap-to-zoom
	   gesture), which reads as a small delay before anything
	   happens. "manipulation" tells the browser this element never
	   needs double-tap/pinch zoom, so taps register immediately. */
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.ec-a11y-hotspot:disabled {
	cursor: default;
	pointer-events: none;
}

.ec-a11y-hotspot:focus {
	outline: none;
}

.ec-a11y-hotspot:active {
	/* Explicitly re-assert transparency on press. Some browsers
	   (notably Safari) briefly render a native "pressed button"
	   appearance -- a flash of white/gray -- on :active even with
	   appearance:none set above, since that default can momentarily
	   reassert itself for the real UA-controlled press state. This
	   guarantees press never shows anything. */
	background: transparent;
	box-shadow: none;
	outline: none;
}

.ec-a11y-hotspot:focus-visible {
	/* A deliberately subtle ring -- thin and semi-transparent, not
	   the bold solid ring used before. Assistive tech (VoiceOver,
	   "full keyboard access", etc.) already draws its own, more
	   prominent focus indicator, so this stays quiet to avoid
	   doubling up with that. It still exists for a sighted
	   keyboard-only user with no assistive tech running, who would
	   otherwise have no visible focus indicator at all on these
	   transparent buttons (required by WCAG 2.4.7). */
	outline: none;
	box-shadow: 0 0 0 1px rgba(11, 94, 215, 0.55);
}

/* Positioned directly over the instructional title/paragraphs/credit
   line that's drawn as pixels on the canvas (see INTRO_TEXT_BOX in
   accessibility.js). The text itself is real (readable by screen
   readers) but stays fully invisible -- same transparent-text trick
   as .ec-a11y-hotspot above -- so nothing changes for a sighted mouse
   user. The only visible effect is the same focus-visible box used
   for the buttons, drawn over this text block specifically, so a
   keyboard user can see which part of the canvas is currently being
   read instead of a box appearing with nothing nearby. */
.ec-a11y-text-hotspot {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	color: transparent;
	background: transparent;
	cursor: default;
	pointer-events: none;
	-webkit-tap-highlight-color: transparent;
}

.ec-a11y-text-hotspot * {
	color: transparent;
	margin: 0;
	padding: 0;
}

.ec-a11y-text-hotspot:focus {
	outline: none;
}

.ec-a11y-text-hotspot:focus-visible {
	outline: none;
	/* A gentle rounded rectangle (rather than the pill/circle used for
	   the round buttons) -- this is a block of paragraphs, not a
	   button, so a subtle rectangular box reads more naturally. */
	border-radius: 6px;
	box-shadow: 0 0 0 2px #0b5ed7;
}

.ec-a11y-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}