/* DragonSpires: carved violet marble, moonlight and warm brass. */
.realm-game .play-dock button > span {
  width: 34px;
  height: 34px;
  background: url("assets/interface/realm-emblems.png") var(--emblem-x, 0%)
    var(--emblem-y, 0%) / 400% 300%;
  filter: drop-shadow(0 2px 3px #0008);
}
.realm-game .play-dock button > span svg {
  visibility: hidden;
}
#dockJournal {
  --emblem-x: 0%;
  --emblem-y: 50%;
}
#dockInventory {
  --emblem-x: 66.6667%;
  --emblem-y: 0%;
}
#dockSelf {
  --emblem-x: 33.3333%;
  --emblem-y: 0%;
}
#dockMore {
  --emblem-x: 66.6667%;
  --emblem-y: 100%;
}
.realm-studio #tabs button::before,
.realm-studio #moreSections button::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  background: url("assets/interface/realm-emblems.png") var(--emblem-x, 0%)
    var(--emblem-y, 0%) / 400% 300%;
}
.realm-studio #tabs button svg,
.realm-studio #moreSections button svg {
  display: none;
}
.realm-studio [data-tab="stories"] {
  --emblem-x: 100%;
  --emblem-y: 0%;
}
.realm-studio [data-tab="quests"] {
  --emblem-x: 100%;
  --emblem-y: 50%;
}
.realm-studio [data-tab="shops"] {
  --emblem-x: 33.3333%;
  --emblem-y: 100%;
}
.realm-studio [data-tab="npcs"] {
  --emblem-x: 0%;
  --emblem-y: 100%;
}
.realm-studio [data-tab="maps"] {
  --emblem-x: 66.6667%;
  --emblem-y: 50%;
}
.realm-studio [data-tab="art"] {
  --emblem-x: 33.3333%;
  --emblem-y: 0%;
}
.realm-studio [data-tab="files"] {
  --emblem-x: 66.6667%;
  --emblem-y: 100%;
}
.realm-studio [data-tab="releases"] {
  --emblem-x: 100%;
  --emblem-y: 100%;
}
.realm-game .vitals > div {
  border-color: #696080;
  background: linear-gradient(135deg, #323048, #171d30);
  box-shadow: inset 0 1px #f3d6a322;
}
.realm-game #hp {
  color: #ffa699;
  text-shadow: 0 0 12px #dc52614a;
}
.realm-game #mp {
  color: #a9d8ff;
  text-shadow: 0 0 12px #438de76b;
}
.realm-game #gold {
  color: #f7d17d;
}
.realm-game .artwork-choice {
  border-color: #766987;
  background: #24213a;
}
.realm-dialog-heading {
  position: sticky;
  top: -18px;
  z-index: 2;
  padding: 12px 0;
  background: #171c30f5;
  border-bottom: 1px solid #86718c;
}
:root {
  --bg: #0c1020;
  --panel: #171b31;
  --line: #535374;
  --muted: #bec4db;
  --gold: #f0cc83;
  --mint: #a6decf;
  --sky: #a9cafa;
}
body.realm-game,
body.realm-studio {
  color: #f4f0e6;
  background:
    radial-gradient(ellipse at top left, #33305b, transparent 65%), #0c1020;
}
.realm-game button,
.realm-studio button {
  border-color: #696080;
  border-radius: 10px;
  color: #f4eddf;
  background: linear-gradient(145deg, #39374f, #20233a);
  box-shadow:
    inset 0 1px #ffffff15,
    0 2px 4px #0004;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.realm-game button:hover,
.realm-studio button:hover {
  border-color: #e5bf79;
  background: linear-gradient(145deg, #49445f, #292d46);
}
.realm-game button:active,
.realm-studio button:active {
  transform: translateY(1px);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f0cc83;
  outline-offset: 3px;
}
.realm-game input,
.realm-game select,
.realm-game textarea,
.realm-studio input,
.realm-studio select,
.realm-studio textarea {
  background: #11172b;
  border-color: #64627f;
  color: #f7f1e6;
  font-size: 16px;
}
.realm-game dialog,
.realm-studio dialog,
.realm-game .panel,
.realm-studio .panel {
  border: 1px solid #9781a0;
  border-radius: 18px;
  background:
    linear-gradient(#13192de8, #171c30f2),
    url("assets/interface/realm-materials.png") left top/200% 200%;
  box-shadow:
    inset 0 1px #ead4a43d,
    0 16px 64px #0009;
  color: #f4f0e6;
}
dialog::backdrop {
  background: #060a19b8;
  backdrop-filter: blur(5px);
}
.realm-game h1,
.realm-game h2,
.realm-studio h1,
.realm-studio h2 {
  font-family: Georgia, serif;
  color: #f6dfae;
  letter-spacing: 0.02em;
}
.realm-game .brand,
.realm-studio .brand {
  color: #f4d18c;
  text-shadow: 0 2px 6px #000;
}
.realm-game .sigil,
.realm-studio .sigil {
  object-fit: contain;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 6px #759cdd50);
}
.realm-game .gold,
.realm-studio .gold,
.realm-game button[aria-pressed="true"],
.realm-studio button[aria-selected="true"] {
  color: #fff2d2;
  border-color: #d0ad69;
  background: linear-gradient(135deg, #665037, #30304c);
}
.realm-welcome-banner {
  height: 150px;
  margin: -1px -1px 18px;
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 4px 4px;
  background:
    linear-gradient(0deg, #151b30, transparent 60%),
    url("assets/interface/realm-welcome.png") center 43% / cover;
  border-bottom: 1px solid #ad8a57;
}
.realm-welcome-banner img {
  position: absolute;
  width: 82px;
  height: 96px;
  object-fit: contain;
  bottom: 2px;
  left: calc(50% - 41px);
  filter: drop-shadow(0 4px 12px #000);
}
.realm-welcome-glow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px #738ef626;
  pointer-events: none;
}
#loginDialog {
  width: min(480px, calc(100vw - 24px));
  padding: 20px;
}
#loginDialog h2 {
  margin: 8px 0;
  text-align: center;
  font-size: 29px;
}
#loginDialog .intro {
  text-align: center;
  line-height: 1.5;
  color: #d0cee0;
}
.realm-eyebrow {
  color: #d3b982;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}
.realm-library-launch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  text-align: left;
  margin: 12px 0;
  min-height: 76px;
}
.realm-library-launch strong,
.realm-library-launch small {
  display: block;
}
.realm-library-launch small {
  color: #c5c9df;
  margin-top: 5px;
  line-height: 1.4;
}
.realm-emblem {
  display: inline-block;
  flex: none;
  width: 56px;
  height: 56px;
  background-image: url("assets/interface/realm-emblems.png");
  background-size: 400% 300%;
  background-position: var(--emblem-x, 0%) var(--emblem-y, 0%);
  filter: drop-shadow(0 3px 3px #0007);
}
#realmDialog {
  width: min(680px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  padding: 18px;
  overflow: auto;
}
.realm-dialog-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  margin-bottom: 12px;
}
.realm-dialog-heading img {
  width: 48px;
  height: 60px;
  object-fit: contain;
}
.realm-dialog-heading h2 {
  font-size: 24px;
  margin: 4px 0;
}
.realm-dialog-heading > button {
  margin-left: auto;
  min-width: 48px;
  min-height: 48px;
  flex: none;
}
#featureSearch {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin: 8px 0 12px;
}
#featureCategories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 3px 12px;
  scrollbar-width: thin;
}
#featureCategories button {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
}
#featureList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.feature-card {
  display: flex;
  gap: 10px;
  text-align: left;
  align-items: center;
  min-height: 108px;
  padding: 12px;
}
.feature-card > span:last-child {
  min-width: 0;
}
.feature-card strong {
  display: block;
  color: #f3ddad;
  font-size: 15px;
}
.feature-card small {
  display: block;
  color: #c7cce1;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
}
#featureFields {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}
#featureFields label {
  display: grid;
  gap: 7px;
  color: #e3d4b9;
}
#featureFields input,
#featureFields select {
  min-height: 48px;
  width: 100%;
  box-sizing: border-box;
}
#featureDescription {
  line-height: 1.6;
  color: #d2d6e8;
}
#featureExecute {
  min-height: 50px;
  width: 100%;
  margin: 14px 0;
}
#featureError {
  color: #ffb4a9;
  line-height: 1.5;
}
#featureConfirmation {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #b77769;
  border-radius: 10px;
  background: #552c3433;
}
#featureConfirmation input {
  width: 24px;
  height: 24px;
  flex: none;
}
.realm-chat-tools {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.realm-chat-tools button {
  min-height: 44px;
  padding: 8px 14px;
}
.realm-preferences {
  border: 1px solid #5e5775;
  border-radius: 12px;
  padding: 12px;
  margin: 14px 0;
}
.realm-preferences label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
}
.realm-preferences input {
  width: 22px;
  height: 22px;
}
#realmCompass {
  position: absolute;
  right: 12px;
  top: 65px;
  z-index: 3;
  pointer-events: none;
  padding: 5px;
  border: 1px solid #b49b6b;
  border-radius: 50%;
  background: #171c32b0;
}
#realmCompass img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.realm-game .play-dock,
.realm-studio #tabs {
  border-top: 1px solid #ad936a;
  background: linear-gradient(#24283bf5, #11172afa);
  box-shadow: 0 -5px 25px #05081780;
}
.realm-game .world {
  border-color: #96849c;
  box-shadow:
    0 0 0 2px #191c33,
    0 0 0 3px #6d6584,
    0 12px 35px #0005;
}
.realm-studio #unlock {
  border-color: #a28698;
  background:
    linear-gradient(#1b2132ed, #1c2134f5),
    url("assets/interface/realm-materials.png") left top/200% 200%;
}
.realm-studio .card,
.realm-studio .inspector,
.realm-studio .toolbar {
  border-color: #615c79;
}
.realm-game [hidden],
.realm-studio [hidden] {
  display: none !important;
}
@media (max-width: 600px) {
  #featureList {
    grid-template-columns: 1fr;
  }
  .feature-card {
    min-height: 86px;
  }
  .realm-dialog-heading h2 {
    font-size: 21px;
  }
  #realmDialog {
    padding: 14px;
  }
  .realm-welcome-banner {
    height: 120px;
  }
  .realm-game button,
  .realm-studio button {
    min-height: 44px;
  }
  #loginDialog {
    padding: 16px;
  }
}
@media (max-height: 650px) {
  .realm-welcome-banner {
    height: 72px;
    margin-bottom: 8px;
  }
  .realm-welcome-banner img {
    height: 66px;
  }
  #loginDialog h2 {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .realm-game *,
  .realm-studio * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
#featureResults {
  margin: 14px 0;
  padding: 14px 16px;
  max-height: min(38dvh, 320px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  border: 1px solid #b99a5966;
  border-radius: 14px;
  background: linear-gradient(135deg, #172b32, #181c2c);
  color: #f1e5cb;
  box-shadow: inset 0 1px 0 #f8deb51a;
  line-height: 1.6;
}
#featureResults p { margin: 0 0 8px; }
#featureResults p:last-child { margin-bottom: 0; }