/*
 * Presentation for the hero-reaction module (hero-reaction.js): the
 * canvas overlay and accessible skirt/chest buttons placed inside
 * .side-hat over each daytime French-maid portrait. Its inner
 * picture remains the owner of responsive static artwork.
 * The container inherits pointer-events: none from .side-hat, so the
 * button re-enables pointer-events for itself only; canvas stays an
 * inert drawing surface. Both elements are display: none until
 * hero-reaction.js adds .is-visible after the sprite sheet decodes,
 * so a failed asset leaves the page looking exactly as before.
 * Default button geometry targets the skirt band: 8%–90% of the container's
 * width and 46%–65% of its height. hero-reaction-renderer.js registers chest
 * bounds per pose and hero-reaction-input.js applies them as inline geometry.
 * hero-maid-poses.js owns the source
 * frame and foot registration contract. The canvas extends half a portrait
 * width on either side so wider leg stances fit at the same body height;
 * its drawing buffer uses the matching canvasWidthRatio of 2.
 */

.side-hat > picture { display: block; }

.hero-reaction-canvas[hidden],
.hero-reaction-button[hidden] { display: none; }

.hero-reaction-canvas {
  position: absolute;
  inset: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  display: none;
  pointer-events: none;
}

.hero-reaction-canvas.is-visible:not([hidden]) {
  display: block;
}

.hero-reaction-button {
  position: absolute;
  left: 8%;
  width: 82%;
  top: 46%;
  height: 19%;
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: inherit;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.hero-reaction-button.is-visible:not([hidden]) {
  display: inline-block;
}

.hero-reaction-button:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: -2px;
  border-radius: 4px;
}