@font-face {
  font-family: "Departure Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("src/assets/fonts/DepartureMono-Regular.woff2") format("woff2");
}
:root { color-scheme: dark; --background: #171717; --foreground: #ebebeb; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--background); -webkit-font-smoothing: antialiased; }
body {
  min-height: 100svh;
  background: transparent;
  color: var(--foreground);
  font-family: "Departure Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.4286;
}
h1 { font-size: inherit; font-weight: inherit; }
body::before { position: fixed; z-index: -1; inset: 0; background: var(--background); opacity: 0.3; content: ""; pointer-events: none; }
::selection { background-color: var(--foreground); color: var(--background); }
.chroma-canvas {
  position: fixed; z-index: -2;
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: calc(-1 * env(safe-area-inset-left, 0px));
  display: block;
  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: 100vh;
  height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
}
.chroma-fade { opacity: 0; pointer-events: none; }
.baffle { white-space: pre-line; }
.page-grid {
  display: grid; height: 100svh; text-align: center; text-transform: uppercase;
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  grid: "avatar" auto "name" auto "role" auto "details" 1fr / 1fr;
}
.avatar-cell { grid-area: avatar; }
.name-cell { grid-area: name; }
.role-cell { grid-area: role; }
.details-cell { grid-area: details; margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }
.reroll {
  display: block; margin: 0 auto 1rem; cursor: pointer; appearance: none;
  border: 0; background: transparent; padding: 0; border-radius: 9999px; color: inherit; font: inherit;
}
.avatar {
  position: relative; display: block; width: 4rem; aspect-ratio: 128 / 171;
  transform: rotate(-2deg); opacity: 0.85; mix-blend-mode: luminosity;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 75ms, opacity 75ms, filter 75ms;
}
.reroll:hover .avatar { transform: rotate(0); opacity: 1; }
.reroll:active .avatar { transform: scale(0.98); }
.avatar img { display: block; width: 100%; height: auto; }
.avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
@media (min-width: 64rem) {
  .page-grid { text-align: left; grid: "name role" minmax(0, 1fr) "avatar details" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); }
  .avatar-cell { margin-top: auto; }
  .reroll { margin: 0; }
}