:root {
  --ink: #2a2420;
  --paper: #f7f1e8;
  --accent: #d4a017;
  --panel: rgba(255, 252, 247, 0.94);
  --ok: #3d8b6e;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  background: #4a4a4a;
  color: var(--ink);
}

#app-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.stay-intent-flow {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(41, 30, 26, 0.88), rgba(23, 63, 55, 0.92)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px);
}

.stay-intent-flow[hidden] {
  display: none;
}

.interaction-overlay[hidden],
#passport-banner[hidden],
.fact-recall[hidden] {
  display: none;
}

.stay-intent-card {
  width: min(880px, 100%);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
}

.stay-intent-header h1 {
  margin: 6px 0 0;
  max-width: 760px;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.2;
}

.stay-intent-eyebrow {
  margin: 0;
  color: #8e3c20;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.stay-intent-header-top {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.stay-intent-copy {
  margin: 12px 0 0;
  color: #61584e;
  font-size: 14px;
  line-height: 1.55;
}

.stay-intent-progress {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stay-intent-progress > span:not(.stay-intent-progress-label) {
  width: 19px;
  height: 4px;
  border-radius: 2px;
  background: #d9d0c4;
}

.stay-intent-progress > span.is-active {
  background: #26715b;
}

.stay-intent-progress-label {
  margin-left: 4px;
  color: #70665c;
  font-size: 10px;
  font-weight: 800;
}

.stay-guide-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(250px, 0.9fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  margin-top: 28px;
}

.stay-save-picker {
  margin-top: 24px;
  border-top: 1px solid #d8cdbc;
  padding-top: 20px;
}

.stay-save-picker-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.stay-save-picker-heading h2,
.stay-save-picker-heading p {
  margin: 0;
}

.stay-save-picker-heading h2 {
  font-size: 16px;
}

.stay-save-picker-heading p {
  color: #70665c;
  font-size: 12px;
}

.stay-save-picker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.stay-save-picker-item {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid #c7b9a4;
  border-radius: 6px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.stay-save-picker-item:hover,
.stay-save-picker-item:focus-visible {
  border-color: #26715b;
  outline: none;
}

.stay-save-picker-item span,
.stay-save-picker-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-save-picker-item small {
  color: #70665c;
}

.stay-guide-room {
  position: relative;
  aspect-ratio: 1.55;
  overflow: hidden;
  border: 1px solid #b8aa94;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(86, 75, 58, 0.18) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49%, rgba(86, 75, 58, 0.18) 49% 51%, transparent 51%),
    repeating-linear-gradient(90deg, #d8c993 0 31%, #c6b479 31% 32%, #e2d4a0 32% 64%);
  box-shadow: inset 0 0 0 10px rgba(84, 55, 34, 0.1);
}

.stay-guide-room::before {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(81, 57, 39, 0.24);
  content: "";
}

.stay-guide-room-label {
  position: absolute;
  top: 16px;
  left: 20px;
  color: #5c4b37;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.stay-guide-marker {
  position: absolute;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #fff8d8;
  border-radius: 50%;
  background: #d7a620;
  color: #2a2420;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(215, 166, 32, 0.2), 0 4px 10px rgba(64, 43, 25, 0.22);
}

.stay-guide-marker.is-entry {
  bottom: 12%;
  left: 10%;
}

.stay-guide-marker.is-host {
  top: 24%;
  right: 12%;
}

.stay-guide-marker.is-tea {
  bottom: 18%;
  left: 49%;
}

.stay-guide-marker.is-rule {
  top: 19%;
  left: 42%;
}

.stay-guide-quests {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide;
}

.stay-guide-quests li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  counter-increment: guide;
}

.stay-guide-quests strong {
  color: #245c4a;
  font-size: 14px;
}

.stay-guide-quests span {
  color: #61584e;
  font-size: 13px;
  line-height: 1.45;
}

.stay-intent-primary {
  width: 100%;
  min-height: 54px;
  margin-top: 28px;
  border: 1px solid #245c4a;
  border-radius: 6px;
  background: #245c4a;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.stay-intent-primary:hover,
.stay-intent-primary:focus-visible,
.stay-intent-yes:hover,
.stay-intent-yes:focus-visible {
  background: #174c3c;
}

.stay-map-card {
  width: min(760px, 100%);
}

.stay-map-shell {
  display: grid;
  justify-items: center;
  margin-top: 16px;
}

.stay-map {
  display: block;
  width: min(100%, 470px);
  height: min(56vh, 480px);
  overflow: hidden;
  border: 1px solid rgba(57, 89, 91, 0.32);
  border-radius: 8px;
  background: #bfe7ea;
  box-shadow: 0 16px 36px rgba(39, 73, 77, 0.2);
}

.stay-map-illustration {
  opacity: 0.76;
  pointer-events: none;
}

.stay-map-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  stroke-width: 2;
}

.stay-map-region {
  cursor: pointer;
  outline: none;
}

.stay-map-land {
  fill: rgba(214, 239, 224, 0.52);
  stroke: rgba(35, 75, 70, 0.82);
  stroke-linejoin: round;
  stroke-width: 2;
  transition: fill 0.15s ease, filter 0.15s ease, transform 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.stay-map-region:nth-of-type(3n + 1) .stay-map-land {
  fill: rgba(255, 220, 157, 0.52);
}

.stay-map-region:nth-of-type(3n + 2) .stay-map-land {
  fill: rgba(177, 224, 234, 0.52);
}

.stay-map-region:hover .stay-map-land,
.stay-map-region:focus-visible .stay-map-land {
  fill: rgba(255, 190, 49, 0.84);
  filter: drop-shadow(0 5px 5px rgba(44, 54, 48, 0.24));
  transform: scale(1.025);
}

.stay-map-region:focus-visible .stay-map-label rect {
  stroke: #8e3c20;
  stroke-width: 2;
}

.stay-map-label {
  pointer-events: none;
}

.stay-map-label rect {
  fill: rgba(255, 253, 249, 0.92);
  stroke: rgba(46, 63, 56, 0.48);
}

.stay-map-label text {
  fill: #2c342f;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.stay-map-region-chugoku_shikoku .stay-map-label text {
  font-size: 9px;
}

.stay-map-hint {
  margin: -6px 0 0;
  color: #6f665d;
  font-size: 12px;
  font-weight: 700;
}

.stay-city-card {
  width: min(650px, 100%);
}

.stay-city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.stay-city-option {
  display: grid;
  min-height: 72px;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(50, 37, 25, 0.18);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.stay-city-option:hover,
.stay-city-option:focus-visible {
  border-color: #a64b29;
  background: #fff0df;
}

.stay-city-pin {
  width: 18px;
  height: 18px;
  grid-row: 1 / 3;
  border: 5px solid #a64b29;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.stay-city-option small {
  color: #7a7168;
  font-size: 10px;
  font-weight: 600;
}

.stay-destination-summary {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  border-block: 1px solid #dfd3c5;
  background: #f7f2e8;
}

.stay-destination-summary div {
  display: grid;
  gap: 3px;
}

.stay-destination-summary small {
  color: #776a5f;
  font-size: 12px;
}

.stay-destination-summary strong {
  color: #245c4a;
  font-size: 27px;
}

.stay-destination-pin {
  width: 29px;
  height: 29px;
  border: 8px solid #a64b29;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.stay-companion-picker {
  margin-top: 24px;
}

.stay-companion-picker h2 {
  margin: 0;
  font-size: 16px;
}

.stay-companion-picker > p {
  margin: 5px 0 0;
  color: #70665c;
  font-size: 12px;
}

.stay-companion-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.stay-companion-option {
  display: grid;
  min-height: 82px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid #d8cbbb;
  border-radius: 6px;
  background: #fff;
  color: #3d352e;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.stay-companion-option:hover,
.stay-companion-option:focus-visible {
  border-color: #26715b;
  background: #f1f7f3;
}

.stay-companion-option[aria-pressed="true"] {
  border-color: #26715b;
  background: #e2f0e9;
  box-shadow: inset 0 0 0 1px #26715b;
}

.stay-companion-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 28px;
  border-radius: 45% 45% 42% 42%;
  background: #a86f3d;
}

.stay-companion-cat .stay-companion-icon::before,
.stay-companion-cat .stay-companion-icon::after {
  position: absolute;
  top: -7px;
  width: 13px;
  height: 13px;
  background: #a86f3d;
  content: "";
  transform: rotate(45deg);
}

.stay-companion-cat .stay-companion-icon::before {
  left: 2px;
}

.stay-companion-cat .stay-companion-icon::after {
  right: 2px;
}

.stay-companion-dog .stay-companion-icon::before,
.stay-companion-dog .stay-companion-icon::after {
  position: absolute;
  top: 1px;
  width: 9px;
  height: 20px;
  border-radius: 6px;
  background: #61432c;
  content: "";
}

.stay-companion-dog .stay-companion-icon::before {
  left: -5px;
  transform: rotate(14deg);
}

.stay-companion-dog .stay-companion-icon::after {
  right: -5px;
  transform: rotate(-14deg);
}

.stay-companion-none .stay-companion-icon {
  border: 2px dashed #9c9186;
  background: transparent;
}

.stay-companion-none .stay-companion-icon::after {
  position: absolute;
  top: 12px;
  left: 5px;
  width: 21px;
  height: 2px;
  background: #9c9186;
  content: "";
  transform: rotate(-36deg);
}

.stay-room-loading,
.stay-room-failure {
  width: min(540px, 100%);
  text-align: center;
}

.stay-room-loading h1,
.stay-room-failure h1 {
  margin: 22px 0 8px;
  font-size: clamp(24px, 5vw, 34px);
}

.stay-room-loading p,
.stay-room-failure p {
  margin: 0;
  color: #685f56;
  font-size: 14px;
  line-height: 1.6;
}

.stay-room-loading-visual {
  display: grid;
  width: min(310px, 100%);
  aspect-ratio: 1.9;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 0 auto;
  padding: 18px;
  border: 7px solid #5d4636;
  border-radius: 6px;
  background: #efe5c1;
  box-shadow: 0 12px 28px rgba(68, 47, 32, 0.2);
}

.stay-room-loading-visual span {
  border: 1px solid #6d7857;
  background:
    repeating-linear-gradient(90deg, rgba(66, 77, 52, 0.06) 0 1px, transparent 1px 5px),
    #c9c78e;
  animation: stay-room-ready 1.2s ease-in-out infinite alternate;
}

.stay-room-loading-visual span:nth-child(2),
.stay-room-loading-visual span:nth-child(3) {
  animation-delay: 0.18s;
}

@keyframes stay-room-ready {
  from {
    filter: brightness(0.92);
  }
  to {
    filter: brightness(1.08);
  }
}

.stay-room-failure-mark {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  place-items: center;
  border: 2px solid #a64b29;
  border-radius: 50%;
  color: #a64b29;
  font-size: 26px;
  font-weight: 900;
}

.stay-intent-option,
.stay-intent-back,
.stay-intent-yes,
.stay-intent-no {
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(50, 37, 25, 0.18);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.stay-intent-option:hover,
.stay-intent-option:focus-visible,
.stay-intent-back:hover,
.stay-intent-back:focus-visible,
.stay-intent-no:hover,
.stay-intent-no:focus-visible {
  border-color: #a64b29;
  background: #fff0df;
}

.stay-intent-option:active,
.stay-intent-primary:active,
.stay-city-option:active,
.stay-intent-yes:active,
.stay-intent-no:active {
  transform: scale(0.98);
}

.stay-intent-back {
  width: 100%;
  margin-top: 14px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.stay-intent-back:disabled,
.stay-intent-primary:disabled,
.stay-city-option:disabled,
.stay-intent-yes:disabled,
.stay-intent-no:disabled {
  cursor: wait;
  opacity: 0.7;
}

.stay-intent-confirm .stay-intent-header h1 {
  color: #245c4a;
}

.stay-intent-actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.stay-intent-yes {
  border-color: #245c4a;
  background: #245c4a;
  color: #fff;
  text-align: center;
}

.stay-intent-no {
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 640px) {
  .stay-intent-flow {
    place-items: start center;
    padding: 12px;
  }

  .stay-intent-card {
    min-height: calc(100dvh - 24px);
    padding: 20px;
  }

  .stay-intent-header-top {
    align-items: flex-start;
  }

  .stay-intent-progress > span:not(.stay-intent-progress-label) {
    width: 12px;
  }

  .stay-intent-progress-label {
    display: none;
  }

  .stay-guide-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .stay-guide-room {
    width: 100%;
  }

  .stay-guide-quests {
    gap: 9px;
  }

  .stay-map {
    width: min(100%, 390px);
    height: min(54vh, 450px);
  }

  .stay-city-grid {
    grid-template-columns: 1fr;
  }

  .stay-companion-options {
    gap: 6px;
  }
}

.room-interior-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: auto;
  padding: clamp(70px, 12vh, 138px) 14px 16px;
  background: #302e40;
  color: #fff8eb;
  pointer-events: auto;
}

.room-interior-screen[hidden] {
  display: none;
}

.digital-gacha-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(33, 29, 50, 0.76);
}

.digital-gacha-overlay[hidden] {
  display: none;
}

.digital-gacha-panel {
  width: min(680px, 100%);
  max-height: min(720px, calc(100dvh - 36px));
  overflow: auto;
  padding: 24px;
  border: 3px solid #85633f;
  border-radius: 18px;
  background: #fff7e7;
  color: #44342c;
  box-shadow: 0 18px 60px rgba(24, 17, 29, 0.34);
}

.digital-gacha-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.digital-gacha-panel h2,
.digital-gacha-panel h3,
.digital-gacha-panel p {
  margin: 0;
}

.digital-gacha-panel h2 {
  color: #6c4b9e;
  font-size: clamp(22px, 4vw, 30px);
}

.digital-gacha-close {
  width: 40px;
  height: 40px;
  border: 2px solid #85633f;
  border-radius: 50%;
  background: #fff;
  color: #44342c;
  font-size: 24px;
  cursor: pointer;
}

.digital-gacha-intro {
  margin-top: 12px !important;
  line-height: 1.6;
}

.digital-gacha-policy,
.digital-gacha-status {
  margin-top: 10px !important;
  color: #6d625e;
  font-size: 12px;
  line-height: 1.5;
}

.digital-gacha-prizes,
.digital-gacha-prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.digital-gacha-prize,
.digital-gacha-price {
  display: grid;
  gap: 6px;
  min-height: 100px;
  padding: 12px;
  border: 2px solid #dacba8;
  border-radius: 12px;
  background: #fffdf8;
}

.digital-gacha-prize > span {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ead8a8;
  font-size: 11px;
  font-weight: 900;
}

.digital-gacha-prize h3,
.digital-gacha-price h3 {
  font-size: 13px;
  line-height: 1.35;
}

.digital-gacha-prize p,
.digital-gacha-price p {
  color: #6c4b9e;
  font-size: 17px;
  font-weight: 900;
}

.digital-gacha-prize.is-ssr {
  border-color: #c98c47;
  background: #fff3ce;
}

.digital-gacha-prize.is-sr {
  border-color: #9ca8d9;
  background: #f0f3ff;
}

.digital-gacha-price {
  min-height: 74px;
}

.digital-gacha-price > span {
  color: #6c4b9e;
  font-size: 11px;
  font-weight: 800;
}

.digital-gacha-draw {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: #c8bdb5;
  color: #fff;
  font: inherit;
  font-weight: 800;
}

@media (max-width: 620px) {
  .digital-gacha-panel {
    padding: 18px;
  }

  .digital-gacha-prizes,
  .digital-gacha-prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.room-interior-toolbar {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  display: flex;
  gap: 6px;
}

.room-interior-tool {
  min-height: 38px;
  border: 2px solid #795a3b;
  border-radius: 11px;
  padding: 6px 12px;
  background: #fff8e8;
  color: #443524;
  box-shadow: 0 3px 0 rgba(121, 90, 59, 0.3);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.room-interior-tool:hover,
.room-interior-tool:focus-visible,
.room-interior-hotspot:focus-visible,
.room-interior-dialogue-next:focus-visible {
  outline: 3px solid #f4d978;
  outline-offset: 3px;
}

.room-interior-heading {
  position: absolute;
  top: 66px;
  left: 18px;
  z-index: 3;
  display: grid;
  gap: 3px;
  pointer-events: none;
}

.room-interior-heading strong {
  color: #fff8eb;
  font-size: 16px;
}

.room-interior-heading span {
  color: rgba(255, 248, 235, 0.62);
  font-size: 11px;
}

.room-interior-room-nav {
  position: absolute;
  top: 103px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: min(440px, calc(100vw - 32px));
}

.room-interior-room-nav:empty {
  display: none;
}

.room-interior-room-nav button {
  min-height: 30px;
  border: 1px solid rgba(255, 248, 235, 0.5);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(42, 42, 58, 0.82);
  color: rgba(255, 248, 235, 0.84);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.room-interior-room-nav button:hover,
.room-interior-room-nav button:focus-visible,
.room-interior-room-nav button.is-active {
  border-color: #f3cf70;
  background: #9b7cc8;
  color: #fff8eb;
}

.room-interior-room-nav button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.room-interior-stage {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  aspect-ratio: 760 / 430;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #eee8f3;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.room-interior-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.room-interior-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-interior-interactables {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-interior-object {
  position: absolute;
  display: grid;
  width: 44px;
  height: 36px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid #745531;
  border-radius: 12px;
  background: rgba(255, 248, 232, 0.95);
  color: #493729;
  box-shadow: 0 4px 10px rgba(59, 41, 27, 0.25);
  font-size: 19px;
  cursor: pointer;
  pointer-events: auto;
}

.room-interior-object.is-person {
  border-color: #9b7cc8;
  background: rgba(238, 228, 255, 0.96);
}

.room-interior-object.is-off {
  border-style: dashed;
  border-color: #9f866c;
  background: rgba(255, 248, 232, 0.82);
  opacity: 0.84;
}

.room-interior-object.is-future {
  border-style: dashed;
  border-color: #82949d;
  background: rgba(230, 240, 239, 0.88);
  opacity: 0.76;
}

.room-interior-object:hover,
.room-interior-object:focus-visible {
  outline: 3px solid #f4d978;
  outline-offset: 3px;
}

.room-interior-hotspot {
  position: absolute;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 3px solid #f3c552;
  border-radius: 50%;
  background: rgba(255, 247, 193, 0.88);
  color: #624529;
  box-shadow: 0 0 0 6px rgba(243, 197, 82, 0.16), 0 5px 14px rgba(59, 41, 27, 0.22);
  font-size: 21px;
  cursor: pointer;
  pointer-events: auto;
  animation: room-hotspot-pulse 1.8s ease-in-out infinite;
}

.room-interior-hotspot.is-locked {
  border-color: #a9a19a;
  background: rgba(246, 240, 223, 0.58);
  opacity: 0.54;
  filter: grayscale(0.6);
}

/* 次に押す1箇所だけ強調: 強めのパルス + 赤いふきだし（どこを押すか迷わせない） */
.room-interior-hotspot.is-next {
  animation: room-hotspot-pulse-next 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 9px rgba(229, 88, 62, 0.22), 0 5px 14px rgba(59, 41, 27, 0.28);
}

.room-interior-hotspot.is-next::after {
  content: "つぎはここ";
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #fff8e8;
  border-radius: 999px;
  padding: 4px 12px;
  background: #e5583e;
  color: #fff8e8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: room-hotspot-cue-bounce 1.1s ease-in-out infinite;
}

:lang(en) .room-interior-hotspot.is-next::after {
  content: "Tap here";
}

@keyframes room-hotspot-pulse-next {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.14); }
}

@keyframes room-hotspot-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -7px); }
}

.room-interior-hotspot.is-completed {
  border-color: #7fb493;
  background: rgba(223, 245, 225, 0.92);
  color: #3c7752;
  cursor: default;
  animation: none;
}

.room-interior-dialogue {
  position: relative;
  width: min(560px, calc(100vw - 34px));
  min-height: 78px;
  border: 3px solid #745531;
  border-radius: 16px;
  padding: 18px 48px 16px 20px;
  background: #fff8e8;
  color: #493729;
  box-shadow: 0 5px 0 rgba(100, 71, 42, 0.62), 0 15px 30px rgba(0, 0, 0, 0.2);
}

.room-interior-speaker {
  position: absolute;
  top: -27px;
  left: 8px;
  max-width: 160px;
  overflow: hidden;
  border: 2px solid #745531;
  border-radius: 12px;
  padding: 4px 14px;
  background: #9b7cc8;
  color: #fff8eb;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-interior-dialogue p {
  margin: 0;
  min-height: 42px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.room-interior-dialogue-next {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #805d36;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.room-interior-helper {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 248, 235, 0.68);
  font-size: 12px;
  text-align: center;
}

.room-interior-guide {
  position: fixed;
  bottom: 18px;
  left: max(14px, calc(50% - 330px));
  z-index: 4;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 2px solid #fff5c8;
  border-radius: 48% 48% 42% 42%;
  background: #f3d56d;
  color: #60472f;
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25);
  font-size: 25px;
  font-weight: 900;
  cursor: pointer;
  animation: room-guide-float 1.8s ease-in-out infinite;
}

.room-interior-guide:hover,
.room-interior-guide:focus-visible {
  background: #ffe88f;
}

@keyframes room-hotspot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(243, 197, 82, 0.14), 0 5px 14px rgba(59, 41, 27, 0.22);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(243, 197, 82, 0.04), 0 5px 14px rgba(59, 41, 27, 0.22);
  }
}

