:root {
  --mint: #b5f0d4;
  --line: #304556;
  color: #edf4f8;
  background: #101925;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
body {
  background:
    radial-gradient(ellipse at 80% -10%, #31546c70, transparent 50%),
    radial-gradient(ellipse at 0 80%, #254d4850, transparent 60%), #101925;
}
header {
  background: #111e2dc9;
  border-bottom: 1px solid #314150;
}
button {
  transition:
    background 140ms,
    box-shadow 140ms,
    transform 120ms;
  border-radius: 14px;
}
button:active {
  transform: scale(0.97);
}
button:focus-visible {
  outline: 3px solid #f3ca84;
  outline-offset: 2px;
}
.detail,
.entry {
  animation: panel-in 160ms ease-out;
}
.entry {
  background: linear-gradient(120deg, #223744, #1c2c3b);
  border-color: #3b4e5b;
  box-shadow: inset 0 1px #ffffff0b;
}
.form-section {
  background: linear-gradient(150deg, #243d48, #192c39);
  border: 1px solid #405664;
  box-shadow: 0 8px 24px #0002;
}
.form-section h3 {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #d2eadf;
}
input,
select,
textarea {
  background: #122432;
  border-color: #47606d;
  border-radius: 12px;
  box-shadow: inset 0 1px 3px #0002;
}
label {
  font-size: 13px;
  color: #b8cbd5;
}
.help {
  color: #9fb9c5;
}
.studio-ready #tabs {
  gap: 8px;
}
.studio-ready #tabs button {
  flex: 1;
  flex-basis: 0;
  min-width: 0;
  min-height: 64px;
  background: #213343;
  color: #aac4d0;
  border: 1px solid #344d5a;
}
.studio-ready #tabs button[aria-pressed="true"] {
  background: linear-gradient(130deg, #b4f3d6, #87c9c0);
  color: #122d32;
  box-shadow: 0 4px 18px #7ddaba22;
  border-color: #c1f4df;
}
#moreButton::before {
  content: "•••";
  font-size: 24px;
  height: 24px;
  line-height: 18px;
  letter-spacing: 3px;
}
.studio-ready .actions {
  background: #121f2ef5;
  border-top: 1px solid #3c5461;
  box-shadow: 0 -6px 28px #0003;
}
#saveDraft {
  background: linear-gradient(110deg, #b8f3d5, #8ed8c7);
  box-shadow: 0 3px 16px #8ad6ba22;
}
#reviewRelease {
  background: #263b4c;
  border-color: #54717c;
  color: #d5e7ed;
}
.design-sheet {
  background: linear-gradient(145deg, #253d4b, #132333);
  color: #edf5f3;
  border: 1px solid #5d7783;
  border-radius: 24px;
  width: min(640px, calc(100vw - 24px));
  max-height: 90dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  box-shadow: 0 24px 90px #0008;
}
.design-sheet[open] {
  animation: sheet-in 180ms ease-out;
}
.design-sheet::backdrop {
  background: #07111ebb;
  backdrop-filter: blur(6px);
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: -20px;
  background: #203544;
  z-index: 5;
  padding: 12px 0;
  margin-bottom: 12px;
}
.sheet-top h2 {
  font-size: 22px;
  margin: 0;
}
.sheet-top button {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 26px;
  background: transparent;
  border: 0;
}
#moreSections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#moreSections button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 76px;
  background: #2b4252;
  border-color: #4f6573;
}
#moreSections svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.release-step {
  border-left: 2px solid #91c9b9;
  padding: 0 0 18px 18px;
  margin: 14px 0;
}
.release-step h3 {
  font-size: 16px;
}
.release-step p,
#releaseState {
  color: #b4cbd3;
  line-height: 1.5;
}
.release-step button {
  width: 100%;
}
#releaseFeedback {
  line-height: 1.5;
  color: #e7d5a9;
}
.studio-ready .map-palette {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 82%;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(140deg, #2a4553, #172f3b);
  border: 1px solid #668b93;
  box-shadow: 0 -12px 48px #0008;
  animation: sheet-in 160ms ease-out;
  padding: 14px;
}
.map-palette > .brush-categories {
  position: sticky;
  top: 0;
  background: #233d4b;
  z-index: 1;
  flex-wrap: wrap;
}
.brush-categories button {
  flex: 1 0 28%;
  min-height: 40px;
}
.art-card {
  border: 1px solid #4b6976;
  background: #152d39;
}
.art-card:hover {
  background: #416258;
}
.art-card small {
  font-size: 11px;
}
.favorite-brush {
  float: right;
  font-size: 12px;
  padding: 8px;
  min-height: 40px;
}
.map-quick-tools {
  backdrop-filter: blur(8px);
}
.offer-card summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  list-style: none;
}
.offer-card summary::after {
  content: "⌄";
  margin-left: auto;
}
.offer-card summary canvas {
  width: 56px;
  height: 56px;
  flex: none;
  image-rendering: pixelated;
  background: #142634;
  border-radius: 12px;
}
.offer-card[open] {
  border-color: #a1c9b2;
}
.customer-offer {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 12px;
  align-items: center;
  border-bottom: 1px solid #3e5966;
  padding: 12px 0;
}
.customer-offer canvas {
  grid-row: span 2;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.customer-offer span {
  color: #f1d39c;
}
.preview-tabs {
  display: flex;
  gap: 8px;
}
.npc-live-preview {
  width: 112px;
  height: 94px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 80%, #66928666, #152938 75%);
  border: 1px solid #71918c;
  box-shadow: inset 0 0 22px #92d2bb11;
}
.rotate-npc {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 26px;
  border-radius: 50%;
  background: #29414d;
}
.appearance-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.appearance-gallery button {
  padding: 6px;
  min-width: 0;
  background: #182d3c;
  border-color: #486570;
}
.appearance-gallery canvas {
  width: 100%;
  max-width: 96px;
  image-rendering: pixelated;
}
.appearance-gallery small {
  display: block;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.appearance-gallery button[aria-pressed="true"] {
  border-color: #d6ecc1;
  background: #416052;
}
.speech {
  max-width: 90%;
  padding: 12px 14px;
  border-radius: 16px;
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.5;
}
.player-speech {
  background: #385468;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.npc-speech {
  background: #38574f;
  border-bottom-left-radius: 4px;
}
.conversation-preview {
  padding: 6px 0 12px;
}
.placement-map {
  width: 100%;
  height: 45dvh;
  min-height: 180px;
  border-radius: 16px;
  touch-action: none;
}
.place-npc {
  width: 100%;
  margin-bottom: 14px;
  background: #345b58;
}
.empty-state {
  padding: 24px;
  text-align: center;
  color: #b1c6ce;
}
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes panel-in {
  from {
    opacity: 0.5;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  .design-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: auto auto 0;
    border-radius: 24px 24px 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .studio-ready .npc-preview-heading {
    font-size: 16px;
  }
  .npc-live-preview {
    width: 88px;
    height: 74px;
  }
  .studio-ready .back-button {
    color: #a4bfcf;
    text-align: left;
    align-self: flex-start;
  }
  .studio-ready .detail > h2 {
    letter-spacing: -0.5px;
  }
  .studio-ready .editor-sections button {
    border-color: #4d6872;
    background: #203644;
    color: #bcd1d6;
  }
  .studio-ready .editor-sections button[aria-pressed="true"] {
    background: #abcbbd;
    color: #132c2d;
  }
  .studio-ready .map-toolbar .map-tool-toggle {
    background: #304754;
  }
  .studio-ready .choose-map-brush {
    background: #33554d;
    border-color: #86b29e;
  }
}
@media (max-height: 500px) {
  .npc-live-preview {
    width: 58px;
    height: 48px;
  }
  .studio-ready #tabs button {
    min-height: 40px;
  }
  #moreButton::before {
    font-size: 18px;
    height: 20px;
  }
  .design-sheet {
    max-height: 96dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  button:active {
    transform: none;
  }
}

.placement-sheet[open] {
  display: flex;
  flex-direction: column;
  height: min(760px, 94dvh);
  overflow: hidden;
}
.placement-sheet .sheet-top,
.placement-sheet p,
.placement-controls,
.placement-sheet > button {
  flex-shrink: 0;
}
.placement-sheet .placement-map {
  flex: 1;
  min-height: 60px;
  height: 0;
  width: 100%;
  cursor: crosshair;
}
.placement-controls {
  display: flex;
  gap: 8px;
}
.placement-controls button {
  flex: 1;
  padding: 8px;
}
.placement-sheet > button:last-child {
  background: #9aefd4;
  color: #10242a;
  font-weight: 700;
}

.art-card[aria-pressed="true"] {
  position: relative;
  border-color: #9aefd4;
  box-shadow: inset 0 0 0 2px #9aefd4;
}
.art-card[aria-pressed="true"]::after {
  content: "Selected";
  position: absolute;
  top: 3px;
  right: 3px;
  background: #9aefd4;
  color: #10242a;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 10px;
}
.npc-danger {
  margin-top: 20px;
  border: 1px solid #b7716866;
  border-radius: 12px;
  padding: 12px;
}
.npc-danger button {
  color: #ffc1ad;
}
body.working #saveDraft,
body.working #reviewRelease {
  opacity: 0.65;
  cursor: progress;
}
#saveDraft[data-state="saved"] {
  box-shadow: inset 0 0 0 1px #9aefd4;
}

