@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/pixelify-sans-c3bda8b3.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.guide-dialogue {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 3px solid #fff;
  outline: 2px solid #000;
  background: #000;
  color: #fff;
  font-family: "Pixelify Sans", ui-monospace, monospace;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5;
}

.guide-dialogue [hidden] { display: none !important; }
.guide-dialogue__portrait { position: relative; flex: 0 0 96px; width: 96px; height: 96px; pointer-events: none; }
.guide-dialogue__portrait img { position: absolute; inset: 0; width: 96px; height: 96px; max-width: none; margin: 0; border: 0; border-radius: 0; object-fit: contain; image-rendering: pixelated; }
.guide-dialogue__body { flex: 1; min-width: 0; }
.guide-dialogue__copy { position: relative; }
.guide-dialogue .guide-dialogue__line { margin: 0 0 .5rem; color: inherit; font: inherit; overflow-wrap: anywhere; }
.guide-dialogue .guide-dialogue__prefix { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.guide-dialogue .guide-dialogue__line:last-child { margin-bottom: 0; }
.guide-dialogue__visual { position: absolute; inset: 0; pointer-events: none; }
.guide-dialogue__text:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.guide-dialogue__skip {
  min-height: 44px;
  min-width: 44px;
  margin-top: .75rem;
  padding: .35rem .75rem;
  border: 2px solid #fff;
  border-radius: 0;
  background: #000;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.guide-dialogue__skip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (hover: hover) { .guide-dialogue__skip:hover { background: #fff; color: #000; } }

@media (prefers-reduced-motion: no-preference) {
  /* The complete, accessible text reserves its real height beneath a purely
     visual copy. Transparent ink stays in the accessibility tree. */
  .guide-dialogue--typing .guide-dialogue__text { color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-dialogue__visual, .guide-dialogue__skip { display: none !important; }
  .guide-dialogue__text { color: #fff; }
  .guide-dialogue__portrait [data-guide-target="talking"] { display: none !important; }
  .guide-dialogue__portrait [data-guide-target="idle"] { display: block !important; }
}
@media (max-width: 36rem) {
  .guide-dialogue { gap: .75rem; padding: .875rem; font-size: 1.25rem; }
  .guide-dialogue__portrait, .guide-dialogue__portrait img { width: 72px; height: 72px; }
  .guide-dialogue__portrait { flex-basis: 72px; }
}
@media (forced-colors: active) {
  .guide-dialogue { border-color: CanvasText; outline-color: CanvasText; background: Canvas; color: CanvasText; }
  .guide-dialogue__visual, .guide-dialogue__skip { display: none !important; }
  .guide-dialogue--typing .guide-dialogue__text { color: CanvasText; }
  .guide-dialogue__portrait [data-guide-target="talking"] { display: none !important; }
  .guide-dialogue__portrait [data-guide-target="idle"] { display: block !important; }
}