@keyframes room-guide-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@media (max-width: 640px) {
  .room-interior-screen {
    gap: 12px;
    padding-top: 68px;
  }

  .room-interior-heading {
    top: 52px;
    left: 12px;
  }

  .room-interior-room-nav {
    top: 87px;
    left: 12px;
  }

  .room-interior-stage {
    width: min(760px, calc(100vw - 18px));
  }

  .room-interior-dialogue {
    width: min(560px, calc(100vw - 22px));
    padding-right: 42px;
  }

  .room-interior-dialogue p {
    font-size: 13px;
  }

  .room-interior-hotspot {
    width: 42px;
    height: 42px;
  }

  .room-interior-object {
    width: 40px;
    height: 34px;
  }

  .room-interior-guide {
    bottom: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
  }
}

/* KIBOU village title screen: a calm, low-friction first frame before the map. */
.stay-intent-flow.is-village-title {
  padding: 6px;
  background: #26382f;
}

.stay-intent-flow.is-village-title .stay-village-title {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 12px);
  align-items: center;
  justify-content: center;
  width: min(1086px, 100%);
  padding: clamp(28px, 7vh, 72px) 24px 28px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #b9e4f3 0 54%, #dff2e9 54% 55%, #a5d979 55% 100%);
  color: #52634b;
  text-align: center;
  box-shadow: 0 10px 0 rgba(9, 35, 25, 0.22), 0 24px 60px rgba(5, 24, 17, 0.28);
}

