.character-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
}
.character-screen[hidden] { display: none; }
.character-video,
.character-still,
.character-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.character-video, .character-still { object-fit: contain; }
.character-still[hidden] { display: none; }
.character-art { z-index: 1; opacity: 0; transition: opacity 400ms ease; }
.character-screen[data-phase="selecting"] .character-art,
.character-screen[data-phase="ready"] .character-art { opacity: 1; }
.character-screen:not([data-phase="selecting"]):not([data-phase="ready"]) .character-ink { visibility: hidden; }
.character-screen:not([data-phase="selecting"]) .character-control { visibility: hidden; }
.character-art[hidden] { display: none; }
.character-ink { position: absolute; z-index: 1; pointer-events: none; opacity: 0; }
.character-ink[hidden] { display: none; }
.character-control {
  position: absolute;
  z-index: 2;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.character-control:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.character-previous { left: 31%; top: 64.5%; width: 8%; height: 5%; }
.character-next { left: 61%; top: 64.5%; width: 8%; height: 5%; }
.character-ready { left: 27.2%; top: 72.9%; width: 45.6%; height: 5.1%; }
.character-ready:disabled { cursor: wait; }
.character-control:disabled { pointer-events: none; }
.character-playback-message {
  position: absolute;
  z-index: 3;
  top: 80%;
  left: 10%;
  width: 80%;
  text-align: center;
  color: #d0e9cb;
  font: 12px/1.5 system-ui, sans-serif;
}
.character-playback-message[hidden] { display: none; }
.character-playback-message button {
  display: block;
  margin: 6px auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #40b52b;
  background: #111;
  border-radius: 6px;
  color: #d0e9cb;
  cursor: pointer;
}
.character-playback-message button[hidden] { display: none; }
.character-screen .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}