/* pixel-actor: stage + speech bubble styles. Retheme with the --pa-* variables on any ancestor. */
.pa-host {
  --pa-bubble-bg: #fff8ea;
  --pa-bubble-ink: #1a1418;
  --pa-bubble-line: #1a1418;
  --pa-name-ink: #b3261a;
  --pa-bubble-font: 500 14px/1.38 ui-monospace, monospace;
  --pa-name-font: 700 10px/1 ui-monospace, monospace;
  position: relative;
  overflow: hidden;
  contain: layout paint;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.pa-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.pa-layer { position: absolute; inset: 0; pointer-events: none; }

/* speech bubble: notched pixel border from four hard shadows, a stepped tail, a block caret */
.pa-bubble {
  position: absolute;
  left: 0;
  top: 0;
  max-width: min(280px, calc(100% - 16px));
  width: max-content;
  padding: 8px 11px 9px;
  background: var(--pa-bubble-bg);
  color: var(--pa-bubble-ink);
  font: var(--pa-bubble-font);
  overflow-wrap: anywhere;
  box-shadow:
    0 -3px 0 0 var(--pa-bubble-line), 0 3px 0 0 var(--pa-bubble-line),
    -3px 0 0 0 var(--pa-bubble-line), 3px 0 0 0 var(--pa-bubble-line),
    0 7px 0 0 rgba(0, 0, 0, 0.28);
  transform-origin: var(--pa-tail-x, 50%) 100%;
  will-change: transform;
}
.pa-name {
  display: block;
  margin-bottom: 4px;
  font: var(--pa-name-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-name-ink);
}
.pa-caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: currentColor;
  animation: pa-blink 0.55s steps(1) infinite;
}
.pa-done .pa-caret { opacity: 0; animation: none; }
.pa-tail { position: absolute; top: 100%; left: var(--pa-tail-x, 50%); width: 0; height: 0; }
.pa-tail::before, .pa-tail::after { content: ''; position: absolute; top: 0; }
.pa-tail::before {
  left: -7px; width: 14px; height: 12px;
  background: var(--pa-bubble-line);
  clip-path: polygon(0 0, 14px 0, 14px 3px, 12px 3px, 12px 6px, 10px 6px, 10px 9px, 8px 9px, 8px 12px, 6px 12px, 6px 9px, 4px 9px, 4px 6px, 2px 6px, 2px 3px, 0 3px);
}
.pa-tail::after {
  left: -4px; width: 8px; height: 6px;
  background: var(--pa-bubble-bg);
  clip-path: polygon(0 0, 8px 0, 8px 3px, 6px 3px, 6px 6px, 2px 6px, 2px 3px, 0 3px);
}
.pa-in { animation: pa-pop 0.16s steps(3) both; }
.pa-out { animation: pa-close 0.24s steps(3) forwards; }
@keyframes pa-pop { from { scale: 0.7; } to { scale: 1; } }
@keyframes pa-close { to { scale: 0.75; opacity: 0; } }
@keyframes pa-blink { 50% { opacity: 0; } }

/* one invisible, focusable button per actor (keyboard + screen readers); the focus ring is drawn in the canvas */
.pa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pa-in, .pa-out, .pa-caret { animation: none; }
}