.stay-intent-flow.is-village-title .stay-village-title::after {
  display: none;
}

.stay-village-emblem {
  margin-bottom: 24px;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: 0.16em;
  filter: drop-shadow(0 3px 2px rgba(54, 92, 54, 0.16));
}

.stay-village-brand {
  margin: 0;
  color: #fffdf8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 8vw, 78px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 0.98;
  text-shadow: 3px 4px 0 #ee927e, 0 7px 18px rgba(67, 113, 91, 0.2);
}

.stay-village-badge {
  margin: 20px 0 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 252, 0.9);
  color: #57634e;
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 800;
  line-height: 1.35;
}

.stay-village-copy {
  max-width: 600px;
  margin: 16px 0 0;
  color: #4f6249;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.65;
}

.stay-village-route {
  max-width: 640px;
  margin: 4px 0 0;
  color: #587451;
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 800;
  line-height: 1.55;
}

.stay-village-first-quest {
  margin: 14px 0 0;
  border: 2px solid #d9b26a;
  border-radius: 999px;
  padding: 8px 22px;
  background: #fff3d3;
  color: #6b4d23;
  font-size: clamp(13px, 1.7vw, 15px);
  font-weight: 800;
}

.stay-village-title .stay-village-enter {
  width: min(250px, 100%);
  min-height: 58px;
  margin-top: 22px;
  border: 3px solid #80502d;
  border-radius: 999px;
  background: #f5bb4f;
  color: #4d3828;
  font-size: 18px;
  box-shadow: 0 7px 0 #80502d, 0 12px 22px rgba(94, 73, 31, 0.2);
}

.stay-village-title .stay-village-enter:hover,
.stay-village-title .stay-village-enter:focus-visible {
  border-color: #6f4528;
  background: #ffc960;
  color: #3d2c20;
  transform: translateY(-2px);
}

.stay-village-title .stay-village-enter:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #80502d, 0 7px 14px rgba(94, 73, 31, 0.18);
}

.stay-village-controls {
  max-width: 660px;
  margin: 24px 0 0;
  color: #5b704f;
  font-size: 11px;
  line-height: 1.6;
}

