/* Creatures & Heroes — V12 visibility, brand hover and notice sizing. */

/* Reveal more of the artwork behind every custom and native selector. */
.cah-select-toggle,
.creator .cah-select-toggle,
.heroes-toolbar .cah-select-toggle,
.rune-language-toggle,
select {
  background: rgba(7, 20, 17, .015) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.04) !important;
  backdrop-filter: blur(3px) saturate(1.04) !important;
}

.cah-select-menu,
.creator .cah-select-menu,
.heroes-toolbar .cah-select-menu,
.rune-language-menu {
  background: rgba(7, 20, 17, .015) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
}

.cah-select-option,
.rune-language-menu button,
select option {
  background-color: rgba(7, 20, 17, .035) !important;
}

/* Highlight only the Creatures & Heroes words; the shield stays unchanged. */
.topbar .brand b,
.codex-topbar .brand b {
  transition: color .18s ease, text-shadow .18s ease, font-weight .18s ease;
}

.topbar .brand:hover b,
.topbar .brand:focus-visible b,
.codex-topbar .brand:hover b,
.codex-topbar .brand:focus-visible b {
  color: #f5d26f !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 5px rgba(245, 210, 111, .95),
    0 0 14px rgba(226, 184, 73, .72),
    0 0 26px rgba(200, 164, 94, .38) !important;
}

/* Approximately 30% smaller than V11, including responsive layouts. */
.development-notice {
  gap: 13px !important;
  width: min(504px, calc(100vw - 36px)) !important;
  min-height: 217px !important;
  padding: clamp(31px, 4.2vw, 50px) !important;
  border-radius: 13px !important;
}

.development-notice::before {
  border-radius: 8px !important;
  inset: 8px !important;
}

.development-notice h2 {
  font-size: clamp(21px, 2.94vw, 36px) !important;
}

.development-notice p {
  max-width: 399px !important;
  font-size: clamp(11px, 1.05vw, 13px) !important;
}

.development-notice__status {
  gap: 6px !important;
  font-size: 8px !important;
}

.development-notice__close {
  width: 30px !important;
  height: 30px !important;
  font-size: 22px !important;
  top: 11px !important;
  right: 12px !important;
}

@media (max-width: 720px) {
  .development-notice {
    width: min(88vw, 504px) !important;
    min-height: 252px !important;
    padding: 38px 20px 27px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand b,
  .codex-topbar .brand b {
    transition: none !important;
  }
}

/* V20: black 3D stage with a gently floating, hoverable figure. */
.model-turntable {
  background: #000 !important;
  border-radius: 12px !important;
  isolation: isolate;
  overflow: hidden !important;
}

.model-turntable .model-figure {
  animation: cahModelFloat 3.8s ease-in-out infinite !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 85% auto !important;
  border-radius: inherit !important;
  filter: none !important;
  inset: 0 !important;
  transition: background-size 320ms ease, filter 320ms ease !important;
  will-change: transform, background-size;
}

@keyframes cahModelFloat {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-7px);
  }
}

.model-turntable:hover .model-figure,
.model-turntable:focus-within .model-figure {
  animation-play-state: paused !important;
  background-size: 100% auto !important;
  filter: drop-shadow(0 10px 14px rgba(218, 176, 79, 0.22)) !important;
}

/* The new gray figures already include their own base. */
.model-turntable > i {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .model-turntable .model-figure {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}