:root {
  --paper: #e8dbc0;
  --cream: #efe2c5;
  --ink: #e6d8b7;
  --muted: #b9a481;
  --line: #8e735044;
  --red: #a44c39;
  --gold: #d1ab65;
  --green: #4c6651;
  --serif: "Songti SC", "STSong", serif;
  --sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1d170f;
  color: var(--ink);
  font: 14px/1.6 var(--sans);
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button:hover:not(:disabled) {
  filter: brightness(1.16);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:focus-visible,
canvas:focus-visible {
  outline: 2px solid #edca7a;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.game {
  position: fixed;
  inset: 0;
  isolation: isolate;
}
.scene-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #21180f;
}
#world {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px #100d0977;
  background: linear-gradient(
    #0d0d0b55,
    transparent 20%,
    transparent 79%,
    #12100ba6
  );
}
.scene-actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  color: #f2ddae;
  white-space: nowrap;
  pointer-events: auto;
  font: 14px var(--serif);
  text-shadow: 0 2px 3px #120c06;
}
.hotspot:active:not(:disabled) {
  transform: translate(-50%, -49%);
}
.hotspot > span:last-child {
  padding: 5px 13px;
  background: linear-gradient(
    90deg,
    transparent,
    #281f11bd 12%,
    #281f11bd 88%,
    transparent
  );
  border-top: 1px solid #ddbd6a55;
  border-bottom: 1px solid #ddbd6a44;
}
.hotspot:hover > span:last-child {
  color: #fff1bd;
  background: #44331edb;
}
.hotspot-dot {
  width: 7px;
  height: 7px;
  background: #ebca7e;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px #efd39b1c,
    0 0 18px #eac96d99;
}
.game-hud {
  position: absolute;
  top: 22px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  pointer-events: none;
}
.hud-left {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hud-day,
.hud-gold {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(#322b1deb, #231d14e0);
  border: 1px solid #b3955766;
  box-shadow:
    0 2px 7px #0006,
    inset 0 0 0 3px #17170e7a;
  padding: 9px 17px;
  min-height: 49px;
  pointer-events: auto;
  border-radius: 4px;
}
.hud-day strong {
  font: 20px var(--serif);
  color: #eadbb8;
  letter-spacing: 2px;
}
.day-sun {
  font-size: 20px;
  color: #d2ae62;
}
.hud-gold {
  position: relative;
}
.coin-icon {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 2px solid #c2a75f;
  background: #847034;
  color: #302719;
  display: grid;
  place-items: center;
  font: 12px var(--serif);
  box-shadow: inset 0 0 0 1px #382e16;
}
.hud-gold strong {
  font: 23px var(--serif);
  color: #edcf83;
  line-height: 1;
}
.hud-gold em {
  font: 11px var(--sans);
  color: #b69f72;
  font-style: normal;
  margin-left: 5px;
}
.hud-right {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.hud-right button {
  width: 43px;
  height: 43px;
  border: 1px solid #ad925568;
  background: #251f16dc;
  border-radius: 50%;
  font-size: 21px;
  color: #dfc996;
  box-shadow: 0 2px 8px #0003;
}
.hud-right #sound-toggle span {
  display: none;
}
.quest-note {
  position: absolute;
  left: 26px;
  top: 99px;
  background: linear-gradient(90deg, #251c13ba, transparent);
  padding: 9px 30px 12px 15px;
  border-left: 2px solid #c5a361;
  text-align: left;
  text-shadow: 0 1px 3px #000;
}
.quest-note > span {
  display: block;
  font: 17px var(--serif);
  color: #d9b778;
  margin-bottom: 6px;
  letter-spacing: 2px;
}
.quest-note strong {
  display: block;
  font-size: 12px;
  color: #e0d4b8;
  font-weight: 400;
}
.quest-note small {
  display: block;
  font-size: 10px;
  color: #b7ab8e;
  margin-top: 3px;
}
.game-bottom {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}
.player-slot {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 210px;
  text-shadow: 0 2px 4px #000;
  pointer-events: auto;
}
.player-slot img {
  height: 82px;
  width: 62px;
  object-fit: cover;
  object-position: 50% 13%;
  background: radial-gradient(ellipse, #7b6b3a55, transparent 70%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.player-slot strong {
  display: block;
  font: 17px var(--serif);
  letter-spacing: 3px;
  color: #eddcb5;
}
.player-slot span {
  display: block;
  font-size: 10px;
  color: #c7b595;
  margin-top: 6px;
  max-width: 155px;
}
.game-tools {
  display: flex;
  align-items: end;
  gap: 10px;
  pointer-events: auto;
}
.game-tools button {
  width: 57px;
  padding: 0;
  text-align: center;
}
.game-tools button > span {
  display: grid;
  place-items: center;
  position: relative;
  width: 51px;
  height: 51px;
  border: 1px solid #aa8c4e;
  background: linear-gradient(135deg, #5b4b2eeb, #292318f5);
  box-shadow:
    inset 0 0 0 3px #211c1288,
    0 3px 8px #0006;
  border-radius: 6px;
  color: #e6cf99;
  font: 26px var(--serif);
}
.game-tools b {
  position: absolute;
  right: -4px;
  top: -5px;
  font: 9px var(--sans);
  color: #f6eac8;
  min-width: 17px;
  height: 17px;
  line-height: 16px;
  background: #686345;
  border: 1px solid #c6b17c;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0008;
}
.game-tools small {
  font: 11px var(--serif);
  color: #cebc98;
  display: block;
  margin-top: 7px;
  text-shadow: 0 2px 3px #000;
  letter-spacing: 1px;
}
.game-hint {
  text-align: right;
  color: #e0d3b2;
  text-shadow: 0 2px 4px #000;
  max-width: 255px;
  font-size: 11px;
  align-self: end;
  padding-bottom: 3px;
}
.game-hint small {
  display: block;
  font-size: 9px;
  color: #b7ac8d;
  margin-top: 5px;
}
.game-hint #movement-status {
  display: none;
}
.game-hint #movement-status.show {
  display: block;
  color: #e5c678;
}
.game-hint:has(#movement-status.show) #next-hint {
  display: none;
}
.save-status {
  position: absolute;
  right: 24px;
  bottom: 3px;
  font-size: 8px;
  color: #b8ab8699;
  pointer-events: none;
}
.interaction-panel {
  position: absolute;
  left: 50%;
  bottom: 111px;
  transform: translateX(-50%);
  width: min(690px, calc(100vw - 44px));
  max-height: calc(100dvh - 200px);
  overflow: auto;
  border: 2px solid #967b4e;
  border-radius: 8px;
  background: linear-gradient(135deg, #332b1ff7, #211d16fa);
  box-shadow:
    0 12px 50px #0009,
    inset 0 0 0 4px #17170e88;
  scrollbar-width: thin;
  scrollbar-color: #9b8051 #2e271c;
  animation: panel-in 0.2s;
}
.inspector-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #9d82513d;
  padding: 11px 23px;
  color: #cbb07b;
  letter-spacing: 3px;
  font: 16px var(--serif);
  background: #18180c45;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
}
.inspector-top button {
  font: 25px var(--sans);
  color: #b6a383;
  width: 30px;
  line-height: 1;
}
.panel-body {
  padding: 20px 26px;
}
.panel-title {
  font: 22px var(--serif);
  font-weight: 400;
  letter-spacing: 2px;
  margin: 0 0 8px;
  color: #eedbb0;
}
.panel-subtitle {
  font-size: 11px;
  color: #b7a686;
  line-height: 1.8;
  margin: 0 0 13px;
}
.panel-subtitle br {
  display: none;
}
.offer-list {
  display: flex;
  gap: 13px;
  margin-top: 16px;
}
.offer-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 1px solid #a0844f55;
  border-radius: 4px;
  padding: 10px 9px;
  background: #15181144;
  text-align: center;
  min-width: 0;
}
.offer-card:hover {
  border-color: #d3b36d;
  background: #42371f;
}
.offer-image {
  width: 95px;
  height: 83px;
  background: radial-gradient(ellipse, #c8ad682c, transparent 70%);
  display: grid;
  place-items: center;
}
.offer-image img {
  width: 90px;
  height: 83px;
  object-fit: contain;
  filter: sepia(0.6) brightness(0.65) saturate(0.5);
}
.offer-card strong {
  font: 14px var(--serif);
  display: block;
  color: #e3d0aa;
}
.offer-card small {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: #b9a680;
}
.offer-card small b {
  color: #e4bc71;
  font-size: 15px;
  font-weight: 400;
}
.offer-arrow {
  display: none;
}
.panel-note {
  font-size: 10px;
  line-height: 1.8;
  color: #a89775;
  margin-top: 13px;
  border-top: 1px solid #aa91552b;
  padding-top: 11px;
}
.quote {
  display: none;
}
.order-card {
  display: none;
}
.object-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 160px;
  margin: 7px 0;
  background: radial-gradient(ellipse, #b8a36622, transparent 69%);
}
.object-stage img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  transition: filter 0.4s;
}
.object-stage img.dirty {
  filter: sepia(0.6) brightness(0.65) saturate(0.5);
}
.object-stage img.masterpiece {
  filter: drop-shadow(0 0 12px #e4c67e66);
}
.object-stage.repairing img {
  animation: repair-shake 0.12s infinite;
}
.item-category {
  text-align: center;
  font-size: 10px;
  color: #bba57c;
  letter-spacing: 2px;
}
.item-name {
  text-align: center;
  font: 19px var(--serif);
  color: #ead6aa;
  margin: 8px 0 15px;
}
.value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #9d82513d;
  border-bottom: 1px solid #9d82513d;
  padding: 11px 0;
  margin: 12px 0;
}
.value-row small {
  display: block;
  font-size: 10px;
  color: #b19b76;
  letter-spacing: 1px;
}
.value-row strong {
  font: 27px var(--serif);
  color: #e2be73;
}
.value-row em {
  font: 10px var(--sans);
  font-style: normal;
  margin-left: 5px;
}
.cost {
  text-align: right;
  font-size: 10px;
  color: #b5a17b;
}
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  background: linear-gradient(#657447, #3d5134);
  border: 1px solid #b9ac69;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #25372355,
    0 3px 5px #0003;
  color: #f2e4ba;
}
.primary.red {
  background: linear-gradient(#996042, #693925);
  border-color: #bc9367;
}
.secondary {
  width: 100%;
  min-height: 37px;
  padding: 8px 12px;
  font-size: 12px;
  background: #5a493155;
  border: 1px solid #a38a505e;
  border-radius: 4px;
  margin-top: 9px;
  color: #ddc9a2;
}
.text-button {
  font-size: 11px;
  color: #c7ad77;
  padding: 3px 0;
}
.button-row {
  display: flex;
  gap: 10px;
}
.button-row > * {
  flex: 1;
}
.mini-note {
  text-align: center;
  color: #9d8f73;
  font-size: 10px;
  line-height: 1.8;
  margin: 12px 0 0;
}
.bench-details {
  display: grid;
  grid-template-columns: 235px 1fr;
  gap: 27px;
  align-items: center;
}
.bench-details .object-stage {
  height: 195px;
}
.bench-details .object-stage img {
  height: 195px;
}
.repair-track {
  display: flex;
  gap: 5px;
  margin: 14px 0;
}
.repair-track span {
  height: 4px;
  background: #675d3b;
  flex: 1;
  border-radius: 1px;
}
.repair-track .done {
  background: #d7bb77;
  box-shadow: 0 0 6px #d9bd7544;
}
.risk-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #bca77a;
  margin-bottom: 8px;
}
.risk-label b {
  font-weight: 400;
  color: #df9c70;
}
.risk-bar {
  display: flex;
  gap: 2px;
  height: 5px;
  margin: 9px 0;
}
.risk-bar i {
  height: 100%;
  background: #7c9c62;
}
.risk-bar i.risk-break {
  background: #b66a49;
}
.risk-bar i.risk-damage {
  background: #b8995d;
}
.risk-bar i.risk-steady {
  background: #888873;
}
.risk-bar i.risk-crit {
  background: #d2c07a;
}
.odds-legend {
  display: flex;
  gap: 9px;
  color: #a89775;
  font-size: 9px;
  margin: 8px 0 16px;
}
.result-strip {
  border: 1px solid #8da76b66;
  background: #49623833;
  color: #d3dab3;
  padding: 9px 13px;
  line-height: 1.7;
  font-size: 11px;
  margin-bottom: 12px;
  border-radius: 3px;
}
.result-strip.bad {
  border-color: #ba7d5f66;
  color: #e1bb9c;
  background: #703d292e;
}
.empty-panel {
  text-align: center;
  padding: 20px 0;
}
.empty-symbol {
  font: 43px var(--serif);
  color: #a18e5d;
  margin-bottom: 13px;
}
.panel-divider {
  height: 1px;
  background: #9b80513d;
  margin: 18px 0;
}
.market-list {
  display: flex;
  gap: 17px;
  padding: 15px 0;
  font-size: 11px;
  color: #baa781;
}
.market-list b {
  font-weight: 400;
  color: #d5bd83;
}
.visitor-portrait {
  text-align: center;
  height: 130px;
  margin: 8px 0;
}
.visitor-portrait img {
  height: 130px;
  object-fit: contain;
}
.item-pick {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-top: 1px solid #9d82513d;
}
.item-pick img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}
.item-pick > div {
  flex: 1;
}
.item-pick strong {
  font: 16px var(--serif);
  color: #e5ce9d;
}
.item-pick p {
  font-size: 10px;
  color: #b6a17a;
  margin: 4px 0;
}
.item-pick .primary {
  width: auto;
  min-width: 120px;
}
.toast {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translate(-50%, 10px);
  padding: 12px 28px;
  background: linear-gradient(
    90deg,
    transparent,
    #191c14e8 10%,
    #191c14e8 90%,
    transparent
  );
  color: #eed9a6;
  font-size: 13px;
  text-shadow: 0 2px 4px #000;
  border-top: 1px solid #bca36d44;
  border-bottom: 1px solid #bca36d44;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: 90vw;
  text-align: center;
  min-width: 300px;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.money-rise {
  position: absolute;
  left: 35px;
  bottom: -27px;
  color: #f6d27f;
  font: 17px var(--serif);
  white-space: nowrap;
  animation: money-rise 1.7s forwards;
  text-shadow: 0 2px 3px #000;
}
.scene-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: #211c12;
  z-index: 8;
  color: #d7b979;
  transition: opacity 0.5s;
}
.scene-loading > span {
  font: 50px var(--serif);
  letter-spacing: 12px;
}
.scene-loading p {
  font: 13px var(--serif);
  letter-spacing: 5px;
  margin-top: 20px;
}
.scene-loading.done {
  opacity: 0;
  pointer-events: none;
}
dialog {
  color: var(--ink);
  background: linear-gradient(140deg, #3d3425, #211d15);
  border: 2px solid #9c7e4e;
  border-radius: 8px;
  padding: 30px 36px;
  box-shadow:
    0 15px 70px #0009,
    inset 0 0 0 4px #17170e88;
  width: min(720px, calc(100vw - 28px));
  max-height: 88dvh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #9b8051 #2e271c;
}
dialog::backdrop {
  background: #0b0d0a99;
}
dialog[open] {
  animation: dialog-in 0.18s;
}
.modal-close {
  position: absolute;
  right: 13px;
  top: 9px;
  color: #bda880;
  font-size: 26px;
  line-height: 1;
  width: 30px;
  height: 30px;
  z-index: 3;
}
.modal h2 {
  font: 27px var(--serif);
  font-weight: 400;
  color: #ebd5a6;
  letter-spacing: 2px;
  margin: 8px 0 14px;
}
.modal p {
  font-size: 12px;
  color: #b4a17f;
  line-height: 1.9;
}
.eyebrow {
  font-size: 10px;
  color: #bba26e;
  letter-spacing: 2px;
}
.modal-intro {
  margin-bottom: 24px;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.inventory-card {
  border: 1px solid #9d825144;
  background: #171a1044;
  padding: 13px;
  text-align: center;
  border-radius: 4px;
}
.inventory-card img {
  width: 100%;
  height: 125px;
  object-fit: contain;
}
.inventory-card h3 {
  font: 15px var(--serif);
  color: #e7d1a5;
}
.inventory-card p {
  font-size: 10px;
}
.inventory-card strong {
  font: 22px var(--serif);
  color: #dcba72;
}
.inventory-card button {
  font-size: 11px;
}
.codex-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.codex-tabs button {
  padding: 4px 13px;
  border: 1px solid #9d825155;
  color: #c9b38b;
  border-radius: 3px;
  font-size: 11px;
}
.codex-tabs button.active {
  background: #657147;
  color: #f0dfb6;
  border-color: #bda264;
}
.codex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.codex-item {
  border: 1px solid #9d825144;
  background: #171a1033;
  padding: 12px;
  position: relative;
  border-radius: 4px;
}
.codex-item img {
  width: 100%;
  height: 95px;
  object-fit: contain;
}
.codex-item.locked img {
  filter: brightness(0) opacity(0.4);
}
.codex-item span {
  font: 12px var(--serif);
  display: block;
  margin-top: 8px;
}
.codex-item small {
  font-size: 9px;
  color: #a69472;
}
.codex-item .new-mark {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 8px;
  color: #e2bd76;
}
.journal-list {
  list-style: none;
  padding: 0;
  max-height: 50vh;
  overflow: auto;
}
.journal-list li {
  display: flex;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid #9d82513d;
  font-size: 12px;
  color: #c4b28f;
}
.journal-list small {
  font-size: 9px;
  color: #bba06c;
  white-space: nowrap;
}
.settle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 24px 0;
}
.settle-grid > div {
  display: flex;
  flex-direction: column;
  padding: 13px 0;
  border-top: 1px solid #9d82513d;
}
.settle-grid small {
  font-size: 11px;
  color: #aa9977;
}
.settle-grid strong {
  font: 27px var(--serif);
  color: #e0bf79;
  margin-top: 5px;
}
.help-steps {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.help-steps li {
  padding: 12px 0;
  border-top: 1px solid #9d82513d;
  color: #bbaa84;
  font-size: 12px;
}
.help-steps b {
  font: 16px var(--serif);
  color: #e5cb97;
  margin-right: 14px;
}
.settings-row {
  display: flex;
  gap: 20px;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid #9d82513d;
}
.settings-row .danger {
  color: #cb9276;
  margin-left: auto;
}
.appraisal-modal {
  width: min(760px, calc(100vw - 22px));
  padding: 26px 40px 22px;
  background: radial-gradient(ellipse at center, #55452b, #252116 77%);
  overflow-y: auto;
}
.appraisal-top {
  text-align: center;
}
.appraisal-top h2 {
  font: 25px var(--serif);
  font-weight: 400;
  letter-spacing: 3px;
  color: #ead4a5;
  margin: 9px 0;
}
.appraisal-top p {
  font-size: 11px;
  color: #bca882;
  margin: 0;
}
.appraisal-stage {
  position: relative;
  width: min(100%, calc(122.72dvh - 368px));
  aspect-ratio: 600/440;
  margin: 10px auto 4px;
  background: radial-gradient(ellipse, #d5b97d17, transparent 68%);
  overflow: hidden;
  touch-action: none;
}
#appraisal-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: none;
  touch-action: none;
}
.brush-cursor {
  position: absolute;
  width: 68px;
  height: 68px;
  border: 1px solid #e1c48d88;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
}
.brush-cursor:after {
  content: "拂";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 13px var(--serif);
  color: #e0c58788;
}
.appraisal-stamp {
  position: absolute;
  right: 25px;
  top: 35px;
  writing-mode: vertical-rl;
  font: 23px var(--serif);
  letter-spacing: 5px;
  color: #d5ad66;
  border: 2px solid #d5ad66;
  padding: 12px 5px;
  transform: rotate(8deg) scale(1.5);
  opacity: 0;
  transition: 0.5s;
  pointer-events: none;
}
.appraisal-stamp.show {
  opacity: 0.8;
  transform: rotate(8deg) scale(1);
}
.rub-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  color: #b5a17a;
}
.rub-progress > div {
  height: 4px;
  flex: 1;
  background: #74613d;
}
.rub-progress i {
  height: 100%;
  display: block;
  background: #d2ba7d;
  width: 0;
  box-shadow: 0 0 8px #dbc27b66;
  transition: width 0.1s;
}
.rub-progress b {
  font-weight: 400;
  color: #e5cf9e;
  min-width: 30px;
  text-align: right;
}
.appraisal-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #9d82513d;
  padding-top: 16px;
  margin-top: 20px;
  min-height: 50px;
}
.appraisal-bottom small {
  font-size: 10px;
  color: #a69574;
}
.appraisal-bottom .primary {
  width: auto;
  font-size: 12px;
  min-height: 37px;
  padding: 8px 15px;
}
.rub-complete #appraisal-canvas {
  cursor: default;
}
.rub-complete .brush-cursor {
  display: none !important;
}
@keyframes money-rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  15%,
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
@keyframes repair-shake {
  0%,
  100% {
    transform: translate(-2px, 1px) rotate(-1deg);
  }
  50% {
    transform: translate(2px, -2px) rotate(1deg);
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    bottom: 100px;
  }
  to {
    opacity: 1;
    bottom: 111px;
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 1050px) {
  .game-hint {
    display: none;
  }
  .player-slot {
    min-width: 170px;
  }
  .game-tools {
    gap: 8px;
  }
  .game-bottom {
    gap: 10px;
  }
  .interaction-panel {
    bottom: 112px;
    max-height: calc(100dvh - 195px);
  }
}
@media (max-width: 650px) {
  .game-hud {
    left: 12px;
    right: 12px;
    top: 12px;
  }
  .hud-left {
    gap: 7px;
  }
  .hud-day,
  .hud-gold {
    padding: 7px 10px;
    min-height: 39px;
    gap: 7px;
  }
  .hud-day strong {
    font-size: 15px;
    letter-spacing: 0;
  }
  .day-sun {
    font-size: 15px;
  }
  .hud-gold strong {
    font-size: 20px;
  }
  .coin-icon {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }
  .hud-right {
    gap: 6px;
  }
  .hud-right button {
    width: 33px;
    height: 33px;
    font-size: 18px;
  }
  .quest-note {
    left: 14px;
    top: 69px;
    padding: 7px 22px 9px 10px;
  }
  .quest-note > span {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .quest-note strong {
    font-size: 10px;
  }
  .quest-note small {
    font-size: 9px;
  }
  .game-bottom {
    bottom: 13px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .player-slot {
    position: absolute;
    bottom: 80px;
    left: 0;
    min-width: 0;
    gap: 6px;
  }
  .player-slot img {
    height: 49px;
    width: 36px;
  }
  .player-slot strong {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .player-slot span {
    font-size: 9px;
    max-width: 150px;
    margin-top: 3px;
  }
  .game-tools {
    gap: 8px;
    justify-content: center;
  }
  .game-tools button {
    width: 47px;
  }
  .game-tools button > span {
    width: 43px;
    height: 43px;
    font-size: 23px;
    border-radius: 4px;
  }
  .game-tools small {
    font-size: 10px;
    margin-top: 5px;
  }
  .save-status {
    font-size: 7px;
    right: 12px;
    bottom: 0;
  }
  .hotspot {
    font-size: 12px;
    gap: 6px;
  }
  .hotspot > span:last-child {
    padding: 4px 9px;
  }
  .hotspot-dot {
    width: 5px;
    height: 5px;
  }
  .interaction-panel {
    width: calc(100vw - 20px);
    bottom: 96px;
    max-height: calc(100dvh - 168px);
  }
  .inspector-top {
    padding: 9px 15px;
    font-size: 15px;
  }
  .panel-body {
    padding: 14px 16px;
  }
  .panel-title {
    font-size: 20px;
  }
  .panel-subtitle {
    font-size: 10px;
  }
  .offer-list {
    gap: 8px;
  }
  .offer-card {
    padding: 8px 5px;
    gap: 5px;
  }
  .offer-image,
  .offer-image img {
    width: 78px;
    height: 73px;
  }
  .offer-card strong {
    font-size: 12px;
  }
  .offer-card small {
    font-size: 9px;
  }
  .offer-card small b {
    font-size: 13px;
  }
  .panel-note {
    font-size: 9px;
  }
  .bench-details {
    grid-template-columns: 115px 1fr;
    gap: 12px;
  }
  .bench-details .object-stage,
  .bench-details .object-stage img {
    height: 145px;
  }
  .item-name {
    font-size: 15px;
    line-height: 1.6;
  }
  .item-category {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .value-row {
    padding: 7px 0;
    margin: 7px 0;
  }
  .value-row strong {
    font-size: 23px;
  }
  .cost {
    font-size: 9px;
  }
  .risk-label {
    font-size: 10px;
  }
  .odds-legend {
    gap: 5px;
    font-size: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .primary {
    font-size: 11px;
    min-height: 37px;
    padding: 8px 10px;
  }
  .secondary {
    font-size: 10px;
    min-height: 33px;
    padding: 6px 7px;
  }
  .button-row {
    gap: 6px;
  }
  .mini-note {
    font-size: 9px;
  }
  .result-strip {
    font-size: 10px;
    padding: 7px 10px;
  }
  .market-list {
    gap: 10px;
    font-size: 10px;
    flex-wrap: wrap;
  }
  .item-pick {
    gap: 10px;
  }
  .item-pick strong {
    font-size: 14px;
  }
  .item-pick img {
    width: 50px;
    height: 50px;
  }
  .item-pick .primary {
    min-width: 80px;
  }
  .toast {
    top: 27%;
    font-size: 11px;
    padding: 10px 17px;
    min-width: 260px;
  }
  dialog {
    padding: 28px 20px;
    max-height: 90dvh;
  }
  .modal h2 {
    font-size: 24px;
  }
  .modal p {
    font-size: 11px;
  }
  .inventory-grid {
    grid-template-columns: 1fr;
  }
  .inventory-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0 15px;
    text-align: left;
    align-items: center;
  }
  .inventory-card img {
    height: 85px;
    grid-row: 1/4;
  }
  .inventory-card h3 {
    margin: 0;
  }
  .inventory-card p {
    margin: 3px 0;
  }
  .inventory-card button {
    grid-column: 2;
  }
  .codex-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .codex-item {
    padding: 8px;
  }
  .codex-item img {
    height: 70px;
  }
  .codex-item span {
    font-size: 10px;
  }
  .codex-tabs {
    gap: 5px;
  }
  .codex-tabs button {
    padding: 3px 10px;
    font-size: 10px;
  }
  .appraisal-modal {
    padding: 24px 19px 17px;
  }
  .appraisal-top h2 {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .appraisal-top p {
    font-size: 10px;
  }
  .appraisal-bottom {
    gap: 10px;
  }
  .appraisal-bottom small {
    font-size: 8px;
    max-width: 45%;
  }
  .appraisal-bottom .primary {
    font-size: 10px;
    padding: 6px 10px;
  }
  .appraisal-stamp {
    font-size: 17px;
    padding: 8px 3px;
    top: 20px;
    right: 15px;
  }
  .rub-progress {
    font-size: 9px;
    gap: 10px;
  }
  .settings-row {
    gap: 14px;
  }
  .settings-row button {
    font-size: 10px;
  }
  .help-steps b {
    font-size: 14px;
  }
  .help-steps li {
    font-size: 11px;
  }
}
@media (max-height: 560px) and (min-width: 651px) {
  .game-hud {
    top: 10px;
    left: 16px;
    right: 16px;
  }
  .hud-day,
  .hud-gold {
    min-height: 36px;
    padding: 6px 12px;
  }
  .hud-day strong,
  .hud-gold strong {
    font-size: 18px;
  }
  .hud-right button {
    width: 35px;
    height: 35px;
  }
  .quest-note {
    top: 63px;
    font-size: 10px;
  }
  .quest-note > span {
    font-size: 14px;
  }
  .game-bottom {
    bottom: 9px;
    left: 15px;
    right: 15px;
  }
  .player-slot img {
    height: 58px;
    width: 42px;
  }
  .game-tools button > span {
    width: 39px;
    height: 39px;
    font-size: 21px;
  }
  .game-tools button {
    width: 43px;
  }
  .game-tools small {
    font-size: 9px;
    margin-top: 3px;
  }
  .interaction-panel {
    bottom: 78px;
    max-height: calc(100dvh - 137px);
    width: min(650px, calc(100vw - 160px));
  }
  .panel-body {
    padding: 12px 20px;
  }
  .offer-image,
  .offer-image img {
    height: 65px;
  }
  .panel-note {
    display: none;
  }
  .bench-details .object-stage,
  .bench-details .object-stage img {
    height: 150px;
  }
  .appraisal-modal {
    padding: 17px 30px;
  }
  .appraisal-stage {
    width: min(100%, calc(122.72dvh - 285px));
  }
  .appraisal-top h2 {
    font-size: 20px;
    margin: 5px 0;
  }
  .appraisal-bottom {
    padding-top: 10px;
    margin-top: 10px;
  }
  .mini-note {
    margin-top: 8px;
  }
  .object-stage,
  .object-stage img {
    height: 110px;
  }
  .player-slot span {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* In-world interaction always sits above the player's quick bar. */
.interaction-panel {
  z-index: 4;
}
.game:has(.interaction-panel:not([hidden])) .player-slot {
  visibility: hidden;
}
.stakes-preview {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #bca780;
  padding: 8px 0 12px;
}
.stakes-preview b {
  font: 16px var(--serif);
  color: #e2c07e;
}
.repair-cinematic {
  position: fixed;
  inset: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: radial-gradient(ellipse at 50% 48%, #4b452cda, #131b14f2 70%);
  box-shadow: none;
  overflow: hidden;
}
.repair-cinematic::backdrop {
  background: #0b110ae8;
}
.repair-cinematic[open] {
  display: grid;
  place-items: center;
  animation: none;
}
.repair-ritual {
  width: min(570px, 90vw);
  text-align: center;
  position: relative;
}
.ritual-stage {
  font: 13px var(--serif);
  letter-spacing: 4px;
  color: #bda678;
}
.repair-ritual h2 {
  font: 44px var(--serif);
  letter-spacing: 6px;
  font-weight: 400;
  color: #f0d89a;
  margin: 12px 0 0;
  min-height: 70px;
  text-shadow: 0 0 30px #e9c56b55;
}
.ritual-object {
  height: min(37dvh, 300px);
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px 0 0;
}
.ritual-object > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 14px #080a0666);
  transition: filter 0.35s;
}
.ritual-ring {
  position: absolute;
  width: min(32dvh, 255px);
  height: min(32dvh, 255px);
  border: 1px solid #bba36855;
  border-radius: 50%;
  box-shadow:
    0 0 35px #d7bf6e17,
    inset 0 0 40px #e5ce8011;
}
.ritual-ring:before {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px dashed #bca56a44;
  border-radius: 50%;
}
.working .ritual-object img {
  animation: ritual-work 0.19s infinite alternate;
}
.working .ritual-ring {
  animation: ritual-pulse 0.7s infinite;
}
.working .repair-ritual h2 {
  font-size: 31px;
  color: #c8b58d;
}
.ritual-value {
  margin: 9px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.ritual-value small {
  font-size: 10px;
  letter-spacing: 2px;
  color: #a99a77;
  align-self: center;
  margin-right: 6px;
}
.ritual-value strong {
  font: 49px var(--serif);
  color: #edd393;
  letter-spacing: 1px;
  text-shadow: 0 0 20px #e7ca7733;
}
.ritual-value em {
  font: 12px var(--sans);
  font-style: normal;
  color: #bca67a;
}
.ritual-message {
  font-size: 13px;
  color: #c9b78f;
  min-height: 24px;
  margin: 10px 0 16px;
  letter-spacing: 1px;
}
.repair-choices {
  max-width: 450px;
  margin: auto;
  animation: dialog-in 0.3s 0.1s both;
}
.repair-choices .button-row {
  gap: 14px;
}
.repair-choices .secondary {
  margin: 0;
  background: linear-gradient(#6a5934, #403724);
  min-height: 43px;
  font-size: 12px;
  border-color: #b89b5a;
}
.repair-choices .text-button {
  margin-top: 15px;
  font-size: 10px;
  color: #9d957b;
}
.repair-next-risk {
  font-size: 11px;
  color: #b8aa85;
  margin-bottom: 13px;
}
.ritual-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.ritual-sparks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fce1a0;
  box-shadow: 0 0 12px #ffdc88;
  animation: ritual-spark 1s var(--delay) both;
  transform: rotate(var(--angle)) translateX(100px);
}
.revealed.success .ritual-object img {
  animation: relic-bloom 0.55s both;
}
.revealed.critical .ritual-object img {
  animation: relic-bloom 0.75s both;
  filter: drop-shadow(0 0 26px #ffe18ca1);
}
.revealed.critical .ritual-ring {
  box-shadow:
    0 0 100px #f6dd7555,
    inset 0 0 60px #f3d78022;
  border-color: #f0d48e;
}
.revealed.critical .ritual-sparks,
.revealed.success .ritual-sparks {
  display: block;
}
.revealed.critical h2 {
  color: #fff1b5;
  text-shadow:
    0 0 15px #e8b35c,
    0 0 50px #e8b35c66;
  animation: relic-bloom 0.55s;
}
.revealed.broken {
  background: radial-gradient(ellipse, #423328e8, #171511f7 70%);
}
.revealed.broken h2 {
  color: #c8a38a;
  text-shadow: none;
}
.revealed.broken .ritual-object img {
  animation: relic-break 0.8s both;
}
.fracture-line {
  position: absolute;
  inset: 5% 30%;
  background: #1a110a;
  clip-path: polygon(
    45% 0,
    53% 0,
    48% 33%,
    61% 36%,
    42% 65%,
    53% 68%,
    39% 100%,
    35% 100%,
    45% 68%,
    34% 65%,
    52% 37%,
    39% 34%
  );
  z-index: 2;
  display: none;
}
.revealed.broken .fracture-line {
  display: block;
  animation: dialog-in 0.3s;
}
.revealed.broken .ritual-ring {
  opacity: 0.25;
}
.revealed.damage .ritual-object img {
  animation: repair-shake 0.12s 3;
  filter: sepia(0.2) brightness(0.8);
}
.revealed.damage h2 {
  color: #d7b28a;
  font-size: 36px;
}
.revealed.steady h2 {
  font-size: 36px;
  color: #c6ccb0;
}
.revealed.steady .ritual-ring {
  border-color: #a8b39466;
}
.revealed.success h2 {
  animation: relic-bloom 0.4s;
}
.revealed.broken .ritual-value strong {
  color: #a0886d;
}
.modal-close:focus-visible {
  outline-color: #e7c98a;
}
@keyframes ritual-work {
  from {
    transform: translate(-1px, 2px) rotate(-0.7deg);
  }
  to {
    transform: translate(1px, -2px) rotate(0.7deg);
  }
}
@keyframes ritual-pulse {
  50% {
    opacity: 0.4;
    transform: scale(0.96);
  }
}
@keyframes relic-bloom {
  0% {
    transform: scale(0.85);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ritual-spark {
  from {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(75px) scale(1.5);
  }
  to {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(220px) scale(0.4);
  }
}
@keyframes relic-break {
  0% {
    transform: translateX(-7px) rotate(-3deg);
  }
  12% {
    transform: translateX(9px) rotate(4deg);
  }
  24% {
    transform: translateX(-5px) rotate(-2deg);
  }
  100% {
    filter: grayscale(1) brightness(0.4);
    transform: translateY(14px) rotate(-7deg);
    opacity: 0.5;
  }
}
@media (max-width: 650px) {
  .repair-ritual h2 {
    font-size: 34px;
    min-height: 55px;
    letter-spacing: 3px;
  }
  .ritual-stage {
    font-size: 11px;
  }
  .ritual-value strong {
    font-size: 40px;
  }
  .ritual-message {
    font-size: 11px;
    letter-spacing: 0;
  }
  .repair-choices .primary,
  .repair-choices .secondary {
    font-size: 11px;
    padding: 10px 8px;
  }
  .repair-choices .button-row {
    gap: 8px;
  }
  .repair-next-risk {
    font-size: 10px;
  }
  .stakes-preview {
    font-size: 8px;
  }
  .stakes-preview b {
    font-size: 13px;
  }
  .revealed.damage h2,
  .revealed.steady h2 {
    font-size: 29px;
  }
  .ritual-object {
    height: 31dvh;
  }
}
@media (max-height: 560px) and (min-width: 651px) {
  .repair-ritual {
    width: min(660px, 90vw);
  }
  .repair-ritual h2 {
    font-size: 29px;
    min-height: 38px;
    margin: 3px 0;
  }
  .ritual-stage {
    font-size: 10px;
  }
  .ritual-object {
    height: 29dvh;
    margin: 0;
  }
  .ritual-value strong {
    font-size: 32px;
  }
  .ritual-value {
    margin: 0;
  }
  .ritual-message {
    font-size: 11px;
    margin: 3px 0 7px;
    min-height: 17px;
  }
  .repair-next-risk {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .repair-choices .text-button {
    margin-top: 8px;
  }
  .working .repair-ritual h2 {
    font-size: 26px;
  }
  .revealed.damage h2,
  .revealed.steady h2 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-sparks {
    display: none !important;
  }
  .revealed.broken .ritual-object img {
    filter: grayscale(1) brightness(0.4);
    opacity: 0.5;
  }
}

/* First-person workshop: every interaction stays over the live room. */
:root{--serif:"PingFang SC","Microsoft YaHei",sans-serif;--gold:#e6c47c;--ink:#f2e7cd;--muted:#c3b497}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff9d8bb;font:32px sans-serif;pointer-events:none;text-shadow:0 1px 4px #000;z-index:1}
#crosshair.hidden{opacity:0}
.scene-vignette{box-shadow:inset 0 0 120px #0a0e0b77;background:linear-gradient(#0a0d0b33,transparent 25%,transparent 80%,#0a0d0b77)}
.player-slot{display:none!important}
.hud-day,.hud-gold{background:#20251ebd;border-color:#a0a48b44;box-shadow:0 3px 15px #0002;border-radius:5px}
.hud-day strong{font-size:17px;letter-spacing:0}
.quest-note{top:95px;background:#20271bc4;border-left-color:#e7c888;max-width:215px;padding:8px 14px;text-align:left}
.quest-note strong{font-size:17px}
.quest-note small{font-size:11px}
.interaction-panel{transform:none;top:130px;right:25px;left:auto;bottom:auto;width:330px;max-height:calc(100dvh - 245px);border:1px solid #e7ce9855;border-radius:5px;background:linear-gradient(135deg,#272e25f2,#20251ef5);box-shadow:0 12px 45px #0005;overflow:auto;z-index:4}
.inspector-top{padding:8px 18px;background:#111b1555;letter-spacing:2px;font-size:11px}
.panel-body{padding:18px}
.panel-title{font-size:24px}.panel-subtitle{font-size:12px}.quote{display:none}
.panel-body>.order-card{display:none}
.object-stage{height:140px}.object-stage img{max-height:140px}
.offer-card{padding:9px;gap:12px}.offer-image{width:65px;height:68px}.offer-image img{max-height:65px}
.offer-card strong{font-size:14px}
.primary,.secondary{border-radius:4px;font-weight:600;min-height:42px}
.primary{background:linear-gradient(#d8b879,#b58f52);color:#30281a;border-color:#edd39a;box-shadow:inset 0 1px #fff4,0 2px 5px #0003}
.secondary{background:#171f19aa;border-color:#a9ac834f}
.primary.red{background:#985447;color:#fff1cf}
.game-tools{gap:5px;padding:6px;background:#18221caa;border:1px solid #c1bd8d44;border-radius:8px;box-shadow:none}
.game-tools button{border:0;background:transparent;box-shadow:none;width:55px;height:61px;border-radius:4px}
.game-tools button:hover{background:#9fa27524}.game-tools button>span{font-size:22px}.game-tools button small{font-size:11px}
.game-hint{font-size:12px;gap:3px}.game-hint small{font-size:10px}
.game-bottom{bottom:16px;left:24px;right:24px}.game-hint{position:absolute;right:0;bottom:0;max-width:230px;text-align:right;pointer-events:none}
body.interacting .game-hint{opacity:0}
body.at-bench .interaction-panel{top:89px;left:50%;right:auto;transform:translateX(-50%);width:490px;max-height:calc(100dvh - 305px);background:#20271eeb}
body.at-bench .panel-body{padding:12px 20px}
body.at-bench .bench-details{display:block}
body.at-bench .bench-details>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.at-bench .bench-details .object-stage{display:none}
body.at-bench .bench-details .item-name{font-size:17px;margin:0}
body.at-bench .bench-details .item-category{font-size:10px;margin:0}
body.at-bench .bench-details .value-row{margin:8px 0}
body.at-bench .bench-details .value-row strong{font-size:30px}
body.at-bench .repair-track{margin:6px 0}.risk-label{font-size:12px;margin:6px 0}.odds-legend{font-size:10px}
body.at-bench .mini-note{font-size:10px;margin:7px 0 0}
body.at-bench .stakes-preview{margin:7px 0;padding:5px 9px}
body.at-bench .bench-details .primary{margin-top:8px}
body.at-bench .bench-details .button-row{margin-top:7px}
body.at-bench .result-strip{padding:7px;font-size:11px;margin-bottom:7px}
body.at-bench .panel-body:has(>.object-stage)>.object-stage{display:none}
body.at-bench .panel-body:has(>.object-stage) .item-name{font-size:18px}
body.at-bench .empty-panel{padding:10px}.empty-symbol{display:none}
.repair-cinematic[open]{position:fixed;inset:90px auto auto 50%;transform:translateX(-50%);margin:0;width:490px;max-width:calc(100vw - 24px);height:auto;min-height:0;max-height:calc(100dvh - 275px);padding:20px 25px;background:linear-gradient(135deg,#253226ed,#19251bef);border:1px solid #ddc58c77;border-radius:5px;box-shadow:0 10px 40px #0005;overflow:auto;display:block}
.repair-cinematic::backdrop{background:transparent;backdrop-filter:none}
.repair-ritual{text-align:center;max-width:none}
.ritual-object{display:none}
.ritual-stage{font-size:11px;margin:0 0 8px}
.repair-cinematic h2{font-size:28px;margin:0 0 8px}
.ritual-value{margin:8px 0;gap:10px}.ritual-value strong{font-size:40px}.ritual-value small{font-size:11px;display:inline}.ritual-message{font-size:12px;margin:8px 0}
.repair-choices{margin-top:12px}.repair-next-risk{font-size:11px}.repair-choices .button-row{margin-top:10px}
#move-pad{position:absolute;left:28px;bottom:116px;width:88px;height:88px;border:1px solid #dbd9b63b;background:#22302655;border-radius:50%;z-index:3;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 17px #dee0ad08}
#move-pad i{position:absolute;width:34px;height:34px;top:26px;left:26px;transform:translate(var(--jx,0px),var(--jy,0px));border:1px solid #e5dfad55;background:#bac7a32c;border-radius:50%;pointer-events:none}
#interact-key{position:absolute;right:30px;bottom:136px;width:64px;height:64px;border-radius:50%;border:1px solid #d4d6aa66;background:#253527aa;font-size:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;z-index:3}
#interact-key span{font-size:10px;margin-top:2px}
body.interacting #move-pad,body.interacting #interact-key{opacity:.22}
body.at-bench .quest-note{opacity:.2;pointer-events:none}
@media(max-width:650px){
 .game-hud{top:12px;left:12px;right:12px}.hud-day,.hud-gold{padding:7px 10px;min-height:41px}.hud-left{gap:6px}.hud-day strong{font-size:13px}.hud-gold strong{font-size:19px}.day-sun{display:none}
 .quest-note{top:67px;left:13px;max-width:180px;padding:5px 10px}.quest-note strong{font-size:14px}.quest-note small{display:none}
 .game-bottom{bottom:12px;left:50%;right:auto;transform:translateX(-50%);width:auto}.game-tools{gap:0;padding:3px}.game-tools button{width:49px;height:53px}.game-tools button>span{font-size:20px}.game-tools button small{font-size:10px}.game-hint{display:none}
 .interaction-panel{top:118px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 280px)}
 body.at-bench .interaction-panel{top:118px;width:calc(100vw - 24px);max-height:48dvh}
 body.at-bench .panel-body{padding:10px 14px}.inspector-top{padding:5px 14px}
 body.at-bench .bench-details .item-name{font-size:14px}.bench-details .value-row strong{font-size:26px}
 .repair-cinematic[open]{top:118px;padding:15px;max-height:47dvh}.repair-cinematic h2{font-size:23px}.ritual-value strong{font-size:34px}.repair-choices .button-row{flex-direction:row}.repair-choices .button-row button{font-size:12px;padding:9px 8px}
 #move-pad{left:18px;bottom:107px;width:80px;height:80px}#move-pad i{top:22px;left:22px}#interact-key{right:18px;bottom:119px;width:57px;height:57px}
 .hotspot{font-size:12px}.save-status{bottom:3px;font-size:8px;left:8px}
}
@media(max-height:560px) and (min-width:651px){
 .quest-note{display:none}.game-tools button{width:45px;height:43px}.game-tools button>span{font-size:17px}.game-tools button small{font-size:9px}.game-bottom{bottom:8px}
 body.at-bench .interaction-panel,.repair-cinematic[open]{top:65px;left:auto;right:15px;transform:none;width:350px;max-height:calc(100dvh - 130px)}
 .interaction-panel{top:65px;max-height:calc(100dvh - 130px)}#move-pad{bottom:77px;width:72px;height:72px}#move-pad i{top:18px;left:18px}#interact-key{display:none}
}
body.at-bench .interaction-panel{max-height:calc(100dvh - 375px);width:465px}
.compact-bench .bench-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.bench-heading h2{font-size:18px;margin:0}.bench-heading>span{font-size:10px;white-space:nowrap;color:var(--muted)}
.compact-bench .bench-price{display:flex;align-items:center;justify-content:space-between;margin:3px 0 8px}.bench-price strong{font-size:29px;font-weight:650;line-height:1.4;color:#f4d99c}.bench-price strong small{font-size:12px;font-weight:400}.bench-price>span{font-size:10px;color:var(--muted)}
.compact-bench .risk-label{margin:3px 0;font-size:11px}.compact-bench .button-row{display:flex;gap:7px;margin-top:10px}.compact-bench .button-row button{flex:1;padding:8px 9px;font-size:12px;min-height:38px}.compact-bench .button-row button:last-child{flex:.45}.compact-bench .odds-legend{font-size:10px;margin-top:4px}
body.at-bench .compact-bench{padding:12px 17px}.compact-bench>.text-button{display:block;margin:4px auto 0;padding:3px;font-size:11px}
@media(max-width:650px){body.at-bench .interaction-panel{width:calc(100vw - 24px);max-height:36dvh}.bench-heading h2{font-size:15px}.bench-price strong{font-size:26px}.bench-price>span{max-width:115px}.compact-bench .button-row button{padding:7px 4px;font-size:11px}}
@media(max-height:560px) and (min-width:651px){body.at-bench .interaction-panel{width:330px;max-height:calc(100dvh - 130px)}}
.repair-cinematic .repair-ritual{width:100%;max-width:100%}.repair-cinematic .repair-ritual h2{min-height:0;font-size:27px;line-height:1.35;letter-spacing:3px;margin:0 0 4px}.repair-cinematic .ritual-stage{margin-bottom:5px}.repair-cinematic .ritual-value{margin:4px 0}.repair-cinematic .ritual-message{min-height:0;margin:4px 0 9px}.repair-cinematic .repair-choices .text-button{margin-top:7px;padding:3px}.repair-cinematic .repair-next-risk{margin-bottom:5px}.repair-cinematic .repair-choices .button-row{margin-top:5px}
@media(max-width:650px){.repair-cinematic .repair-ritual h2{font-size:22px}.repair-cinematic .ritual-value strong{font-size:32px}.repair-cinematic[open]{max-height:35dvh}.repair-cinematic .ritual-message{font-size:11px}}

/* A knock at the door and a receipt are part of the shop, not a separate screen. */
.visitor-invite{position:absolute;z-index:2;left:26px;top:207px;display:flex;align-items:center;gap:10px;max-width:250px;padding:10px 12px;border:1px solid #d6c28b55;border-radius:4px;background:#253026c9;text-align:left;color:#f2e3c0;box-shadow:0 5px 18px #0002}
.visitor-invite[hidden],.trade-note[hidden]{display:none}.visitor-invite strong{display:block;font-size:13px;font-weight:500}.visitor-invite small{display:block;color:#c3bb9e;font-size:10px;margin-top:4px}.door-chime{display:grid;place-items:center;width:29px;height:32px;border:1px solid #d8b97b55;color:#ead19b;font:19px "Songti SC",serif}.visitor-invite>span:last-child{font-size:22px;color:#c3ac75}.visitor-invite:hover{background:#3b4834e6}body.interacting .visitor-invite{display:none}
.object-history{font:12px/1.8 "Songti SC",serif;color:#d1c4a5;margin:12px 0;padding:8px 10px;border-left:2px solid #b2a073;background:#d3bd7d08}
.guest-kicker{font-size:10px;letter-spacing:2px;color:#c7af7a}.guest-panel .panel-title{margin:7px 0 12px;font-size:26px}.guest-dialogue{font:14px/1.8 "Songti SC",serif;color:#f0dfbb;padding:12px 0;border-top:1px solid #d0bf8b33;border-bottom:1px solid #d0bf8b33;margin:0 0 12px}.guest-purpose{font-size:12px;line-height:1.8;color:#c9c0a7}.guest-purpose b{color:#f4dda8}.guest-rate{font-size:11px;color:#c8b89a}.guest-rate b{color:#f0d08a;font-size:16px}.guest-extra{display:block;color:#d8bd7c;font-size:10px;margin-top:4px}.guest-fulfilled{font-size:12px;color:#d7bf85;line-height:1.8}.guest-panel>.secondary{width:100%;margin-top:12px}.guest-panel .item-pick{gap:12px;padding:12px 0}.guest-panel .item-pick img{width:66px;height:76px;object-fit:contain}.guest-panel .item-pick strong{font-size:13px}.guest-panel .item-pick p{font-size:12px;margin:6px 0}.guest-panel .item-pick button{font-size:12px;padding:7px 12px;min-height:36px}
.trade-note{position:fixed;right:25px;bottom:23px;width:300px;padding:16px 20px 10px;z-index:7;background:linear-gradient(125deg,#e5d4a9,#c9b78d);color:#443b28;box-shadow:0 9px 26px #0005;border:1px solid #f8e8bb;border-radius:2px;pointer-events:auto;transform:rotate(-1deg)}
.trade-note.arriving{animation:receipt-in .3s ease-out}.trade-note>button{position:absolute;right:5px;top:3px;background:none;border:0;color:#78694b;font-size:20px;padding:3px 6px}.trade-eyebrow{font:12px "Songti SC",serif;letter-spacing:3px;color:#7d6340}.trade-body{display:flex;align-items:center;gap:12px;margin:8px 0 5px}.trade-body img{width:52px;height:60px;object-fit:contain;mix-blend-mode:multiply}.trade-body strong{display:block;font-size:12px;font-weight:500;margin-bottom:6px}.trade-body b{font:21px "Songti SC",serif;color:#4b5b3b}.trade-note>small{display:block;font-size:9px;letter-spacing:.2px;padding:5px 0;border-top:1px dashed #89765066}.trade-note>p{font-size:14px;text-align:right;margin:5px 0;color:#415d37}.trade-note.loss>p{color:#8d4937}.trade-seal{position:absolute;right:18px;top:42px;border:2px solid #9c534f77;color:#9c534f88;font:27px "Songti SC",serif;padding:1px 5px;transform:rotate(12deg);pointer-events:none}
@keyframes receipt-in{from{opacity:0;transform:translateY(15px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@media(max-width:650px){.visitor-invite{left:13px;top:128px;max-width:230px;padding:7px 10px}.visitor-invite strong{font-size:12px}.visitor-invite small{font-size:10px}.trade-note{right:12px;bottom:83px;width:calc(100vw - 24px);max-width:340px;padding:13px 17px 8px}.trade-body img{height:48px}.trade-body{margin:5px 0}.trade-seal{top:35px}.object-history{font-size:11px}}
@media(max-height:560px) and (min-width:651px){.visitor-invite{top:81px}.trade-note{bottom:12px;width:265px;padding:12px 16px 7px}}
@media(prefers-reduced-motion:reduce){.trade-note.arriving{animation:none}.trade-note{transform:none}}

/* Keep the object in the centre; the account lives at the edge of the bench. */
body.at-bench .interaction-panel{left:auto;right:22px;top:100px;transform:none;width:310px;max-height:calc(100dvh - 220px)}
.craft-dialog[open]{position:fixed;inset:0;transform:none;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:transparent;color:#f4e4bb;overflow:hidden;display:block;box-shadow:none}
.craft-dialog::backdrop{background:linear-gradient(90deg,#111b1844,transparent 27%,transparent 72%,#111b1844)}
.craft-surface{position:absolute;inset:0;touch-action:none;outline:none;cursor:crosshair}
.craft-surface:focus-visible{box-shadow:inset 0 0 0 2px #ead08c55}
.craft-heading{position:absolute;left:32px;top:30px;pointer-events:none;max-width:330px;text-shadow:0 2px 8px #111}
.craft-heading>span{font-size:11px;letter-spacing:3px;color:#ddc791}.craft-heading h2{font:28px/1.4 "Songti SC",serif;margin:10px 0}.craft-heading p{font-size:12px;line-height:1.9;max-width:255px;color:#e2d6b5}
.craft-slip{position:absolute;right:30px;top:30px;width:205px;background:#243025eb;border:1px solid #cbb27866;padding:17px 20px;box-shadow:0 6px 22px #0003}
.craft-slip small{font-size:10px;color:#c7ba97}.craft-slip strong{display:block;font:31px/1.7 "Songti SC",serif}.craft-slip em{font-style:normal;font-size:13px}.craft-slip p{font-size:12px;line-height:1.8;margin:7px 0}.craft-slip details{font-size:11px;color:#d9cbaa}.craft-slip summary{cursor:pointer;padding:5px 0}.craft-slip .craft-rule{font-size:10px;color:#c7bb96;border-top:1px solid #d2be8f33;padding-top:9px}
.craft-footer{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:min(650px,calc(100vw - 40px));padding:15px 22px 12px;background:#202c24f2;border:1px solid #cbb27866;box-shadow:0 6px 30px #0004;text-align:center}
.craft-meter{display:flex;align-items:center;gap:13px;font-size:11px;color:#e0d0ab}.craft-meter progress{flex:1;min-width:30px;accent-color:#e5bd62;height:5px}.craft-meter b{font-weight:400;color:#e9cd8b;font-size:11px}
.craft-controls{display:flex;justify-content:center;gap:10px;margin:12px 0 7px}.craft-controls button{min-height:42px;border:1px solid #c8b68066;background:#53624a;color:#f2dfad;padding:9px 16px;font-size:13px;cursor:pointer}.craft-controls .primary{background:#e1bd75;color:#2e3527}.craft-controls .text-button{background:none;border-color:transparent;color:#c8bb99}.craft-controls button:disabled{opacity:.4;cursor:default}.craft-footer>small{font-size:10px;color:#aba88e}
.craft-cursor{position:absolute;border:1px solid #fff0b9;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px #d6b56233;pointer-events:none}.craft-start{position:absolute;transform:translateX(-50%);font-size:11px;color:#fff0b9;white-space:nowrap;pointer-events:none;text-shadow:0 1px 4px #000}
body.crafting .game-hud,body.crafting .game-bottom,body.crafting .quest-note,body.crafting .visitor-invite,body.crafting #move-pad,body.crafting #interact-key,body.crafting .save-status{visibility:hidden}
@media(max-width:650px){body.at-bench .interaction-panel{left:10px;right:10px;top:auto;bottom:105px;transform:none;width:auto;max-height:29dvh}.craft-heading{top:16px;left:16px;max-width:53%}.craft-heading>span{font-size:9px;letter-spacing:1px}.craft-heading h2{font-size:19px;margin:5px 0}.craft-heading p{font-size:10px;line-height:1.6;max-width:170px}.craft-slip{top:14px;right:12px;width:142px;padding:10px 12px}.craft-slip strong{font-size:23px}.craft-slip p{font-size:10px;margin:2px 0}.craft-slip .craft-rule{font-size:9px;margin-top:5px;padding-top:5px}.craft-footer{bottom:12px;width:calc(100vw - 20px);padding:11px 10px}.craft-meter{gap:7px;flex-wrap:wrap}.craft-meter span{font-size:10px}.craft-meter b{font-size:10px}.craft-controls{gap:6px;margin-top:9px}.craft-controls button{font-size:11px;padding:8px 10px}.craft-footer>small{font-size:9px}}
@media(max-height:560px) and (min-width:651px){body.at-bench .interaction-panel{top:65px;bottom:auto;width:290px;max-height:calc(100dvh - 145px)}.craft-heading{top:16px;left:20px;max-width:220px}.craft-heading h2{font-size:22px}.craft-heading p{font-size:11px;max-width:190px}.craft-slip{right:20px;top:16px;width:180px;padding:10px 15px}.craft-slip strong{font-size:24px}.craft-footer{bottom:10px;padding:9px 15px;width:550px}.craft-controls{margin:7px 0 4px}.craft-controls button{min-height:35px;padding:7px 12px}}

/* The workbench reads as paper, timber and vermilion inside the game. */
body.at-bench .interaction-panel,.craft-slip{
 color:#413c30;background:linear-gradient(112deg,#eee2c8,#d9c9a9);border:1px solid #a58c61;
 box-shadow:0 12px 36px #100d0844,inset 0 0 0 4px #ede0c144;border-radius:2px;
}
body.at-bench .interaction-panel{transform:rotate(.4deg);right:26px}
body.at-bench .interaction-panel .panel-title,body.at-bench .interaction-panel h2{color:#423b2d}
body.at-bench .interaction-panel .bench-price strong,body.at-bench .interaction-panel .value-row strong{color:#734a2b}
body.at-bench .interaction-panel .bench-heading>span,body.at-bench .interaction-panel .bench-price>span,body.at-bench .interaction-panel .mini-note{color:#6e6756}
body.at-bench .interaction-panel .primary,.craft-controls .primary{background:#9a4837;color:#fff0d3;border-color:#79372b;box-shadow:inset 0 1px #d28b65}
body.at-bench .interaction-panel button{transition:background .12s ease,transform .12s ease}
body.at-bench .interaction-panel button:active,.craft-controls button:active:not(:disabled){transform:translateY(1px)}
.craft-slip{top:40px;right:32px;transform:rotate(1deg);border-top:4px solid #8f4434;padding-top:14px}
.craft-slip small,.craft-slip details,.craft-slip .craft-rule{color:#71634b}.craft-slip .craft-rule{border-color:#9c845e55}
.craft-slip strong{color:#59432a}.craft-slip em{color:#77674a}
.craft-heading h2{font-family:"STKaiti","Kaiti SC","Songti SC",serif;font-weight:500}
.craft-footer{border:1px solid #b69b6d88;background:linear-gradient(120deg,#333c32f5,#202c25f5);border-radius:3px;box-shadow:0 10px 35px #0005}
.craft-controls button{border-radius:2px;transition:background .12s ease,transform .12s ease}
.craft-controls button:focus-visible{outline:2px solid #f1cf85;outline-offset:3px}
.craft-controls button:disabled{opacity:.58}
@media(max-width:650px){body.at-bench .interaction-panel{right:10px;transform:none}.craft-slip{right:12px;top:14px;transform:none}}
@media(prefers-reduced-motion:reduce){.craft-dialog *,.interaction-panel *{animation:none!important;transition:none!important}}
#qa-performance{position:fixed;left:10px;bottom:100px;z-index:1000;background:#172219cc;color:#e6dab5;font:10px/1.4 monospace;padding:4px 7px;pointer-events:none}
body.crafting #qa-performance{left:12px;bottom:12px}
.craft-controls button{width:auto;min-width:0;flex:0 0 auto;white-space:nowrap;line-height:1.35}
.craft-controls .primary{flex:1 1 auto;width:auto}