/* Shared theme. Screen layout belongs to desktop.css or phone.css. */
:root {
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  background: #0d1b14;
  color: #ecf1e7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  touch-action: none;
}
button {
  font: inherit;
  color: inherit;
  border: 1px solid #71866d;
  border-radius: 8px;
  padding: 9px 11px;
  text-align: left;
  min-height: 40px;
}
button:focus-visible,
button.selected {
  outline: 3px solid #ebc875;
  outline-offset: 1px;
}
button:disabled {
  opacity: 0.5;
}
small {
  color: #c4cbbd;
  font-size: 10px;
}
h1 {
  font-size: 16px;
  margin: 8px 0;
}
h2 {
  font-size: 23px;
  margin: 0 0 10px;
}
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
#hud {
  position: fixed;
  padding: 10px;
  pointer-events: auto;
  font-size: 13px;
  z-index: 6;
}
#hud button {
  margin: 2px 0;
  width: 100%;
  padding: 6px 9px;
  min-height: 34px;
}
#objective {
  font-size: 12px;
  line-height: 1.35;
  margin: 7px 0;
  color: #d5decc;
}
#location {
  font-weight: 700;
  margin-top: 7px;
}
#status {
  font-size: 11px;
}
#talent-button {
  border-color: #bda469;
  color: #f6e2a6;
  font-weight: 750;
}
#talent-button.talent-ready {
  border-color: #f0ca69;
  box-shadow:
    0 0 0 2px #d0a64f66,
    0 0 18px #d8aa4555;
}
#skills {
  position: fixed;
  display: grid;
  gap: 5px;
  z-index: 5;
}
#skills button {
  font-size: 16px;
  padding: 6px 4px;
  text-align: center;
  min-height: 49px;
}
#skills button.charging {
  border-color: #f0ca69;
  box-shadow:
    0 0 0 2px #d0a64f66,
    0 0 18px #d8aa4555;
  background: #4a422c;
}
#skills small {
  display: block;
  font-size: 9px;
}
#quick-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
#skills .potion-button {
  font-size: 12px;
  min-height: 42px;
}
#joystick {
  border-radius: 50%;
  position: relative;
  touch-action: none;
}
#stick {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#order-button,
#touch-interact-button {
  position: fixed;
  z-index: 12;
  text-align: center;
  font-weight: 750;
}
#modal {
  position: fixed;
  background: #15241af7;
  border: 1px solid #a2b495;
  border-radius: 12px;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 8px 0 45px #0007;
  z-index: 10;
}
#modal[hidden],
[hidden] {
  display: none !important;
}
#modal-description {
  font-size: 13px;
  color: #cbd6c3;
  line-height: 1.5;
  white-space: pre-line;
  margin-bottom: 12px;
}
#modal-actions {
  display: grid;
  gap: 7px;
}
#modal-actions button {
  white-space: pre-line;
}
#modal-actions .detail {
  font-size: 11px;
  color: #b8c6ad;
  display: block;
  margin-top: 3px;
}
#close-button {
  margin: 14px 0;
  width: 100%;
}
#modal canvas {
  display: block;
  width: 100%;
  border: 1px solid #55714f;
  margin: 8px 0;
}
body.menu-open #skills {
  visibility: hidden;
}
.health {
  color: #9de39a;
}
.mana {
  color: #a1c9fa;
}
.gold {
  color: #f7da84;
}
#recall-button {
  color: #e7e2c3;
}
#target-button {
  position: relative;
  color: #f1deb0;
}
#target-button.has-target {
  border-color: #e7cb86;
  box-shadow:
    inset 0 1px #fff0bf30,
    0 0 0 1px #b4924870;
}
#target-button.target-pressing {
  box-shadow: inset 0 0 0 2px #dfc17b88;
}
#target-button.target-locked {
  border-color: #f3d38c;
  background: linear-gradient(160deg, #4c4531, #343d2d);
}
#target-button.target-locked::after {
  content: 'LOCK';
  position: absolute;
  top: -7px;
  right: 5px;
  font-size: 8px;
  letter-spacing: 0.07em;
  line-height: 1.2;
  padding: 1px 4px;
  border-radius: 3px;
  color: #f6e2aa;
  background: #233126;
  border: 1px solid #b99b58;
}

#desktop-hints {
  display: none;
}
/* A restrained ink, stone and brass layer over the existing prototype layout. */
button {
  background: linear-gradient(160deg, #344b3c, #25392f 58%, #213329);
  border-color: #879878a8;
  box-shadow:
    inset 0 1px #d8ddc01f,
    0 2px 6px #07120d88;
  text-shadow: 0 1px #0c1713;
}
button:hover {
  background: linear-gradient(160deg, #426249, #2d4836);
}
button.selected,
button:focus-visible {
  border-color: #f2d28b;
  background: linear-gradient(155deg, #496046, #304735);
  box-shadow:
    inset 3px 0 #edc77b,
    inset 0 1px #f5e9bf33,
    0 0 0 2px #72572e88;
}
button:disabled {
  background: #202c28;
  box-shadow: none;
  text-shadow: none;
}
#hud,
#modal,
#message {
  background: linear-gradient(145deg, #1d3027f5, #101f1bed 72%);
  border: 1px solid #9eaf8c9c;
  box-shadow:
    inset 0 1px #e8e6bf21,
    0 9px 28px #07120dcc;
}
#hud {
  border-radius: 12px;
}
#hud h1 {
  color: #f1deaa;
  letter-spacing: 0.025em;
  text-shadow: 0 2px 6px #0008;
  border-bottom: 1px solid #b2b68c55;
  padding-bottom: 8px;
}
#hud #menu-button {
  color: #f3d99c;
  border-color: #c5ac72a3;
}
#hero-stats {
  line-height: 1.35;
}
#hero-stats .hero-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  color: #f2e9cb;
  font-weight: 750;
  margin: 3px 0 8px;
}
#hero-stats .hero-title small {
  letter-spacing: 0.09em;
  color: #d9c288;
}
.resource-line {
  display: block;
  margin: 5px 0 7px;
  font-size: 12px;
}
.resource-line span {
  display: block;
  margin-bottom: 3px;
}
.resource-line i {
  display: block;
  height: 6px;
  border: 1px solid #c8d0b347;
  border-radius: 8px;
  background: linear-gradient(to right, #88cc87 var(--fill), #314538 var(--fill));
  box-shadow: inset 0 1px 2px #06150d9c;
}
.resource-line.mana i {
  background: linear-gradient(to right, #89bce2 var(--fill), #2d4253 var(--fill));
}
#hero-stats .wallet {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #c7d6bf;
  font-size: 11px;
  margin: 8px 0;
}
#hero-stats .restoring {
  display: block;
  color: #d7d6a0;
  margin: 3px 0;
}
#location {
  border-top: 1px solid #a7b69740;
  padding-top: 7px;
  color: #f0d695;
}
#objective {
  border-left: 2px solid #c5ae72;
  padding-left: 8px;
}
#status {
  color: #e2bd94;
}
#skills button {
  border-color: #91a58d9c;
  background: linear-gradient(155deg, #3c5546, #24372e);
  box-shadow:
    inset 0 1px #e8eacc24,
    0 3px 8px #07120cbb;
  color: #f6ecd1;
  font-weight: 650;
}
#skills button small {
  font-weight: 500;
  color: #d7d9b8;
}
#skills .locked {
  background: linear-gradient(155deg, #28332d, #1d2924);
  color: #9fa99b;
}
#skills .potion-button {
  background: linear-gradient(155deg, #42605c, #2b403e);
  border-color: #9bb8a7a8;
}
#joystick {
  background: radial-gradient(circle at 45% 40%, #42634bba 0 22%, #243d30cc 24% 53%, #101f1be6 80%);
  border: 3px solid #bed0a5;
  box-shadow:
    inset 0 0 0 7px #57746166,
    0 5px 15px #08150da8;
}
#stick {
  background: radial-gradient(circle at 35% 30%, #b8d0a0, #6f9676 70%, #4f785e);
  border: 2px solid #d2d8b4;
  box-shadow: 0 3px 9px #07180eaa;
}
#order-button {
  border-color: #e8ca8d;
  color: #fce9bb;
  background: linear-gradient(155deg, #69563b, #3e392d);
  font-weight: 750;
  text-align: center;
  box-shadow:
    inset 0 1px #f5dfac66,
    0 3px 12px #07120dcc;
}
#modal {
  border-color: #c6bb92;
  border-radius: 14px;
}
#modal h2 {
  color: #f0d99b;
  letter-spacing: 0.015em;
  border-bottom: 1px solid #bac7a14d;
  padding-bottom: 10px;
}
#modal-description {
  color: #d9e0cd;
}
#modal-actions button {
  border-left: 3px solid #829d82;
}
#modal-actions button.selected {
  border-left-color: #f3d17d;
}
#modal-actions .detail {
  color: #c1cdb4;
}
#close-button {
  border-color: #d1b876;
  color: #f2d59a;
}
#message {
  border-color: #abb99772;
  color: #f2ecd7;
  border-radius: 9px;
}
/* At most two amber milestone notices share the top-center presentation. */
#message {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  left: 50%;
  right: auto;
  top: max(12px, env(safe-area-inset-top));
  bottom: auto;
  width: min(520px, calc(100vw - 24px));
  padding: 0;
  transform: translate(-50%, -10px);
  opacity: 0;
  visibility: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 20;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s;
}
#message .notice-card {
  padding: 10px 16px;
  background: linear-gradient(155deg, #f0c96e, #d7a94c);
  color: #241b0c;
  border: 2px solid #fff0b4;
  border-radius: 10px;
  box-shadow:
    0 4px 18px #0009,
    inset 0 1px #fff7d399;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
}
/* Narrative prose is deliberately quieter than the golden milestone banner. */
#message .notice-card.notice-narration {
  padding: 10px 14px;
  background: linear-gradient(155deg, #352d23, #242721);
  color: #f0dfbf;
  border: 1px solid #b49b6b;
  box-shadow:
    0 4px 14px #0009,
    inset 0 1px #f0d8a326;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}
#message .notice-card.notice-narration::before {
  content: 'CHRONICLE';
  display: block;
  margin-bottom: 4px;
  color: #d5b77f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
#message .notice-card.notice-warning {
  border-color: #ffb38a;
  background: linear-gradient(155deg, #f7d089, #e6a66b);
  box-shadow:
    0 0 0 2px #9f493488,
    0 5px 18px #000b;
}
body[data-experience='phone'] #message .notice-card.notice-narration {
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.35;
}

#message.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #message {
    transition: none;
  }
}
/* Game gestures must not become text selection or iOS touch callouts. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input,
textarea,
[contenteditable='true'] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#location {
  display: none;
}

#message .notice-detail {
  display: block;
  margin-top: 4px;
  font-size: 0.75em;
  font-weight: 400;
  color: #4c3a1b;
}
#message .notice-card.notice-narration .notice-detail {
  color: #dce5e0;
  font-size: 1em;
  font-weight: 500;
}

/* Compact adventure interface: slate, brass and restrained contrast. */
:root {
  --ui-ink: #eef3f2;
  --ui-muted: #b7c8ce;
  --ui-brass: #e1be78;
  --ui-edge: #7c99a488;
}
button {
  background: linear-gradient(155deg, #293e4a, #182a35);
  color: var(--ui-ink);
  border-color: var(--ui-edge);
  border-radius: 9px;
  box-shadow:
    inset 0 1px #e5f6ff17,
    0 2px 8px #06101988;
  text-shadow: none;
}
button:hover {
  background: linear-gradient(155deg, #345363, #223743);
}
button.selected,
button:focus-visible {
  background: linear-gradient(155deg, #455968, #293c47);
  border-color: var(--ui-brass);
  box-shadow:
    inset 3px 0 #e1be78,
    0 0 0 2px #b18c4b77;
}
#hud,
#modal {
  background: linear-gradient(155deg, #172b36f5, #0e1c26f2);
  border-color: var(--ui-edge);
  box-shadow:
    inset 0 1px #d7eef225,
    0 8px 28px #050d16b0;
}
#modal {
  backdrop-filter: blur(8px);
}
#hud h1 {
  display: none;
}
#hero-stats .hero-title {
  margin: 0 0 5px;
  font-size: 12px;
  color: #f1e5c7;
}
#hero-stats .hero-title small {
  color: var(--ui-brass);
  letter-spacing: 0.035em;
}
.resource-line {
  margin: 3px 0 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.resource-line span {
  margin-bottom: 3px;
  color: #e8eff1;
}
.resource-line i {
  height: 5px;
  border-color: #afc6d044;
  background: linear-gradient(to right, #76bf92 var(--fill), #304a43 var(--fill));
}
.resource-line.mana i {
  background: linear-gradient(to right, #76bfe5 var(--fill), #284452 var(--fill));
}
#hero-stats .wallet {
  margin: 6px 0 2px;
  font-size: 10px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
#objective {
  border-left: 0;
  border-top: 1px solid #95adbb35;
  padding: 6px 0 0;
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ui-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
#status {
  color: #e1bc91;
}
#hud #menu-button,
#talent-button,
#close-button {
  color: #f0d398;
  border-color: #baa16c9c;
}
#modal {
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  padding: 14px;
  overflow: hidden;
}
#modal h2 {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.2;
  color: #efdaaa;
  padding-bottom: 8px;
  margin-bottom: 9px;
}
#modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #668590 #132833;
  scrollbar-width: thin;
}
#modal-description {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.45;
  color: #cedde0;
}
#modal-actions {
  gap: 5px;
}
#modal-actions button {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.3;
  border-left-color: #6e99a7;
}
#modal-actions button.selected {
  border-left-color: var(--ui-brass);
}
#modal-actions .detail {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 3px;
  color: var(--ui-muted);
}
#close-button {
  flex: 0 0 auto;
  min-height: 40px;
  margin: 10px 0 0;
  padding: 7px 10px;
  text-align: center;
}
#skills button {
  background: linear-gradient(155deg, #334e59, #1c303e);
  border-color: #81a1a89c;
}
#skills .potion-button {
  background: linear-gradient(155deg, #365a56, #233e42);
}
#message {
  width: min(380px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  background: transparent;
}

