:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #000; }
body { overflow: hidden; }
.alley-scene { position: relative; width: 100vw; height: 100svh; overflow: hidden; background: #000; }
#alley-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  margin: 0;
  color: #fff;
  font-family: Consolas, 'Segoe UI Symbol', monospace;
  font-size: min(.595vw, 11.43px);
  font-weight: 700;
  line-height: 1;
  white-space: pre;
  transform: translate(-50%, -50%);
  transform-origin: center;
  user-select: none;
}
@media (max-width: 600px) {
  #alley-art { font-size: min(1.1svh, 11.43px); }
}

#alley-art .doorknob { color: #fff3b0; text-decoration: none; cursor: pointer; }
#alley-art .doorknob:hover,
#alley-art .doorknob:focus-visible { color: #fff9d5; text-shadow: 0 0 .6em #fff3b0; }
#alley-art .doorknob:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }

.character-scene { width: 100vw; height: 100svh; overflow: hidden; background: #000; display: grid; place-items: center; }
#character-art {
  margin: 0;
  color: #fff;
  font-family: Consolas, 'Segoe UI Symbol', monospace;
  font-size: min(1.1svh, 1.5vw, 12.5px);
  font-weight: 700;
  line-height: 1;
  white-space: pre;
  user-select: none;
}

#character-art .eye-pupil,
#character-art .eye-pupil:link,
#character-art .eye-pupil:visited { color: #fff; text-decoration: none; cursor: pointer; }
#character-art .eye-pupil:hover,
#character-art .eye-pupil:focus-visible { color: #fff; text-shadow: 0 0 .55em rgba(255,255,255,.55); }
#character-art .eye-pupil:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }