.batyr-comic-menu {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #080706;
  color: #eee7db;
  font-family: Impact, 'Arial Narrow', sans-serif;
  pointer-events: auto;
}

.batyr-comic-menu[hidden] { display: none; }

.batyr-comic-canvas {
  position: relative;
  width: min(100vw, 177.683vh);
  height: min(100vh, 56.32vw);
  aspect-ratio: 1672 / 941;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: #181512;
  isolation: isolate;
}

.batyr-comic-background,
.batyr-comic-backdrop-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.batyr-comic-background { z-index: 0; object-fit: fill; }

/* Let the logo and the demon read clearly while quieting the lower walls and floor. */
.batyr-comic-backdrop-shade {
  z-index: 1;
  background:
    radial-gradient(ellipse 37% 39% at 75% 56%, transparent 12%, rgba(0, 0, 0, .08) 64%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg, transparent 0 33%, rgba(0, 0, 0, .11) 49%, rgba(0, 0, 0, .28) 100%);
}

/* Artwork and its matching HTML hit targets share one transform and one coordinate system. */
.batyr-comic-menu-stack {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translate(1.2%, 16%) scale(.84);
  transform-origin: top left;
}

.batyr-comic-default,
.batyr-comic-active-art,
.batyr-comic-actions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.batyr-comic-default,
.batyr-comic-active-art,
.batyr-comic-active-image {
  pointer-events: none;
}

.batyr-comic-default { z-index: 0; object-fit: fill; }
.batyr-comic-active-art { z-index: 1; }
.batyr-comic-actions { z-index: 2; }
.batyr-comic-clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.batyr-comic-active-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity .12s ease-out;
}

.batyr-comic-active-image.visible { opacity: 1; }

.batyr-comic-hotspot {
  position: absolute;
  display: block;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.batyr-comic-hotspot:focus-visible {
  outline: none;
}

.batyr-comic-notice {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  padding: .65rem .9rem;
  background: #151311;
  border: 1px solid #ff2020;
  color: #fff;
  font: 700 clamp(11px, 1.2vw, 16px)/1.3 Arial, sans-serif;
}

.batyr-comic-compendium {
  position: absolute;
  z-index: 7;
  inset: 5% 6%;
  padding: clamp(12px, 2vw, 30px);
  background: rgba(17, 15, 14, .96);
  border: 2px solid #b82027;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .45);
  font-family: Arial, sans-serif;
}

.batyr-comic-compendium[hidden] { display: none; }
.batyr-comic-compendium header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #59403d; padding-bottom: .8rem; }
.batyr-comic-compendium small { color: #ef3a40; letter-spacing: .14em; }
.batyr-comic-compendium h1 { margin: .25rem 0; font: 900 clamp(18px, 2vw, 30px)/1 Impact, 'Arial Narrow', sans-serif; letter-spacing: .06em; }
.batyr-comic-compendium button { padding: .5rem .8rem; background: #241d1a; color: #eee; border: 1px solid #8f2629; cursor: pointer; font-weight: 700; }
.batyr-comic-compendium button.active { background: #8f181f; }
.batyr-comic-compendium > nav { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 0; }
.batyr-comic-compendium-content { display: grid; height: calc(100% - 100px); grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); align-content: start; gap: .65rem; overflow: auto; }
.batyr-comic-compendium-content article { padding: .75rem; background: #24201d; border-left: 3px solid #b82228; }
.batyr-comic-compendium-content article small { color: #f04b50; text-transform: uppercase; }
.batyr-comic-compendium-content h2 { margin: .4rem 0; font-size: 1rem; }
.batyr-comic-compendium-content p { margin: .25rem 0; color: #c9c0b3; font-size: .86rem; line-height: 1.4; }
.batyr-comic-compendium-content > p { color: #d4cbbf; }

@media (max-aspect-ratio: 1 / 1) {
  .batyr-comic-canvas { width: 100vw; height: 56.32vw; max-height: 75vh; }
  .batyr-comic-menu-stack { transform: translate(1.2%, 16%) scale(.84); }
  .batyr-comic-compendium { inset: 2%; }
  .batyr-comic-compendium-content { height: calc(100% - 115px); }
}

@media (prefers-reduced-motion: reduce) {
  .batyr-comic-active-image { transition: none; }
}

.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) { background: transparent !important; }
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .batyr-start-art,
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .batyr-start-vignette,
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .batyr-start-menu,
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .batyr-menu-window,
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .batyr-pause-menu,
.batyr-start-overlay.batyr-comic-active.menu-open:not(.settings-open):not(.pause-open) > .freecam-play-button { display: none !important; }

.batyr-start-overlay.batyr-comic-active.menu-open > .batyr-menu-name { display: none !important; }