.stay-village-title .stay-intent-secondary {
  width: auto;
  min-height: 36px;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: #496244;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stay-village-title .stay-intent-secondary:hover,
.stay-village-title .stay-intent-secondary:focus-visible {
  border: 0;
  background: transparent;
  color: #2c4933;
}

.stay-village-title .stay-save-picker {
  width: min(720px, 100%);
  margin-top: 16px;
  border-top-color: rgba(55, 92, 48, 0.24);
  padding-top: 14px;
}

.stay-village-title .stay-save-picker-heading {
  color: #4b6047;
}

.stay-village-title .stay-save-picker-heading h2 {
  font-size: 13px;
}

.stay-village-title .stay-save-picker-heading p {
  color: #5c704f;
}

.stay-village-title .stay-save-picker-item {
  border-color: rgba(60, 91, 53, 0.2);
  background: rgba(255, 255, 250, 0.72);
}

@media (max-width: 640px) {
  .stay-intent-flow.is-village-title .stay-village-title {
    min-height: calc(100dvh - 12px);
    padding: 26px 18px 18px;
  }

  .stay-village-emblem {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .stay-village-brand {
    font-size: clamp(48px, 15vw, 68px);
  }

  .stay-village-badge {
    padding-inline: 12px;
  }

  .stay-village-copy {
    max-width: 330px;
  }

  .stay-village-route {
    max-width: 330px;
  }

  .stay-village-title .stay-save-picker-heading {
    display: grid;
    gap: 4px;
  }

  .stay-village-title .stay-save-picker-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stay-map-land,
  .stay-city-option,
  .stay-intent-primary {
    transition: none;
  }

  .stay-room-loading-visual span {
    animation: none;
  }

  .guidance-spirit-face {
    animation: none;
  }
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hud-dock {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 15;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.hud-dock-tools {
  display: grid;
  gap: 7px;
}

.hud-dock-tools[hidden] {
  display: none;
}

.hud-dock[hidden] {
  display: none;
}

.life-experience-toggle {
  position: absolute;
  bottom: 22px;
  left: 140px;
  z-index: 18;
  min-width: 58px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 6px;
  padding: 7px 10px;
  background: rgba(29, 38, 35, 0.9);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.life-experience-toggle[hidden],
.life-experience-panel[hidden] {
  display: none;
}

.life-experience-toggle:hover,
.life-experience-toggle:focus-visible,
.life-experience-toggle[aria-expanded="true"] {
  border-color: #f3d56d;
  background: #40554c;
}

.life-experience-panel {
  position: fixed;
  bottom: 72px;
  left: 72px;
  z-index: 19;
  width: min(420px, calc(100vw - 92px));
  max-height: min(680px, calc(100vh - 112px));
  overflow: auto;
  border: 1px solid rgba(80, 68, 54, 0.24);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 252, 247, 0.97);
  box-shadow: 0 14px 36px rgba(31, 25, 20, 0.25);
  pointer-events: auto;
}

.life-experience-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(80, 68, 54, 0.15);
  padding-bottom: 10px;
}

.life-experience-header h2,
.life-experience-panel h3 {
  margin: 0;
  color: #2f4f45;
}

.life-experience-header > span {
  color: #6d655d;
  font-size: 12px;
  font-weight: 800;
}

.life-experience-close {
  display: grid;
  width: 28px;
  height: 28px;
  margin-left: auto;
  place-items: center;
  border: 0;
  background: transparent;
  color: #57463b;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.life-experience-intro,
.life-experience-panel h3,
.life-experience-reaction,
.life-experience-lesson,
.life-experience-prompt,
.life-experience-next,
.life-experience-ending {
  line-height: 1.5;
}

.life-experience-intro,
.life-experience-prompt {
  margin: 12px 0 8px;
  color: #655d55;
  font-size: 13px;
}

.life-experience-list,
.life-experience-choices {
  display: grid;
  gap: 8px;
}

.life-experience-scene,
.life-experience-choice,
.life-experience-secondary {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid rgba(80, 68, 54, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.life-experience-scene span {
  color: #71685e;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.life-experience-scene:hover,
.life-experience-scene:focus-visible,
.life-experience-choice:hover,
.life-experience-choice:focus-visible,
.life-experience-secondary:hover,
.life-experience-secondary:focus-visible {
  border-color: #26715b;
  background: #f1f7f3;
}

.life-experience-scene.is-complete,
.life-experience-scene:disabled {
  border-color: #c3d8c7;
  background: #edf6ef;
  color: #4e7a5b;
  cursor: default;
}

.life-experience-reaction {
  margin: 14px 0 8px;
  padding: 10px 12px;
  border-left: 3px solid #d4a017;
  background: #fff7dc;
  font-size: 13px;
  font-weight: 700;
}

.life-experience-lesson {
  margin: 8px 0 12px;
  color: #4f6759;
  font-size: 13px;
}

.life-experience-secondary {
  display: block;
  width: auto;
  margin-bottom: 14px;
  background: transparent;
  font-size: 12px;
  text-align: center;
}

.life-experience-summary {
  margin-top: 16px;
  border-top: 1px solid rgba(80, 68, 54, 0.15);
  padding-top: 14px;
}

.life-experience-summary h3 {
  font-size: 15px;
}

.life-experience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.life-experience-tags span {
  border: 1px solid #b7d1bb;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef7ef;
  color: #2f6848;
  font-size: 11px;
  font-weight: 800;
}

.life-experience-lessons {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #5b554d;
  font-size: 12px;
  line-height: 1.45;
}

.life-experience-ending {
  margin: 12px 0 0;
  color: #8e3c20;
  font-size: 13px;
  font-weight: 800;
}

.life-experience-next {
  margin: 10px 0 0;
  color: #6b766e;
  font-size: 12px;
}

.hud-dock-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 6px;
  background: rgba(29, 38, 35, 0.88);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.hud-dock-toggle {
  background: rgba(255, 252, 244, 0.95);
  color: #2f4f45;
}

.hud-menu-glyph,
.hud-menu-glyph::before,
.hud-menu-glyph::after {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.hud-menu-glyph {
  position: relative;
}

.hud-menu-glyph::before,
.hud-menu-glyph::after {
  position: absolute;
  left: 0;
  content: "";
}

.hud-menu-glyph::before {
  top: -6px;
}

.hud-menu-glyph::after {
  top: 6px;
}

.hud-dock.is-expanded .hud-menu-glyph {
  background: transparent;
}

.hud-dock.is-expanded .hud-menu-glyph::before {
  top: 0;
  transform: rotate(45deg);
}

.hud-dock.is-expanded .hud-menu-glyph::after {
  top: 0;
  transform: rotate(-45deg);
}

.hud-dock-button:hover,
.hud-dock-button:focus-visible,
.hud-dock-button.is-active,
.hud-dock-button[aria-expanded="true"] {
  border-color: #f1ca5b;
  background: #245c4a;
  color: #fff9e7;
}

.hud-dock .announcement-toggle {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  display: grid;
  width: 42px;
  height: 42px;
  transform: none;
}

.hud-dock .announcement-toggle[hidden] {
  display: none;
}

.hud-dock .announcement-count {
  position: absolute;
  top: -5px;
  right: -5px;
}

.avatar-tints {
  position: absolute;
  top: 52px;
  left: 14px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.avatar-tints button {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.avatar-tints button[data-tint="#4d6bc7"] {
  background: #4d6bc7;
}
.avatar-tints button[data-tint="#2f8f6b"] {
  background: #2f8f6b;
}
.avatar-tints button[data-tint="#c45c4a"] {
  background: #c45c4a;
}
.avatar-tints button[data-tint="#8b6bb8"] {
  background: #8b6bb8;
}

.locale-bar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}

.locale-bar button {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.locale-bar button.active {
  background: var(--accent);
  color: #2a2420;
  border-color: var(--accent);
}

#world-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.world-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #e8b923 55%, #c48910);
  box-shadow:
    0 0 0 3px rgba(255, 220, 80, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.15s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

.world-icon .glyph {
  font-size: 22px;
  line-height: 1;
}

.world-icon .glyph.check {
  font-size: 26px;
  font-weight: 800;
  color: #5a4200;
}

.world-icon.locked {
  opacity: 0.35;
  filter: grayscale(0.7);
  pointer-events: none;
}

.world-icon.available {
  opacity: 1;
  animation: bob 1.6s ease-in-out infinite;
}

.world-icon.done {
  background: radial-gradient(circle at 35% 30%, #fffceb, #f0d060 60%, #d4a017);
  animation: none;
}

.world-icon.completing {
  animation: icon-complete 0.5s ease-in forwards;
  pointer-events: none;
}

@keyframes icon-complete {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
}

.world-icon.flash {
  transform: translate(-50%, -50%) scale(1.35) !important;
  box-shadow:
    0 0 0 6px rgba(255, 230, 120, 0.75),
    0 0 28px rgba(255, 210, 60, 0.9);
}

.quest-particle {
  position: fixed;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8d0, #e8b923);
  pointer-events: none;
  z-index: 4;
  animation: particle-burst 0.65s ease-out forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

@keyframes bob {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

.room-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--panel);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  font-size: 14px;
}

.movement-pad {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 17;
  display: none;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(2, 42px);
  gap: 5px;
  pointer-events: auto;
  touch-action: none;
}

.movement-pad[data-enabled="true"] button {
  display: inline-flex;
}

.movement-pad button {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  background: rgba(35, 45, 43, 0.82);
  color: #fffaf1;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
}

.movement-pad button:active,
.movement-pad button:focus-visible {
  background: #d4a017;
  color: #2a2420;
  outline: 2px solid #fffaf1;
  outline-offset: 2px;
}

.movement-pad button[data-move="up"] {
  grid-column: 2;
  grid-row: 1;
}

.movement-pad button[data-move="left"] {
  grid-column: 1;
  grid-row: 2;
}

.movement-pad button[data-move="down"] {
  grid-column: 2;
  grid-row: 2;
}

.movement-pad button[data-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

.village-map-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  border: 6px solid #263d31;
  background: #a8d97d;
  color: #443524;
  pointer-events: auto;
  touch-action: none;
}

.village-map-screen[hidden] {
  display: none;
}

.village-map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  outline: none;
}

.village-map-toolbar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.village-map-tool {
  min-height: 40px;
  border: 2px solid #795a3b;
  border-radius: 10px;
  background: #fff8e8;
  color: #443524;
  box-shadow: 0 3px 0 rgba(121, 90, 59, 0.25);
  font: inherit;
  font-weight: 800;
}

.village-map-tool {
  padding: 6px 12px;
  cursor: pointer;
}

.village-map-tool:hover,
.village-map-tool:focus-visible,
.village-map-pad button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.village-map-prompt {
  position: absolute;
  bottom: 38px;
  left: 50%;
  z-index: 2;
  max-width: min(92vw, 460px);
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  padding: 9px 18px;
  background: rgba(48, 48, 38, 0.88);
  color: #fffdf5;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.village-map-hint {
  position: absolute;
  right: 16px;
  bottom: 10px;
  left: 16px;
  z-index: 2;
  margin: 0;
  color: rgba(66, 76, 52, 0.9);
  font-size: 12px;
  text-align: center;
}

.village-map-pad {
  position: absolute;
  right: 16px;
  bottom: 74px;
  z-index: 3;
  display: none;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(2, 42px);
  gap: 5px;
  touch-action: none;
}

.village-map-pad button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  background: rgba(52, 68, 48, 0.84);
  color: #fffaf1;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  user-select: none;
  -webkit-user-select: none;
}

.village-map-pad button:active {
  background: #d4a017;
  color: #2a2420;
}

.village-map-pad button[data-village-move="up"] {
  grid-column: 2;
  grid-row: 1;
}

.village-map-pad button[data-village-move="left"] {
  grid-column: 1;
  grid-row: 2;
}

.village-map-pad button[data-village-move="down"] {
  grid-column: 2;
  grid-row: 2;
}

.village-map-pad button[data-village-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

@media (pointer: coarse), (max-width: 720px) {
  .movement-pad[data-enabled="true"] {
    display: grid;
  }

  .village-map-pad {
    display: grid;
  }
}

.avatar-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f0c8a0, #c68658);
  border: 2px solid #fff;
}

.announcement-toggle {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 12;
  display: inline-flex;
  width: 48px;
  height: 36px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: rgba(25, 33, 31, 0.88);
  color: #fff;
  font: inherit;
  font-weight: 800;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.announcement-toggle[hidden] {
  display: none;
}

.announcement-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #d4a017;
  color: #231f1a;
  font-size: 10px;
  line-height: 16px;
}

.announcement-panel {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 13;
  width: min(420px, calc(100vw - 32px));
  max-height: min(62vh, 520px);
  transform: translateX(-50%);
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  background: #fffdf8;
  pointer-events: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.hud-dock ~ .announcement-panel {
  top: 72px;
  left: 70px;
  transform: none;
}

.announcement-panel[hidden] {
  display: none;
}

.announcement-panel header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #f2f5f0;
}

.announcement-panel h2 {
  margin: 0;
  font-size: 15px;
}

.announcement-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #2a2420;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.announcement-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.announcement-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid #477565;
}

.announcement-item:last-child {
  border-bottom: 0;
}

.announcement-item-event {
  border-left-color: #286ea8;
}

.announcement-item-maintenance {
  border-left-color: #9a681b;
}

.announcement-item-urgent {
  border-left-color: #b93636;
  background: #fff4f2;
}

.announcement-meta {
  margin-bottom: 4px;
  color: #5d6863;
  font-size: 11px;
  font-weight: 700;
}

.announcement-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

.announcement-item p {
  margin: 6px 0 0;
  color: #49433e;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .announcement-toggle {
    top: 58px;
  }

  .announcement-panel {
    top: 102px;
    max-height: calc(100vh - 118px);
  }

}

#quest-panel {
  position: absolute;
  top: 16px;
  right: auto;
  left: 70px;
  width: min(280px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  pointer-events: auto;
}

#quest-panel[hidden],
.room-minimap[hidden],
.save-panel[hidden] {
  display: none;
}

.save-panel {
  position: fixed;
  z-index: 18;
  top: 84px;
  left: 72px;
  width: min(390px, calc(100vw - 92px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  border: 1px solid rgba(80, 68, 54, 0.3);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(31, 25, 20, 0.2);
}

.save-panel-header,
.save-slot-row,
.save-slot-actions {
  display: flex;
  align-items: center;
}

.save-panel-header {
  justify-content: space-between;
}

.save-panel-header h2,
.save-panel-note {
  margin: 0;
}

.save-panel-note {
  margin-top: 4px;
  color: #70665c;
  font-size: 12px;
}

.save-slot-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.save-slot-row {
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(80, 68, 54, 0.16);
  padding-top: 10px;
}

.save-slot-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.save-slot-row span {
  overflow: hidden;
  color: #70665c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-slot-actions {
  flex: 0 0 auto;
  gap: 5px;
}

.save-slot-actions button {
  min-height: 32px;
  border: 1px solid #b7a994;
  border-radius: 5px;
  padding: 5px 9px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.save-slot-actions button:hover,
.save-slot-actions button:focus-visible {
  border-color: #26715b;
}

.save-slot-actions button.is-danger {
  color: #944932;
}

@media (max-width: 640px) {
  .stay-save-picker-heading {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }

  .stay-save-picker-list {
    grid-template-columns: 1fr;
  }

  .save-panel {
    top: 70px;
    left: 62px;
    width: calc(100vw - 76px);
  }

  .save-slot-row {
    align-items: start;
    flex-direction: column;
  }
}

.quest-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#quest-panel h2 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.hud-panel-close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #57463b;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

#quest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#quest-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
}

#quest-list li:last-child {
  border-bottom: 0;
}

#quest-list li.completed {
  color: var(--ok);
}

#quest-list li.locked {
  opacity: 0.45;
}

#quest-list .mark {
  width: 1.25em;
  text-align: center;
}

.hint,
.fact {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

.fact {
  color: #7a5a00;
  font-weight: 600;
}

.fact-recall {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fact-recall button {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

#toast {
  /* body 直下に置き、村(40)・部屋(10)・モーダル(50)より上に出す（#hud 内だと z-index:2 に閉じ込められる） */
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: #1f1a16;
  color: #fff8ee;
  border-radius: 12px;
  font-size: 14px;
  max-width: min(420px, calc(100vw - 32px));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 60;
}

#game-operation-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: min(340px, calc(100vw - 36px));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 10px 13px;
  background: rgba(31, 26, 22, 0.92);
  color: #fff8ee;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

#game-operation-status[data-state="pending"] {
  border-color: #e3bd59;
}

#game-operation-status[data-state="success"] {
  border-color: #78c59c;
}

#game-operation-status[data-state="failure"] {
  border-color: #ef8a7e;
  background: rgba(92, 31, 27, 0.95);
}

#passport-banner {
  /* body 直下・村(40)より上、モーダル(50)より下 */
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  background: linear-gradient(160deg, #fff8e6, #f5e6b8);
  border: 1px solid var(--accent);
  border-radius: 16px;
  pointer-events: auto;
  max-width: min(420px, calc(100vw - 32px));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  z-index: 45;
}

#passport-banner a {
  color: #7a5a00;
  font-weight: 700;
}

.passport-next,
.passport-boundary {
  margin: 10px 0 0;
  color: #5f4f3b;
  font-size: 12px;
  line-height: 1.45;
}

.passport-boundary {
  color: #6b766e;
  font-size: 11px;
}

.passport-learning-tags {
  margin: 10px 0 0;
  color: #2f6848;
  font-size: 12px;
  line-height: 1.45;
}

.passport-card .registration-link {
  display: inline-block;
  margin-top: 10px;
  color: #7a5a00;
  font-weight: 700;
}

#hall-link {
  font-size: 13px;
}

.entry-blurb {
  position: absolute;
  top: 64px;
  left: 16px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
}

.field-note {
  position: absolute;
  top: 142px;
  left: 70px;
  z-index: 7;
  width: min(300px, calc(100vw - 32px));
  padding: 13px 34px 13px 14px;
  border: 1px solid rgba(78, 44, 20, 0.2);
  border-left: 3px solid #b33d21;
  border-radius: 8px;
  background: rgba(255, 250, 241, 0.95);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
}

.field-note[hidden] {
  display: none;
}

.field-note-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #57463b;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.field-note-label {
  margin: 0;
  color: #7a5a00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.field-note-proof {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: pre-line;
}

.field-note-problem {
  margin: 8px 0 0;
  color: #57463b;
  font-size: 12px;
  line-height: 1.55;
}

.field-note-hosts {
  margin: 8px 0 0;
  color: #1f6b55;
  font-size: 12px;
  font-weight: 800;
}

.start-arrow {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  background: rgba(212, 160, 23, 0.95);
  color: #2a2420;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  animation: bob 1.2s ease-in-out infinite;
}

.room-minimap {
  position: absolute;
  top: 100px;
  right: auto;
  left: 70px;
  display: grid;
  grid-template-columns: repeat(2, 28px);
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  pointer-events: none;
}

.guidance-spirit {
  position: absolute;
  bottom: 18px;
  left: 72px;
  z-index: 18;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.guidance-spirit-toggle {
  position: relative;
  width: 58px;
  height: 64px;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.25));
}

.guidance-spirit-face {
  position: absolute;
  inset: 9px 7px 4px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 48% 48% 42% 42%;
  background: #f3d56d;
  animation: spirit-float 1.8s ease-in-out infinite;
}

.guidance-spirit-face::before {
  position: absolute;
  top: 17px;
  left: 11px;
  width: 5px;
  height: 7px;
  border-radius: 50%;
  background: #2f352f;
  box-shadow: 18px 0 #2f352f;
  content: "";
}

.guidance-spirit-face::after {
  position: absolute;
  top: -12px;
  left: 15px;
  width: 13px;
  height: 18px;
  border: 2px solid #fff8d9;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(12deg);
}

.guidance-spirit-bubble {
  position: relative;
  width: min(330px, calc(100vw - 160px));
  min-height: 88px;
  padding: 14px 38px 14px 16px;
  border: 1px solid rgba(54, 47, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.97);
  color: #332e28;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.guidance-spirit-bubble[hidden] {
  display: none;
}

.guidance-spirit-bubble strong {
  color: #26715b;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.guidance-spirit-bubble p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.guidance-spirit-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #57463b;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}

.guidance-spirit-focus {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #6c8d78;
  border-radius: 999px;
  background: #edf7ef;
  color: #2f5940;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.guidance-target {
  position: relative;
  z-index: 30;
  outline: 3px solid #f2c14e;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgb(242 193 78 / 22%), 0 0 24px rgb(242 193 78 / 72%);
  animation: guidance-target-pulse 1.45s ease-in-out infinite;
}

.world-icon.guidance-target {
  transform-origin: center;
}

#room-minimap [data-spot].guidance-target,
#quest-list [data-code].guidance-target {
  border-radius: 8px;
}

@keyframes guidance-target-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes spirit-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

.room-minimap span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.room-minimap span.active {
  background: var(--accent);
  color: #2a2420;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 220, 80, 0.5);
}

.room-minimap span.done {
  background: rgba(61, 139, 110, 0.55);
  color: #fff;
}

.audio-toggle {
  position: absolute;
  top: 14px;
  right: 96px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  pointer-events: auto;
}

.audio-toggle.active {
  background: var(--accent);
  color: #2a2420;
}

.world-icon.pulse-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 220, 80, 0.65);
  animation: pulse-ring 1.4s ease-out infinite;
}