.library-empty {
  grid-column: 1/-1;
  padding: 18px;
  border: 1px dashed #66848d;
  border-radius: 16px;
  color: #c7dadb;
}
.library-empty h3 {
  margin: 0 0 8px;
  color: #effaf5;
}
.library-empty p {
  line-height: 1.5;
}
.studio-ready .choose-map-brush,
.studio-ready .choose-map-brush span {
  color: #f0faf5;
}
#moreButton[aria-pressed="true"] {
  background: #abcbbd;
  color: #132c2d;
}

/* Cartographer's workbench: shared materials with the player interface. */
body {background:radial-gradient(ellipse at 30% 0,#35534a88,transparent 60%),#102627;}
body>header {background:#132c2d;border-bottom-color:#9e845955;}
.studio-ready .detail {border-color:#a68b60;border-radius:12px;background:#162e2e;box-shadow:0 5px 22px #0004;}
.studio-ready .entry {background:linear-gradient(120deg,#2b4540,#1a302e);border-color:#7e8061;border-radius:9px;min-height:58px;}
.studio-ready .entry:hover,.studio-ready .entry:focus-visible {border-color:#dec087;background:#36544b;}
.studio-ready h2,.studio-ready h3 {font-family:Georgia,serif;color:#eddbb6;}
.studio-ready .form-section {background:#213c38;border-color:#7e8060;border-radius:9px;box-shadow:none;}
.studio-ready .editor-sections button {min-height:44px;border-radius:7px;}
.studio-ready .editor-sections button[aria-pressed=true] {background:#82613b;border-color:#d4b57d;color:#fff3d8;}
.studio-ready .toolbar {border-color:#947c56;background:#193331;}
.studio-ready input,.studio-ready select,.studio-ready textarea {font-size:16px;}
.studio-ready button {min-height:44px;}
.studio-ready .map-view {background:#192c29;}
.studio-ready .map-view canvas {border-color:#ac905f;}
.studio-ready .save-feedback {border-color:#a38a62;}
@media(max-width:600px){.studio-ready .editor-sections {display:flex;flex-wrap:wrap;gap:4px;}.studio-ready .editor-sections button{flex:1 1 80px;}}