body.menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #030c1591;
  pointer-events: none;
}

/* Service windows contract to their contents. Long menus scroll without moving Back. */
#modal[data-dialog-size='compact'] {
  width: min(300px, calc(100vw - 32px));
}
#modal[data-dialog-size='regular'] {
  width: min(370px, calc(100vw - 32px));
}
#modal[data-dialog-size='wide'] {
  width: min(430px, calc(100vw - 32px));
}
#modal-content canvas {
  max-width: 100%;
  height: auto;
}

/* Dense dialogs: preserve legibility while removing unused framing. */
#modal[data-view='adventure'] #modal-title,
#modal[data-view='adventure'] #modal-description {
  display: none;
}
#modal[data-view='map'] #modal-description {
  margin: 0 0 6px;
}
#modal[data-view='map'] #modal-description canvas {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 1px solid #60828c;
  border-radius: 6px;
}
#modal[data-view='map'] #modal-actions .route-go {
  position: sticky;
  top: 0;
  z-index: 1;
  border-left-color: #d8bb7d;
  background: linear-gradient(155deg, #395866, #263d48);
  font-weight: 700;
}
#modal[data-view='map'] #modal-actions .route-picked {
  border-color: #b8e5d5;
  background: linear-gradient(155deg, #304e57, #1c343e);
}

/* Hub menus have self-explanatory choices; omit redundant page headings. */
#modal[data-view='settings'] #modal-title,
#modal[data-view='settings'] #modal-description {
  display: none;
}

/* Opt-in combat laboratory. Not visible in ordinary play. */
#developer-summon {
  position: fixed;
  left: 12px;
  bottom: 78px;
  z-index: 7;
  background: #233e35ee;
  border-color: #c9b47c;
  font-weight: 700;
  text-align: center;
}
#developer-summon[hidden],
#developer-combat-monitor[hidden] {
  display: none !important;
}
#developer-combat-monitor {
  position: fixed;
  left: 12px;
  top: 35%;
  z-index: 6;
  max-width: min(260px, 38vw);
  padding: 9px 11px;
  border: 1px solid #c9b47c99;
  border-radius: 8px;
  background: #12241edf;
  color: #e7eacb;
  font:
    12px/1.55 ui-monospace,
    monospace;
  white-space: pre-line;
  pointer-events: none;
}
body.menu-open #developer-summon {
  visibility: hidden;
}

/* Finale credit movement is visual only. Text/actions stay real and accessible. */
#modal[data-view='credits'] #modal-description {
  white-space: pre-line;
  text-align: center;
  line-height: 1.9;
  padding: 20px 12px 56px;
  animation: crown-credits-roll 26s linear 1 both;
}
@keyframes crown-credits-roll {
  from {
    transform: translateY(12%);
  }
  to {
    transform: translateY(-12%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #modal[data-view='credits'] #modal-description {
    animation: none;
  }
}

.character-name-field {
  display: grid;
  gap: 0.4rem;
  margin: 0.3rem 0 0.7rem;
  color: #e4d9bf;
  font-size: 0.9rem;
}
.character-name-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.7rem;
  border: 1px solid #a18c61;
  border-radius: 0.4rem;
  background: #16231f;
  color: #fff2d3;
  font: inherit;
  font-size: 16px;
}
#hero-stats .hero-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}