.world-icon.hovered {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.92);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

#quest-list li.spring-in {
  animation: quest-spring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes quest-spring {
  0% {
    transform: scale(0.92);
    color: var(--accent);
  }
  100% {
    transform: scale(1);
    color: var(--ok);
  }
}

.interaction-overlay {
  position: fixed;
  inset: 0;
  /* 全画面の上に出るモーダル。#village-map-screen(40) / #room-interior-screen(10) より上に置く。 */
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(20, 16, 12, 0.45);
  pointer-events: auto;
}

.interaction-card {
  width: min(400px, calc(100vw - 32px));
  padding: 18px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.interaction-card .host-line {
  font-weight: 600;
  line-height: 1.5;
}

.choice-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.choice-grid button,
.interaction-card .btn {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.choice-grid button.highlight {
  border-color: var(--accent);
  background: #fff8e6;
}

.host-preview ul {
  margin: 8px 0;
  padding-left: 1.2em;
  font-size: 13px;
}

.passport-ceremony {
  perspective: 900px;
}

.passport-card {
  width: min(360px, calc(100vw - 32px));
  padding: 24px;
  background: linear-gradient(160deg, #fff8e6, #f5e6b8);
  border: 2px solid var(--accent);
  border-radius: 18px;
  transform: rotateY(90deg);
  transition: transform 0.65s ease;
  text-align: center;
}

.passport-card.flipped {
  transform: rotateY(0deg);
}

.passport-card .stamps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}

.passport-card .stamp {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff6c8, #e8b923);
  font-weight: 800;
  color: #5a4200;
}

.passport-card .eyebrow {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  letter-spacing: 0.08em;
}

.passport-card h2 {
  margin: 6px 0 0;
  font-size: 1.25rem;
}

.passport-card .btn {
  margin-top: 14px;
  width: 100%;
  font-weight: 700;
  background: var(--accent);
  border: 0;
}

.decor-panel {
  position: absolute;
  left: 16px;
  bottom: 28px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  z-index: 6;
}

.decor-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.decor-panel label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

.decor-panel select,
.decor-panel input {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.decor-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.decor-panel .btn {
  flex: 1;
  font: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.decor-panel .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

#messages-link.has-unread {
  font-weight: 800;
  color: #a33;
}

#messages-link.has-unread::before {
  content: "● ";
  color: #c45c4a;
}

.room-scene-label-layer {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.room-door-destination,
.room-board-hotspot-label {
  position: fixed;
  min-width: 92px;
  max-width: 180px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(90, 54, 32, 0.42);
  border-radius: 5px;
  padding: 6px 9px;
  background: rgba(255, 249, 226, 0.94);
  box-shadow: 0 5px 14px rgba(47, 30, 18, 0.22);
  color: #382b20;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.room-door-destination[hidden],
.room-board-hotspot-label[hidden] {
  display: none;
}

.room-door-destination::before {
  margin-right: 4px;
  color: #9b3f2d;
  content: "→";
}

.room-board-hotspot-label {
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
}

.room-board-hotspot-label:hover,
.room-board-hotspot-label:focus-visible {
  border-color: #9b3f2d;
  outline: 2px solid rgba(239, 191, 73, 0.72);
  background: #fff1bd;
}

.future-room-panel {
  position: absolute;
  right: 16px;
  bottom: 24px;
  width: min(310px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(22, 31, 36, 0.2);
  border-radius: 8px;
  background: rgba(250, 251, 248, 0.96);
  box-shadow: 0 12px 30px rgba(15, 22, 25, 0.18);
  color: #182126;
  pointer-events: auto;
  z-index: 7;
}

.future-room-panel[data-room-id="office"] {
  width: min(960px, calc(100vw - 96px));
  background:
    linear-gradient(rgba(250, 248, 240, 0.96), rgba(245, 242, 231, 0.96)),
    #f7f3e8;
  border-color: rgba(83, 65, 45, 0.34);
  box-shadow: 0 12px 30px rgba(55, 40, 26, 0.2);
}

.future-room-panel[data-room-id="living-room"] {
  width: min(620px, calc(100vw - 96px));
  background:
    linear-gradient(rgba(250, 248, 240, 0.96), rgba(245, 242, 231, 0.96)),
    #f7f3e8;
  border-color: rgba(83, 65, 45, 0.34);
  box-shadow: 0 12px 30px rgba(55, 40, 26, 0.2);
}

.future-room-panel h2,
.future-room-panel p {
  margin: 0;
}

.future-room-panel > p {
  margin-top: 4px;
  color: #536068;
  font-size: 12px;
}

.room-world-content {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid rgba(83, 65, 45, 0.22);
  border-radius: 6px;
  padding: 10px;
  background: rgba(255, 252, 244, 0.64);
}

.room-world-content h3,
.room-world-content h4 {
  margin: 0;
  color: #3b594d;
}

.room-world-content h3 {
  font-size: 14px;
}

.room-world-content h4 {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.room-world-intro {
  margin: 0;
  color: #5f655e;
  font-size: 11px;
  line-height: 1.45;
}

.room-world-regional-theme {
  display: grid;
  gap: 3px;
  border-left: 3px solid #5d856d;
  padding: 7px 9px;
  background: rgba(237, 246, 239, 0.72);
  color: #466051;
  font-size: 10px;
  line-height: 1.4;
}

.room-world-regional-theme strong {
  color: #2f5940;
  font-size: 11px;
}

.room-world-regional-theme p {
  margin: 0;
}

.room-world-group {
  display: grid;
  gap: 5px;
  border-top: 1px solid rgba(83, 65, 45, 0.14);
  padding-top: 8px;
}

.room-world-task,
.room-world-collectible,
.room-world-interaction {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(83, 65, 45, 0.2);
  border-radius: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.74);
  color: #2f382f;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.room-world-task:hover:not(:disabled),
.room-world-task:focus-visible:not(:disabled),
.room-world-collectible:hover:not(:disabled),
.room-world-collectible:focus-visible:not(:disabled),
.room-world-interaction:hover:not(:disabled),
.room-world-interaction:focus-visible:not(:disabled) {
  border-color: #5d856d;
  background: #edf6ef;
}

.room-world-task:disabled,
.room-world-collectible:disabled,
.room-world-interaction:disabled {
  cursor: default;
  opacity: 0.68;
}

.room-world-task.is-complete,
.room-world-collectible.is-found {
  border-color: #a8c8ad;
  background: #edf6ef;
  color: #3f7450;
}

.room-world-feedback {
  margin: 2px 0 0;
  border-left: 3px solid #d4a017;
  padding: 7px 9px;
  background: #fff7dc;
  color: #5b4b2e;
  font-size: 11px;
  line-height: 1.45;
}

.future-room-workspace {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(22, 31, 36, 0.16);
}

.future-room-workspace p {
  margin: 4px 0 10px;
  font-size: 13px;
}

.future-room-coming-soon {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(91, 70, 47, 0.3);
  border-radius: 6px;
  background: #f5f0df;
  color: #4c4031;
}

.future-room-coming-soon strong {
  color: #9b3f2d;
  font-size: 13px;
  text-transform: uppercase;
}

.future-room-coming-soon p {
  margin: 0;
  color: #5b5144;
  font-size: 12px;
}

.future-room-workspace button,
.future-room-workspace input {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(22, 31, 36, 0.2);
  border-radius: 6px;
  background: #eef1ef;
  color: #596268;
  font: inherit;
}

.future-room-workspace button {
  cursor: pointer;
  color: #182126;
}

.future-room-workspace button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.future-room-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 8px;
}

.future-room-compose button {
  width: auto;
  min-width: 62px;
}

.future-room-character-count {
  grid-column: 1 / -1;
  color: #536068;
  font-size: 11px;
  text-align: right;
}

.future-room-output {
  max-height: 150px;
  margin-top: 8px;
  overflow: auto;
  font-size: 12px;
}

.future-room-results {
  margin: 0;
  padding-left: 20px;
}

.future-room-results li + li {
  margin-top: 6px;
}

.future-house-board-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 7px 9px;
  border: 1px solid rgba(91, 70, 47, 0.28);
  border-radius: 4px;
  background: #f5f0df;
  color: #4c4031;
}

.future-house-board-hint span {
  color: #9b3f2d;
  font-size: 15px;
  font-weight: 800;
}

.future-house-board-hint p {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.future-living-output {
  max-height: 184px;
  padding-right: 4px;
}

.future-living-message-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.future-living-message-list li {
  padding: 7px 9px;
  border: 1px solid rgba(91, 70, 47, 0.24);
  border-left: 3px solid #406258;
  border-radius: 3px;
  background: #f8f3e5;
  color: #302d27;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.future-living-compose {
  padding-top: 8px;
  border-top: 1px solid rgba(91, 70, 47, 0.2);
}

.future-living-compose input,
.future-office-guide input {
  background: #faf7ee;
  border-color: rgba(91, 70, 47, 0.3);
  color: #302d27;
  font-size: 11px;
}

.future-living-compose button,
.future-office-guide button {
  background: #dde7d5;
  border-color: rgba(66, 92, 68, 0.32);
  font-size: 10px;
}

.future-office-output {
  max-height: none;
  overflow-x: auto;
  padding: 2px 0 6px;
}

.future-office-job-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 8px;
  min-width: 740px;
}

.future-office-job-card {
  min-height: 122px;
  padding: 9px;
  border: 1px solid rgba(91, 70, 47, 0.34);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(103, 81, 54, 0.06) 50%, transparent 51%),
    #f5f0df;
  color: #2c2922;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.future-office-job-card h3 {
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.future-office-job-card strong {
  display: block;
  color: #5f4934;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.future-office-job-card .future-office-job-meta,
.future-office-job-card .future-office-job-skills {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.future-office-job-card .future-office-job-skills {
  padding-top: 5px;
  border-top: 1px solid rgba(91, 70, 47, 0.18);
  color: #38584c;
}

.future-office-recommendations {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(91, 70, 47, 0.2);
  color: #3f4a43;
}

.future-office-recommendations h3 {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.3;
}

.future-office-recommendations > p {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.future-office-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  min-width: 680px;
  overflow-x: auto;
}

.future-office-recommendation-card {
  min-height: 82px;
  padding: 8px;
  border: 1px solid rgba(66, 92, 68, 0.28);
  border-radius: 4px;
  background: #edf3e8;
  color: #2f4438;
}

.future-office-recommendation-card strong {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.future-office-recommendation-card p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.future-office-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: #5f4934;
  font-size: 10px;
}

.future-office-navigation[hidden] {
  display: none;
}

.future-office-navigation button {
  width: auto;
  min-width: 92px;
  min-height: 32px;
  padding: 6px 9px;
  background: #dde7d5;
  border-color: rgba(66, 92, 68, 0.32);
  font-size: 10px;
}

.future-office-guide {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(91, 70, 47, 0.2);
}

.future-office-guide-output {
  max-height: 72px;
  overflow: auto;
  color: #3f4a43;
  font-size: 10px;
  line-height: 1.4;
}

.future-office-guide-output p {
  margin: 6px 0 0;
  font-size: inherit;
}

.future-house-board-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(35, 29, 23, 0.64);
  pointer-events: auto;
  z-index: 36;
}

.future-house-board-overlay[hidden] {
  display: none;
}

.future-house-board-panel {
  width: min(920px, calc(100vw - 48px));
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  padding: 16px;
  border: 2px solid #6f5338;
  border-radius: 6px;
  background:
    linear-gradient(rgba(248, 241, 218, 0.96), rgba(242, 232, 203, 0.96)),
    #f3e9cd;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.25),
    0 20px 48px rgba(20, 15, 10, 0.32);
  color: #30271e;
}

.future-house-board-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(91, 70, 47, 0.28);
}

.future-house-board-panel h2,
.future-house-board-panel p {
  margin: 0;
}

.future-house-board-panel h2 {
  font-size: 18px;
}

.future-house-board-panel > p {
  margin-top: 8px;
  color: #655542;
  font-size: 11px;
}

.future-house-board-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(91, 70, 47, 0.34);
  border-radius: 50%;
  background: #f8f1dc;
  color: #493827;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.future-house-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.future-house-card {
  position: relative;
  min-height: 210px;
  padding: 16px 12px 12px;
  border: 1px solid rgba(91, 70, 47, 0.34);
  border-radius: 3px;
  background: #fff8df;
  box-shadow: 2px 3px 0 rgba(91, 70, 47, 0.13);
}

.future-house-card-pin {
  position: absolute;
  top: 4px;
  left: 50%;
  color: #a33d2d;
  font-size: 10px;
  transform: translateX(-50%);
}

.future-house-card h3 {
  margin: 5px 0 4px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.future-house-card strong {
  color: #436057;
  font-size: 10px;
}

.future-house-card .future-house-card-detail,
.future-house-card .future-house-card-quote,
.future-house-card .future-house-application-status {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.future-house-card .future-house-card-quote {
  min-height: 42px;
  color: #655542;
}

.future-house-card button {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(66, 92, 68, 0.36);
  border-radius: 4px;
  background: #dce6d2;
  color: #283d34;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.future-house-card button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.future-house-card .future-house-application-status {
  min-height: 14px;
  color: #8b3a2d;
}

.student-profile-notebook-trigger {
  position: fixed;
  z-index: 9;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(70, 40, 28, 0.72);
  border-radius: 4px;
  background: #fff7dc;
  box-shadow: 0 5px 14px rgba(35, 25, 18, 0.28);
  color: #4b2c20;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  transform: translate(-50%, -100%);
}

.student-profile-notebook-trigger[hidden],
.student-profile-overlay[hidden] {
  display: none;
}

.student-profile-notebook-trigger:hover,
.student-profile-notebook-trigger:focus-visible {
  border-color: #b34931;
  outline: 2px solid rgba(219, 153, 54, 0.72);
  outline-offset: 2px;
}

.student-profile-notebook-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 2px;
  background: #a4372d;
  color: #fff7dc;
  font-size: 9px;
  letter-spacing: 0;
}

.student-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: rgba(27, 24, 21, 0.72);
}

.student-profile-panel {
  width: min(700px, 100%);
  max-height: calc(100vh - 36px);
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(97, 67, 42, 0.52);
  border-radius: 6px;
  background:
    linear-gradient(rgba(151, 59, 43, 0.08) 1px, transparent 1px) 0 54px / 100% 28px,
    #fffaf0;
  box-shadow: 0 22px 54px rgba(20, 15, 10, 0.42);
  color: #352b23;
}

.student-profile-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 2px solid #a73c30;
}

.student-profile-panel h2,
.student-profile-panel p {
  margin: 0;
}

.student-profile-panel h2 {
  font-size: 21px;
}

.student-profile-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(83, 57, 37, 0.38);
  border-radius: 50%;
  background: #fff4d4;
  color: #4c3828;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.student-profile-privacy {
  margin-top: 12px !important;
  padding: 9px 10px;
  border-left: 3px solid #51766c;
  background: rgba(220, 235, 226, 0.72);
  color: #44534e;
  font-size: 11px;
  line-height: 1.5;
}

.student-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.student-profile-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4b382a;
  font-size: 11px;
  font-weight: 800;
}

