/* Each screen belongs to a place in the realm: armory, journal, atelier, archive. */
.realm-studio #detail .editor-sections button,
.realm-studio #detail .map-tool-toggle,
.realm-studio #reviewRelease {
  background: #292b42;
  border-color: #86718e;
  color: #e5dfed;
}
.realm-studio #detail .editor-sections button[aria-pressed="true"] {
  background: linear-gradient(135deg, #65523e, #403650);
  border-color: #e9c68e;
  color: #fff0cf;
}
.realm-studio #moreButton::before {
  color: transparent;
  --emblem-x: 66.6667%;
  --emblem-y: 100%;
}
.realm-game .sheet-heading {
  background: #24243b;
  border-bottom: 1px solid #82708f;
}
.realm-game #createDialog,
.realm-game #createForm,
.realm-game .creator-options {
  background: #1c2237;
}
.realm-game #settingsDialog > h2 {
  position: sticky;
  top: -24px;
  z-index: 3;
  background: #171c30;
  padding-top: 12px;
}
.realm-game:has(#graphicsEffects:not(:checked)) dialog[open] {
  animation: none;
}
.realm-game #dockMore > span {
  --emblem-x: 66.6667%;
  --emblem-y: 100%;
}
.realm-game .world-bar,
.realm-game .panel-heading,
.realm-studio .sheet-top {
  background:
    linear-gradient(120deg, #37304bec, #171b30f7),
    url("/assets/interface/realm-materials.png") left top/200% 200%;
  border-color: #82708f;
}
.realm-game .world-bar {
  box-shadow: inset 0 1px #f0cd8544;
}
.realm-game .eyebrow,
.realm-studio .eyebrow {
  color: #e0c18c;
}
.realm-game .art-switch,
.realm-studio .art-switch {
  background: #1f2237;
  border-color: #696080;
}
.realm-game .art-switch button,
.realm-studio .art-switch button {
  color: #d1d4e7;
}
.realm-game .art-switch button[aria-pressed="true"],
.realm-studio .art-switch button[aria-pressed="true"] {
  color: #fff0cd;
  background: linear-gradient(140deg, #6b533b, #3d3551);
}
.realm-game .creator-heading,
.realm-game .creator-footer {
  background: linear-gradient(120deg, #35304d, #161d32);
  border-color: #80708a;
}
.realm-game .creator-preview {
  background:
    radial-gradient(ellipse at 50% 75%, #6c609e55, transparent 65%),
    linear-gradient(#14192beb, #161d32f2),
    url("/assets/interface/realm-welcome.png") center/cover;
}
.realm-game .creator-orbit {
  border-color: #c9b377;
  box-shadow:
    0 0 0 8px #cfac6810,
    0 0 24px #7f9eff22,
    inset 0 0 20px #a7a9e922;
}
.realm-game #createDialog .creator-facing button,
.realm-game #createDialog .creator-channels button,
.realm-game #createDialog .creator-swatches button {
  background: #24273e;
  border-color: #68617f;
  color: #e9e2d6;
}
.realm-game #createDialog .creator-facing button[aria-pressed="true"],
.realm-game #createDialog .creator-channels button[aria-pressed="true"],
.realm-game #createDialog .creator-swatches button[aria-pressed="true"] {
  border-color: #eed19b;
  background: #4b405a;
  color: #fff0ce;
}
.realm-game .color-dot {
  box-shadow:
    inset 0 0 0 2px #ffffff5c,
    0 0 0 2px #0a1020,
    0 3px 8px #0008;
}
.realm-game #portraitCanvas {
  background: radial-gradient(ellipse, #74648a50, #161d31 75%);
  border: 1px solid #ad8a71;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 4px #161c30,
    0 4px 20px #0004;
}
.realm-game #characterStats,
.realm-game #equipment {
  padding: 12px;
  border: 1px solid #635975;
  border-radius: 10px;
  background: #222337;
  line-height: 1.6;
}
.realm-game .held-item {
  background: linear-gradient(110deg, #44354e, #232338);
  border: 1px solid #a48c69;
  border-radius: 14px;
  padding: 10px;
}
.realm-game #inventory button {
  background:
    radial-gradient(ellipse at 50% 80%, #62506a44, transparent 65%),
    linear-gradient(#27233bf2, #191d30f5),
    url("/assets/interface/realm-materials.png") right top/200% 200%;
  border-color: #73617e;
  box-shadow:
    inset 0 0 0 2px #111629,
    inset 0 -4px 10px #0005;
}
.realm-game #inventory button:focus-visible {
  border-color: #f0cc83;
}
.realm-game #bagCapacity {
  color: #f1d193;
  border-color: #998260;
  background: #332a3b;
}
.realm-game #messages {
  background:
    linear-gradient(#151b2bea, #1c2031f5),
    url("/assets/interface/realm-materials.png") left bottom/200% 200%;
  border-radius: 12px;
}
.realm-game .chat-help {
  color: #c8c4d6;
}
.realm-game #settingsDialog fieldset {
  border: 1px solid #69617e;
  border-radius: 12px;
  padding: 14px;
  background: #21243980;
}
.realm-game #settingsDialog legend {
  color: #e6c990;
  font-family: Georgia, serif;
  padding: 0 8px;
}
.realm-game input[type="checkbox"],
.realm-studio input[type="checkbox"],
.realm-game meter {
  accent-color: #cfb273;
}
.realm-game #settingsDialog > label {
  padding: 10px 4px;
  min-height: 44px;
  box-sizing: border-box;
}
.realm-game #settingsDialog > h2,
.realm-game #characterDialog > h2,
.realm-game #editorDialog > h2,
.realm-game #dialogTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #8b7387;
}
.realm-game #settingsDialog > h2::before,
.realm-game #characterDialog > h2::before,
.realm-game #editorDialog > h2::before,
.realm-game #dialogTitle::before {
  content: "";
  width: 48px;
  height: 48px;
  flex: none;
  background: url("/assets/interface/realm-emblems.png")
    var(--heading-x, 66.6667%) var(--heading-y, 100%) / 400% 300%;
}
#characterDialog {
  --heading-x: 33.3333%;
  --heading-y: 0%;
}
#editorDialog {
  --heading-x: 66.6667%;
  --heading-y: 50%;
}
#gameDialog {
  --heading-x: 0%;
  --heading-y: 50%;
}
#gameDialog[data-kind="shop"] {
  --heading-x: 33.3333%;
  --heading-y: 100%;
}
.realm-game #dialogBody button {
  width: 100%;
  min-height: 56px;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0;
  padding: 12px;
  line-height: 1.5;
}
.realm-game .shop-item-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 9px;
  background: #141a2c;
  border: 1px solid #927a66;
}
.realm-game .editor-toolbar,
.realm-game .editor-brush {
  background: #25263d;
  border-color: #786887;
}
.realm-game .editor-scroll,
.realm-studio .map-canvas,
.realm-studio .placement-map {
  border: 1px solid #9d8595;
  box-shadow: inset 0 0 0 2px #151a2d;
}
.realm-studio {
  --section-accent: #c4a1df;
}
.realm-studio[data-section="maps"] {
  --section-accent: #9dd1b3;
}
.realm-studio[data-section="shops"] {
  --section-accent: #edc681;
}
.realm-studio[data-section="npcs"] {
  --section-accent: #92c7ed;
}
.realm-studio[data-section="quests"] {
  --section-accent: #dbb18c;
}
.realm-studio .entry {
  border-color: #635c7a;
  border-left: 3px solid var(--section-accent);
  background: linear-gradient(120deg, #333047, #20253a);
}
.realm-studio .entry small {
  color: #c5c8db;
}
.realm-studio .entry:hover {
  border-color: var(--section-accent);
  background: #39354f;
}
.realm-studio .form-section,
.realm-studio .offer-card {
  background:
    linear-gradient(#26263ceb, #1e2236f2),
    url("/assets/interface/realm-materials.png") left bottom/200% 200%;
  border-color: #6d607d;
  border-radius: 14px;
  box-shadow:
    inset 0 1px #e6c99318,
    0 4px 14px #0002;
}
.realm-studio .form-section h3,
.realm-studio .offer-card summary {
  color: #f0d7ad;
}
.realm-studio .offer-card[open] {
  border-color: #d0ab70;
}
.realm-studio .offer-card summary canvas {
  background: #1a1b2d;
  border: 1px solid #756077;
}
.realm-studio .npc-live-preview {
  background: radial-gradient(ellipse at 50% 80%, #8271a35c, #171c30 75%);
  border-color: #9981a2;
  box-shadow: inset 0 0 25px #b4a0e512;
}
.realm-studio .player-speech {
  background: #34415e;
  border: 1px solid #617899;
  color: #eaf1ff;
}
.realm-studio .npc-speech {
  background: #413450;
  border: 1px solid #927899;
  color: #f4e7f8;
}
.realm-studio .studio-ready,
.realm-studio .editor-section-body {
  color: #ebe7f0;
}
.realm-studio .map-palette,
.realm-studio .map-palette > .brush-categories {
  background: linear-gradient(145deg, #353048, #1c2438);
  border-color: #978393;
}
.realm-studio .choose-map-brush,
.realm-studio .map-toolbar,
.realm-studio .map-quick-tools {
  background: #22263de8;
  border-color: #85748d;
}
.realm-studio .art-card {
  background:
    radial-gradient(ellipse at 50% 80%, #67537044, transparent), #1b2033;
  border-color: #6b607e;
}
.realm-studio .art-card:hover {
  background: #383349;
}
.realm-studio.studio-ready #tabs button {
  background: #22273c;
  color: #dfdce8;
  border-color: #675e7a;
}
.realm-studio.studio-ready #tabs button[aria-pressed="true"] {
  background: linear-gradient(140deg, #65513e, #38304e);
  color: #fff0d0;
  border-color: #e5bc7a;
  box-shadow: 0 0 14px #d4ad5420;
}
.realm-studio.studio-ready .actions {
  background: #171d30f5;
  border-color: #8b748b;
}
.realm-studio #saveDraft {
  background: linear-gradient(135deg, #70563c, #463d54);
  color: #fff2d3;
  border-color: #e0bc7d;
}
.realm-studio .notice,
.realm-studio #status,
.realm-studio .context {
  background: #24273b;
  border-color: #69617c;
  color: #d9d8e7;
}
.realm-studio .metrics div {
  background: #29263e;
  border-color: #746583;
}
.realm-studio .metrics strong {
  color: #ebce96;
}
.realm-studio .release-step {
  border-color: #c5a66d;
}
.realm-studio #moreSections button {
  background: linear-gradient(135deg, #3a314c, #242a40);
  border-color: #89748c;
  color: #f0e5d5;
}
.realm-game button:disabled,
.realm-studio button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
@keyframes realm-touch {
  0% {
    box-shadow:
      inset 0 0 0 2px #efd6a3,
      0 0 12px #e5b96e55;
  }
  100% {
    box-shadow:
      inset 0 0 0 0 transparent,
      0 0 0 transparent;
  }
}
.realm-pressed {
  animation: realm-touch 360ms ease-out;
}
@keyframes realm-arrive {
  from {
    opacity: 0.6;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.realm-game dialog[open],
.realm-studio dialog[open] {
  animation: realm-arrive 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .realm-pressed,
  .realm-game dialog[open],
  .realm-studio dialog[open] {
    animation: none !important;
  }
}