/* Always-on layout so a missed Tailwind/HMR inject cannot blow up images or the board. */
html,
body {
  margin: 0;
  background: #f4e9d4;
  color: #1a1612;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.cm-hero {
  width: 100% !important;
  max-height: min(42vh, 420px) !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center 35% !important;
}
.cm-portrait {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: cover !important;
  object-position: top center !important;
  flex-shrink: 0 !important;
  border-radius: 12px;
}
[role="grid"][aria-label="Chessboard"] {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
  width: min(100%, 72vh) !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
}
[role="grid"][aria-label="Chessboard"] > * {
  min-width: 0;
  min-height: 0;
}