.student-profile-field input,
.student-profile-field select,
.student-profile-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid rgba(86, 64, 45, 0.42);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #2f2924;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.student-profile-field textarea {
  min-height: 80px;
  resize: vertical;
}

.student-profile-field input:focus,
.student-profile-field select:focus,
.student-profile-field textarea:focus {
  border-color: #a73c30;
  outline: 2px solid rgba(204, 141, 52, 0.28);
}

.student-profile-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 15px;
  color: #4c4036;
  font-size: 11px;
  line-height: 1.5;
}

.student-profile-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: #a73c30;
}

.student-profile-submit {
  min-height: 42px;
  margin-top: 15px;
  padding: 9px 18px;
  border: 1px solid #6e2822;
  border-radius: 4px;
  background: #a73c30;
  color: #fffaf0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.student-profile-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.student-profile-status {
  min-height: 20px;
  margin-top: 8px !important;
  color: #3e6258;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .field-note {
    top: 72px;
    left: 62px;
    width: min(300px, calc(100vw - 76px));
  }

  #quest-panel {
    top: 72px;
    left: 62px;
    width: min(280px, calc(100vw - 76px));
  }

  .hud-dock ~ .announcement-panel {
    top: 72px;
    left: 62px;
    width: min(420px, calc(100vw - 76px));
  }

  .hud-dock {
    left: 8px;
  }

  .room-minimap {
    left: 62px;
  }

  .guidance-spirit {
    bottom: 10px;
    left: 58px;
  }

  .guidance-spirit-bubble {
    width: min(300px, calc(100vw - 128px));
  }

  #game-operation-status {
    right: 10px;
    bottom: 10px;
    width: min(300px, calc(100vw - 76px));
  }

  .future-room-panel {
    right: 8px;
    bottom: 76px;
    width: min(280px, calc(100vw - 76px));
  }

  .future-room-panel[data-room-id="office"] {
    width: calc(100vw - 76px);
  }

  .future-room-panel[data-room-id="living-room"] {
    width: calc(100vw - 76px);
  }

  .future-house-board-overlay {
    padding: 12px;
  }

  .future-house-board-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 12px;
  }

  .future-house-board-grid {
    grid-template-columns: 1fr;
  }

  .student-profile-overlay {
    padding: 8px;
  }

  .student-profile-panel {
    max-height: calc(100vh - 16px);
    padding: 14px;
  }

  .student-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the prototype treatment last so it wins over the legacy HUD rules above. */
:root {
  --ink: #242b27;
  --paper: #fbf7ef;
  --accent: #d48b3f;
  --sage: #5e806d;
  --deep-sage: #29483e;
  --line: rgba(42, 54, 47, 0.17);
  --panel: rgba(255, 252, 246, 0.95);
}

body {
  background: #1f2a27;
}

#hud::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 26, 23, 0.22), transparent 28%, transparent 70%, rgba(18, 26, 23, 0.26)),
    radial-gradient(circle at 50% 45%, transparent 42%, rgba(12, 19, 17, 0.16) 100%);
  content: "";
  pointer-events: none;
}

.stay-intent-flow {
  align-items: center;
  padding: clamp(14px, 3vw, 34px);
  background:
    radial-gradient(circle at 16% 14%, rgba(235, 198, 135, 0.25), transparent 28%),
    linear-gradient(135deg, rgba(29, 45, 39, 0.96), rgba(25, 47, 54, 0.96));
}

.stay-intent-card {
  position: relative;
  overflow: hidden;
  width: min(980px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  padding: clamp(22px, 4vw, 48px);
  background: linear-gradient(145deg, rgba(255, 252, 246, 0.98), rgba(246, 240, 227, 0.98));
  box-shadow: 0 28px 80px rgba(5, 19, 17, 0.38);
}

.stay-intent-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--accent));
  content: "";
}

.stay-intent-header h1 {
  color: #203b33;
  font-size: clamp(28px, 4.2vw, 48px);
  letter-spacing: -0.02em;
}

.stay-intent-copy {
  max-width: 700px;
  color: #5d6861;
  font-size: 15px;
}

.stay-intent-progress > span:not(.stay-intent-progress-label) {
  width: 28px;
  height: 5px;
  border-radius: 99px;
}

.stay-intent-progress > span.is-active {
  background: var(--accent);
}

.stay-guide-layout {
  grid-template-columns: minmax(280px, 1.05fr) minmax(270px, 0.95fr);
  gap: clamp(24px, 5vw, 64px);
  margin-top: 34px;
}

.stay-guide-room {
  border-color: rgba(48, 74, 62, 0.34);
  border-radius: 14px;
  box-shadow: inset 0 0 0 12px rgba(60, 48, 32, 0.12), 0 16px 28px rgba(54, 64, 48, 0.14);
}

.stay-guide-room::after {
  position: absolute;
  right: 18%;
  bottom: 16%;
  width: 22%;
  height: 18%;
  border: 1px solid rgba(55, 78, 60, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, #719270 0 12%, transparent 13%), #d4c287;
  content: "";
}

.stay-guide-marker {
  width: 38px;
  height: 38px;
  border-color: #fff9e9;
  background: var(--deep-sage);
  color: #fff9e9;
  box-shadow: 0 0 0 5px rgba(41, 72, 62, 0.17), 0 6px 14px rgba(44, 46, 29, 0.26);
}

.stay-guide-quests {
  gap: 16px;
}

.stay-guide-quests li {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.stay-guide-quests li:last-child {
  border-bottom: 0;
}

.stay-guide-quests strong {
  color: #a35e2e;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stay-guide-quests span {
  color: #46554c;
  font-size: 13px;
}

.stay-intent-primary,
.stay-intent-yes {
  min-height: 58px;
  border-color: var(--deep-sage);
  border-radius: 10px;
  background: var(--deep-sage);
  box-shadow: 0 10px 20px rgba(41, 72, 62, 0.17);
}

.stay-intent-primary:hover,
.stay-intent-primary:focus-visible,
.stay-intent-yes:hover,
.stay-intent-yes:focus-visible {
  background: #1e3b32;
  transform: translateY(-1px);
}

.stay-intent-secondary {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(41, 72, 62, 0.32);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--deep-sage);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.stay-intent-secondary:hover,
.stay-intent-secondary:focus-visible {
  border-color: var(--accent);
  background: #fff5e6;
}

.stay-resume-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.stay-resume-summary > div {
  display: grid;
  gap: 5px;
}

.stay-resume-summary strong {
  color: var(--deep-sage);
  font-size: 18px;
}

.stay-resume-summary span {
  color: #6b756f;
  font-size: 12px;
  font-weight: 700;
}

.stay-resume-marker {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 8px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.stay-resume-actions {
  margin-top: 24px;
}

.stay-map-hit-target {
  cursor: pointer;
}

.save-panel-change {
  min-height: 36px;
  margin-top: 12px;
  border: 1px solid rgba(41, 72, 62, 0.28);
  border-radius: 8px;
  padding: 7px 10px;
  background: #f2f7f1;
  color: var(--deep-sage);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.save-panel-change:hover,
.save-panel-change:focus-visible {
  border-color: var(--accent);
  background: #fff5e6;
}

#passport-toggle {
  background: #6b4f2d;
}

#passport-banner {
  bottom: 96px;
  max-height: min(280px, calc(100vh - 126px));
  overflow: auto;
}

#passport-banner:focus {
  outline: 3px solid rgba(240, 191, 103, 0.78);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  #passport-banner {
    bottom: 88px;
    max-width: calc(100vw - 84px);
  }
}

.stay-map,
.stay-city-option,
.stay-companion-option,
.stay-destination-summary {
  border-radius: 12px;
}

.stay-map {
  border-color: rgba(47, 84, 80, 0.34);
  box-shadow: 0 18px 34px rgba(42, 73, 75, 0.2);
}

.stay-city-grid {
  gap: 14px;
  margin-top: 30px;
}

.stay-city-option {
  min-height: 78px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.78);
}

.stay-city-option:hover,
.stay-city-option:focus-visible {
  border-color: var(--accent);
  background: #fff5e6;
  transform: translateY(-2px);
}

.stay-companion-option[aria-pressed="true"] {
  border-color: var(--deep-sage);
  background: #eaf2eb;
  box-shadow: inset 0 0 0 1px var(--deep-sage), 0 7px 16px rgba(44, 74, 59, 0.12);
}

.room-chip {
  top: 18px;
  left: 18px;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(249, 246, 236, 0.91);
  box-shadow: 0 10px 28px rgba(14, 24, 21, 0.19);
  color: #28443a;
}

.room-chip::before {
  position: absolute;
  top: 7px;
  left: 53px;
  color: #8b5d3c;
  content: "YOU ARE IN";
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
}

.room-chip #room-title {
  padding-top: 9px;
}

.hud-dock {
  left: 18px;
  gap: 8px;
}

.hud-dock-button {
  width: 48px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  background: rgba(30, 46, 40, 0.88);
  transition: width 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.hud-dock-button:hover,
.hud-dock-button:focus-visible,
.hud-dock-button.is-active,
.hud-dock-button[aria-expanded="true"] {
  border-color: #f0bf67;
  background: #315d4d;
  transform: translateX(2px);
}

.hud-dock-label {
  display: none;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
}

.hud-dock.is-expanded .hud-dock-button:not(.hud-dock-toggle) {
  display: flex;
  width: 118px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
}

.hud-dock.is-expanded .hud-dock-label {
  display: inline;
}

.hud-dock-icon {
  width: 20px;
  color: #f4cf7e;
  font-size: 18px;
  line-height: 1;
}

.guidance-spirit {
  bottom: 20px;
  left: 82px;
  gap: 10px;
}

.guidance-spirit-next {
  position: absolute;
  bottom: 67px;
  left: -5px;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(33, 54, 46, 0.88);
  color: #fff7de;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 28, 23, 0.2);
}

.guidance-spirit-bubble {
  width: min(360px, calc(100vw - 176px));
  min-height: 112px;
  border-radius: 14px;
  border-color: rgba(48, 69, 58, 0.18);
  background: rgba(255, 253, 247, 0.98);
  box-shadow: 0 18px 36px rgba(17, 30, 24, 0.24);
}

.guidance-spirit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #9a6438;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.guidance-spirit-meta span:last-child {
  color: #5d806d;
  letter-spacing: 0.08em;
}

.guidance-spirit-bubble strong {
  color: var(--deep-sage);
}

.guidance-spirit-tour {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid rgba(48, 69, 58, 0.12);
  padding-top: 10px;
}

.guidance-spirit-tour-step {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  color: #79837c;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.guidance-spirit-tour-number {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid #c9d0c8;
  border-radius: 50%;
  color: #7c877f;
  font-size: 9px;
  font-weight: 900;
}

.guidance-spirit-tour-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.guidance-spirit-tour-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-spirit-tour-copy small {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-spirit-tour-state {
  min-width: 40px;
  color: inherit;
  font-size: 9px;
  font-weight: 900;
  text-align: right;
}

.guidance-spirit-tour-step.is-current {
  border-color: rgba(212, 139, 63, 0.45);
  background: #fff5e4;
  color: #8c542d;
}

.guidance-spirit-tour-step.is-current .guidance-spirit-tour-number {
  border-color: #c27635;
  background: #c27635;
  color: #fffaf0;
}

.guidance-spirit-tour-step.is-complete {
  color: #4f8067;
}

.guidance-spirit-tour-step.is-complete .guidance-spirit-tour-number {
  border-color: #75a286;
  background: #75a286;
  color: #fff;
}

.guidance-spirit-tour-step.is-locked {
  opacity: 0.64;
}

#quest-panel,
.field-note,
.save-panel,
.life-experience-panel {
  border: 1px solid rgba(48, 69, 58, 0.17);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.97);
  box-shadow: 0 18px 38px rgba(17, 30, 24, 0.2);
}

#quest-panel {
  left: 82px;
  width: min(300px, calc(100vw - 116px));
}

.field-note {
  left: 82px;
}

@media (max-width: 640px) {
  .stay-intent-card {
    border-radius: 14px;
    padding: 22px 18px;
  }

  .stay-intent-header h1 {
    font-size: clamp(27px, 8vw, 38px);
  }

  .room-chip {
    top: 10px;
    left: 62px;
  }

  .hud-dock {
    left: 8px;
  }

  .guidance-spirit {
    left: 62px;
    bottom: 10px;
  }

  .guidance-spirit-next {
    max-width: calc(100vw - 104px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .guidance-spirit-bubble {
    width: min(310px, calc(100vw - 122px));
  }

  #quest-panel,
  .field-note {
    left: 62px;
    width: min(300px, calc(100vw - 76px));
  }
}