:root {
  color-scheme: dark;
  --cream: #fff6dc;
  --cream-soft: rgba(255, 244, 216, 0.9);
  --gold: #d69a43;
  --gold-soft: #e8bf72;
  --ink: #4a2b18;
  --shadow: rgba(13, 10, 18, 0.52);
  --title-font: "STKaiti", "KaiTi", "Kaiti SC", "BiauKai", "Songti SC", "SimSun", serif;
  --serif-font: Georgia, "Times New Roman", "Songti SC", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: #120f1c;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hotel-home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #120f1c;
}

.home-scene,
.checkin-scene,
.insight-scene,
.bread-scene,
.preview-scene,
.roof-scene,
.street-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition:
    opacity 680ms ease,
    filter 680ms ease,
    transform 820ms ease;
}

.home-scene {
  z-index: 2;
  background: #120f1c;
}

.home-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 32, 0.34) 0%, rgba(24, 20, 35, 0.2) 30%, rgba(21, 13, 18, 0.02) 58%, rgba(11, 9, 15, 0.16) 100%),
    linear-gradient(180deg, rgba(7, 8, 20, 0.03) 0%, rgba(12, 8, 12, 0.04) 55%, rgba(10, 7, 10, 0.24) 100%);
}

.home-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.checkin-scene {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(38, 19, 12, 0.06), rgba(28, 16, 12, 0.12)),
    url("微信图片_20260619194441_3492_334.png") center / cover no-repeat;
  opacity: 0;
  transform: scale(1.018);
}

.insight-scene {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 7, 8, 0.02), rgba(10, 7, 8, 0.05)),
    url("去掉猫的大背景.png") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
}

.bread-scene {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(33, 16, 8, 0.03), rgba(33, 16, 8, 0.08)),
    url("ChatGPT Image Jun 22, 2026, 08_32_15 PM.png?v=bread-bg-1") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
}

.preview-scene {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 5, 7, 0.02), rgba(8, 5, 7, 0.04)),
    url("ChatGPT Image Jul 7, 2026, 02_37_36 PM.png") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
}

.roof-scene {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 18, 38, 0.03), rgba(10, 18, 38, 0.08)),
    url("cd7cd451b65edafbad115ff691927196.png?v=home-reset-30") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
}

.street-scene {
  z-index: 1;
  background: #100c18;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
}

.preview-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bread-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bread-result-card {
  position: absolute;
  left: 27.4%;
  top: 10.2%;
  width: 28.8%;
  height: 82.4%;
  margin: 0;
  padding: 6.3% 2.2% 2.2%;
  color: #4a2b18;
  font-family: var(--title-font);
  text-align: center;
  pointer-events: none;
}

.bread-result-card h2 {
  position: relative;
  margin: 0;
  color: #4b2a18;
  font-size: clamp(26px, 2.62vw, 46px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-shadow: 0 2px 0 rgba(255, 238, 197, 0.65);
}

.bread-result-card h2::before,
.bread-result-card h2::after {
  content: "✦";
  display: inline-block;
  margin: 0 0.42em;
  color: #c99143;
  font-size: 0.48em;
  vertical-align: 0.18em;
}

.bread-subtitle {
  margin: 4.4% 4% 0;
  color: rgba(77, 45, 26, 0.82);
  font-size: clamp(14px, 1.34vw, 24px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.22;
}

.bread-subtitle::before,
.bread-subtitle::after {
  content: "❧";
  margin: 0 0.55em;
  color: rgba(186, 126, 55, 0.76);
  font-size: 0.78em;
}

.bread-character {
  display: block;
  width: 56%;
  max-height: 34%;
  margin: 9.4% auto 4.8%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(73, 31, 9, 0.18));
}

.bread-message {
  position: absolute;
  left: 10.8%;
  right: 10.8%;
  top: 72.6%;
  max-height: 15.8%;
  margin: 0;
  color: rgba(67, 39, 24, 0.88);
  display: -webkit-box;
  font-size: clamp(12px, 1.05vw, 19px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.38;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.bread-takeaway-panel {
  position: absolute;
  left: 66.2%;
  top: 66.4%;
  z-index: 8;
  width: 16.2%;
  color: #f7ddb4;
  font-family: var(--title-font);
  text-align: center;
  pointer-events: auto;
}

.bread-qr {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  width: 100%;
  aspect-ratio: 1;
  padding: 6.2%;
  border: 4px solid rgba(255, 246, 221, 0.9);
  border-radius: 10px;
  background: #fff6df;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.bread-qr i {
  display: block;
  aspect-ratio: 1;
  background: transparent;
}

.bread-qr i.is-dark {
  background: #4b3123;
}

.bread-takeaway-button {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bread-takeaway-button img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

.bread-takeaway-modal {
  position: absolute;
  left: 0;
  right: 0;
  top: 118px;
  bottom: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 44px);
  background: rgba(20, 10, 5, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.bread-takeaway-modal[hidden] {
  display: none;
}

.bread-takeaway-dialog {
  position: relative;
  width: min(360px, 34vw);
  min-width: 290px;
  padding: 34px 34px 30px;
  border: 1px solid rgba(246, 213, 151, 0.5);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 231, 183, 0.96), rgba(228, 177, 103, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  color: #4b2a18;
  font-family: var(--title-font);
  text-align: center;
}

.bread-takeaway-dialog h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2vw, 34px);
  letter-spacing: 0.08em;
}

.bread-takeaway-dialog p {
  margin: 0 0 22px;
  color: rgba(75, 42, 24, 0.82);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.bread-takeaway-dialog p[data-tone="loading"] {
  color: #6c421f;
}

.bread-takeaway-dialog p[data-tone="ready"] {
  color: #4f341d;
}

.bread-takeaway-dialog p[data-tone="error"] {
  color: #9b2f1e;
}

.bread-takeaway-dialog .bread-qr {
  width: min(240px, 72%);
  margin: 0 auto;
}

.bread-takeaway-dialog .bread-qr.is-real-qr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bread-takeaway-dialog .bread-qr.is-real-qr canvas,
.bread-takeaway-dialog .bread-qr.is-real-qr img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.bread-takeaway-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(92, 48, 20, 0.28);
  border-radius: 50%;
  background: rgba(255, 245, 219, 0.48);
  color: #5c3014;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.relationship-stage {
  z-index: 6;
}

.relationship-full-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.relationship-return-button {
  position: absolute;
  top: 4.8%;
  left: 4.2%;
  z-index: 9;
  min-width: 86px;
  height: 38px;
  padding: 0 22px;
  border: 1px solid rgba(246, 213, 151, 0.72);
  border-radius: 999px;
  background: rgba(42, 21, 10, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  color: #f6ddb2;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  pointer-events: auto;
}

.relationship-return-button:hover {
  background: rgba(68, 34, 14, 0.82);
  border-color: rgba(255, 231, 176, 0.95);
}

.relationship-map-modal {
  position: absolute;
  left: 0;
  right: 0;
  top: 118px;
  bottom: 0;
  z-index: 80;
  padding: clamp(18px, 2.4vw, 34px) clamp(28px, 4vw, 64px) clamp(20px, 3vw, 44px);
  background: rgba(19, 10, 5, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.relationship-map-modal[hidden] {
  display: none;
}

.relationship-map-dialog {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(246, 213, 151, 0.36);
  border-radius: 18px;
  background: #2b1609;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

.relationship-modal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relationship-modal-return {
  top: clamp(14px, 2.2vw, 24px);
  left: clamp(14px, 2.2vw, 24px);
}

.personal-structure-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 42px);
  background: rgba(26, 13, 6, 0.34);
  backdrop-filter: blur(14px) saturate(0.95);
  -webkit-backdrop-filter: blur(14px) saturate(0.95);
  pointer-events: auto;
}

.personal-structure-modal[hidden] {
  display: none;
}

.personal-structure-dialog {
  position: relative;
  width: min(94vw, calc(88vh * 5226 / 3037));
  max-width: 1520px;
  margin: 0;
  filter:
    drop-shadow(0 28px 52px rgba(54, 24, 8, 0.36))
    drop-shadow(0 0 18px rgba(255, 219, 159, 0.18));
}

.personal-structure-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  border-radius: clamp(18px, 1.6vw, 30px);
}

.personal-structure-close {
  position: absolute;
  right: clamp(14px, 1.35vw, 24px);
  top: clamp(14px, 1.35vw, 24px);
  z-index: 2;
  display: grid;
  width: clamp(34px, 3vw, 48px);
  height: clamp(34px, 3vw, 48px);
  place-items: center;
  border: 1px solid rgba(197, 111, 42, 0.56);
  border-radius: 999px;
  background: rgba(255, 245, 229, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 8px 18px rgba(92, 42, 12, 0.2);
  color: #9d4f18;
  font-family: var(--title-font);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.personal-structure-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 251, 242, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 12px 22px rgba(92, 42, 12, 0.26);
}

.preview-agent-panel,
.preview-goal-panel,
.preview-speech-bubble,
.preview-user-box,
.preview-feedback {
  position: absolute;
  z-index: 6;
  font-family: var(--title-font);
  pointer-events: none;
}

.preview-agent-panel {
  left: 3.15%;
  top: 13.8%;
  width: 18.6%;
  min-height: 28%;
  padding: 5.1% 1.2% 1.4% 9.9%;
  color: #f6dfb6;
}

.preview-agent-panel strong {
  display: block;
  margin-bottom: 0.3em;
  color: #f5d68c;
  font-size: clamp(18px, 1.45vw, 25px);
  letter-spacing: 0.14em;
}

.preview-agent-panel span,
.preview-agent-panel p {
  display: block;
  margin: 0;
  color: rgba(244, 219, 177, 0.9);
  font-size: clamp(12px, 0.9vw, 16px);
  line-height: 1.65;
}

.preview-goal-panel {
  left: 5.9%;
  top: 51.9%;
  width: 15.9%;
  min-height: 11.6%;
  padding: 0;
  color: #f2d29a;
}

.preview-goal-panel h2 {
  display: none;
  margin: 0;
  font-size: clamp(17px, 1.38vw, 24px);
  letter-spacing: 0.12em;
  text-align: center;
}

.preview-goal-panel p {
  margin: 0;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.78;
}

.preview-speech-bubble {
  left: 41.15%;
  top: 25.15%;
  width: 15.65%;
  height: 7.85%;
  color: #4a2b18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4%;
  font-size: clamp(12px, 0.84vw, 15px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-align: center;
}

.preview-user-box {
  left: 13.5%;
  top: 74.8%;
  width: 43%;
  min-height: 10.2%;
  color: rgba(74, 43, 24, 0.72);
  font-size: clamp(18px, 1.62vw, 29px);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.04em;
  pointer-events: auto;
  outline: none;
  white-space: pre-wrap;
}

.preview-user-box:empty::before {
  content: attr(data-placeholder);
  color: rgba(74, 43, 24, 0.52);
}

.preview-feedback {
  display: grid;
  grid-template-rows: repeat(4, clamp(22px, 2.05vw, 36px));
  gap: clamp(5px, 0.42vw, 8px);
  color: #513223;
  font-size: clamp(10px, 0.78vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow: hidden;
}

.preview-bad-list {
  left: 75.35%;
  top: 71.45%;
  width: 6.45%;
}

.preview-good-list {
  left: 87.35%;
  top: 71.45%;
  width: 6.95%;
}

.preview-feedback span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 0.2em;
  line-height: 1.25;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  transform: translateY(-1px);
}

.suggestion-options {
  position: absolute;
  left: 71.2%;
  top: 24.2%;
  display: grid;
  width: 25.15%;
  gap: 1.05%;
  pointer-events: auto;
}

.suggestion-options button,
.record-button,
.start-preview-button,
.save-preview-button,
.end-preview-button {
  display: block;
  pointer-events: auto;
  filter:
    drop-shadow(0 10px 14px rgba(7, 5, 6, 0.28))
    drop-shadow(0 0 8px rgba(240, 161, 73, 0.12));
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.suggestion-options button:hover,
.suggestion-options button.is-selected,
.record-button:hover,
.start-preview-button:hover,
.save-preview-button:hover,
.end-preview-button:hover {
  transform: translateY(-2px) scale(1.015);
  filter:
    drop-shadow(0 14px 18px rgba(7, 5, 6, 0.34))
    drop-shadow(0 0 13px rgba(255, 190, 99, 0.24));
}

.suggestion-options img,
.record-button img,
.start-preview-button img,
.save-preview-button img,
.end-preview-button img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.record-button {
  position: absolute;
  left: 1.15%;
  top: 91.2%;
  width: 10.45%;
}

.start-preview-button {
  position: absolute;
  left: 58.65%;
  top: 76.2%;
  width: 10.25%;
}

.end-preview-button {
  position: absolute;
  left: 84.6%;
  top: 91.2%;
  width: 12.9%;
}

/* Preview scene rebuilt with extracted UI assets */
.preview-agent-panel {
  display: none;
}

.preview-goal-panel {
  left: 0.8%;
  top: 10.0%;
  width: 17.4%;
  height: 14.2%;
  min-height: 0;
  padding: min(5.4vw, 86px) min(1.4vw, 23px) min(0.8vw, 14px);
  background: url("ChatGPT Image 2026年7月5日 05_18_30 (3) 1.png") center / contain no-repeat;
  color: #4f2d19;
  font-size: clamp(11px, 0.84vw, 15px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  overflow: hidden;
}

.preview-goal-panel p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.suggestion-options {
  left: 0.9%;
  top: 25.1%;
  width: 17.3%;
  height: 42.6%;
  display: block;
  background: url("image 1.png") center / contain no-repeat;
  pointer-events: auto;
}

.suggestion-options button {
  position: absolute;
  left: 7.7%;
  width: 84.8%;
  height: 8.65%;
  border-radius: 8px;
  background: transparent;
  opacity: 1;
  filter:
    drop-shadow(0 5px 7px rgba(7, 5, 6, 0.22))
    drop-shadow(0 0 4px rgba(240, 161, 73, 0.10));
}

.suggestion-options button:nth-child(1) { top: 20.0%; }
.suggestion-options button:nth-child(2) { top: 31.7%; }
.suggestion-options button:nth-child(3) { top: 43.4%; }
.suggestion-options button:nth-child(4) { top: 55.1%; }
.suggestion-options button:nth-child(5) { top: 66.8%; }
.suggestion-options button:nth-child(6) { top: 78.5%; }

.suggestion-options button:hover,
.suggestion-options button.is-selected {
  opacity: 1;
  background: transparent;
  outline: 2px solid rgba(255, 212, 138, 0.72);
  transform: translateY(-1px);
}

.suggestion-options img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-dialog-bubbles-art {
  display: none;
}

.preview-speech-bubble,
.preview-human-bubble {
  z-index: 6;
  color: #4a2b18;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9% 2.1%;
  font-size: clamp(11px, 0.78vw, 14px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.98), rgba(255, 242, 220, 0.96));
  border: 2px solid rgba(166, 104, 62, 0.32);
  border-radius: 18px;
  box-shadow: 0 9px 18px rgba(58, 32, 18, 0.18);
  pointer-events: none;
}

.preview-speech-bubble {
  left: 39.55%;
  top: 17.75%;
  width: 16.3%;
  height: 9.25%;
}

.preview-human-bubble {
  left: 39.35%;
  top: 31.1%;
  width: 17.8%;
  height: 8.55%;
}

.preview-speech-bubble::after,
.preview-human-bubble::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 18px;
  height: 18px;
  background: inherit;
  border-bottom: 2px solid rgba(166, 104, 62, 0.32);
  transform: rotate(45deg);
}

.preview-speech-bubble::after {
  left: -10px;
  border-left: 2px solid rgba(166, 104, 62, 0.32);
}

.preview-human-bubble::after {
  right: -10px;
  border-top: 2px solid rgba(166, 104, 62, 0.32);
}

.preview-user-box {
  left: 1.0%;
  top: 69.0%;
  z-index: 6;
  width: 31.7%;
  height: 28.8%;
  min-height: 0;
  padding: min(4.0vw, 64px) min(2.0vw, 32px) min(1.3vw, 22px) min(1.9vw, 30px);
  background: url("ChatGPT Image 2026年7月5日 05_18_32 (8) 1.png") center / contain no-repeat;
  color: #4a2b18;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.7;
  overflow-y: auto;
}

.preview-bad-list {
  left: 73.2%;
  top: 12.2%;
  z-index: 6;
  width: 15.9%;
  height: 55.2%;
  display: grid;
  grid-template-rows: repeat(4, 20.2%);
  gap: 3.8%;
  padding: min(8.8vw, 140px) min(1.0vw, 16px) min(1.5vw, 24px) min(4.2vw, 68px);
  color: #513223;
  font-size: clamp(10px, 0.74vw, 14px);
  font-weight: 700;
  line-height: 1.28;
  background: url("ChatGPT Image 2026年7月5日 05_18_31 (6) 1.png") center / contain no-repeat;
}

.preview-feedback span {
  justify-content: flex-start;
  white-space: normal;
  text-overflow: clip;
  text-align: left;
}

.preview-good-list {
  display: none;
}

.preview-bottom-card {
  position: absolute;
  z-index: 6;
  top: 69.3%;
  width: 20.1%;
  height: 28.0%;
  padding: min(5.0vw, 78px) min(1.8vw, 30px) min(1.4vw, 22px);
  color: #4a2b18;
  font-family: var(--title-font);
  font-size: clamp(12px, 0.92vw, 16px);
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
  overflow-y: auto;
  pointer-events: none;
}

.preview-recommended-card {
  left: 33.2%;
}

.preview-reason-card {
  left: 55.0%;
}

.preview-avoid-card {
  left: 76.6%;
}

.preview-bottom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: center / contain no-repeat;
  pointer-events: none;
}

.preview-recommended-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 2.png");
}

.preview-reason-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 3.png");
}

.preview-avoid-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 1.png");
}

.preview-action-stack-art {
  position: absolute;
  left: 89.2%;
  top: 12.2%;
  z-index: 5;
  width: 9.9%;
  height: 55.6%;
  display: none;
  pointer-events: none;
}

.start-preview-button,
.save-preview-button,
.record-button,
.end-preview-button {
  z-index: 7;
  width: 7.9%;
  height: auto;
  background: transparent;
  opacity: 1;
  border-radius: 8px;
}

.start-preview-button {
  left: 89.9%;
  top: 12.9%;
}

.end-preview-button {
  left: 89.95%;
  top: 30.2%;
}

.save-preview-button {
  position: absolute;
  left: 89.95%;
  top: 45.6%;
}

.record-button {
  left: 89.95%;
  top: 60.8%;
}

.start-preview-button:hover,
.save-preview-button:hover,
.record-button:hover,
.end-preview-button:hover {
  transform: translateY(-2px) scale(1.015);
  filter:
    drop-shadow(0 14px 18px rgba(7, 5, 6, 0.34))
    drop-shadow(0 0 13px rgba(255, 190, 99, 0.24));
}

.start-preview-button img,
.save-preview-button img,
.record-button img,
.end-preview-button img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.communication-record-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(21, 10, 8, 0.36);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: auto;
}

.communication-record-modal[hidden] {
  display: none;
}

.communication-record-dialog {
  position: relative;
  width: min(760px, 54vw);
  max-height: min(680px, 78vh);
  padding: 28px 34px 30px;
  color: #f7dbac;
  border: 1px solid rgba(222, 139, 48, 0.82);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(61, 28, 24, 0.96), rgba(31, 18, 20, 0.96));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 225, 175, 0.18);
  overflow: hidden;
}

.communication-record-dialog h2 {
  margin: 0 0 18px;
  color: #ffe2ad;
  font-size: clamp(22px, 1.65vw, 32px);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.04em;
}

.communication-record-close {
  position: absolute;
  right: 16px;
  top: 13px;
  width: 34px;
  height: 34px;
  color: #f8d7a4;
  border: 1px solid rgba(237, 168, 92, 0.62);
  border-radius: 50%;
  background: rgba(36, 18, 19, 0.78);
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}

.communication-record-list {
  display: grid;
  gap: 14px;
  max-height: calc(min(680px, 78vh) - 104px);
  padding-right: 8px;
  overflow-y: auto;
}

.communication-record-empty {
  margin: 32px 0 20px;
  color: rgba(255, 229, 190, 0.78);
  font-size: clamp(15px, 1vw, 18px);
  text-align: center;
}

.communication-record-item {
  padding: 14px 16px;
  border: 1px solid rgba(216, 132, 47, 0.42);
  border-radius: 6px;
  background: rgba(255, 221, 174, 0.08);
}

.communication-record-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: rgba(255, 229, 190, 0.7);
  font-size: 13px;
}

.communication-record-user,
.communication-record-ai {
  margin: 0 0 9px;
  color: #ffe4b7;
  font-size: clamp(14px, 0.95vw, 17px);
  line-height: 1.55;
}

.communication-record-ai {
  color: #f5c985;
}

.communication-record-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.communication-record-columns div {
  display: grid;
  gap: 6px;
}

.communication-record-columns strong {
  color: rgba(255, 228, 183, 0.74);
  font-size: 13px;
}

.communication-record-columns span {
  min-height: 26px;
  padding: 5px 8px;
  color: #4c2c1b;
  border-radius: 5px;
  background: rgba(255, 220, 175, 0.86);
  font-size: 13px;
  line-height: 1.25;
}

.hotel-home.is-checking-in .home-scene {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
  transform: scale(1.012);
}

.hotel-home.is-checking-in .checkin-scene {
  z-index: 3;
  opacity: 1;
  transform: scale(1);
}

.hotel-home.is-seeing .home-scene,
.hotel-home.is-seeing .checkin-scene,
.hotel-home.is-bread .home-scene,
.hotel-home.is-bread .checkin-scene,
.hotel-home.is-bread .insight-scene,
.hotel-home.is-bread .preview-scene,
.hotel-home.is-preview .home-scene,
.hotel-home.is-preview .checkin-scene,
.hotel-home.is-preview .insight-scene,
.hotel-home.is-preview .bread-scene,
.hotel-home.is-preview .roof-scene,
.hotel-home.is-roof .home-scene,
.hotel-home.is-roof .checkin-scene,
.hotel-home.is-roof .insight-scene,
.hotel-home.is-roof .bread-scene,
.hotel-home.is-roof .preview-scene {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.012);
}

.hotel-home.is-seeing .insight-scene {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.hotel-home.is-bread .bread-scene {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.hotel-home.is-preview .preview-scene {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.hotel-home.is-roof .roof-scene {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.hotel-home.is-street .home-scene,
.hotel-home.is-street .checkin-scene,
.hotel-home.is-street .insight-scene,
.hotel-home.is-street .bread-scene,
.hotel-home.is-street .preview-scene,
.hotel-home.is-street .roof-scene {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.012);
}

.hotel-home.is-seeing .street-scene,
.hotel-home.is-bread .street-scene,
.hotel-home.is-preview .street-scene,
.hotel-home.is-roof .street-scene,
.hotel-home.is-checking-in .street-scene {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.012);
}

.hotel-home.is-street .street-scene {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.street-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hotel-home.is-playing-intro .top-actions,
.hotel-home.is-playing-intro .home-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.skip-intro-btn {
  position: absolute;
  top: 42px;
  right: 48px;
  z-index: 10;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 230, 160, 0.4);
  background: rgba(30, 24, 38, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e3c485;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 300ms ease, transform 300ms ease, background 200ms ease, border-color 200ms ease;
}

.skip-intro-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.skip-intro-btn:hover {
  background: rgba(45, 36, 56, 0.85);
  border-color: #e3c485;
  transform: translateY(-1px);
}

.skip-intro-btn:active {
  transform: translateY(0) scale(0.97);
}

.checkin-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 240px minmax(560px, 1fr) 300px;
  align-items: center;
  height: 92px;
  padding: 16px 34px 10px;
  border-bottom: 1px solid rgba(209, 161, 94, 0.2);
  background:
    linear-gradient(180deg, rgba(20, 14, 15, 0.72), rgba(31, 19, 15, 0.48) 72%, rgba(31, 19, 15, 0));
  box-shadow: 0 18px 30px rgba(12, 7, 6, 0.18);
}

.checkin-logo {
  width: 170px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(255, 218, 139, 0.34))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

.step-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(62px, 1fr));
  align-items: start;
  gap: 8px;
  padding: 0 12px;
}

.step-tabs::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 52px;
  right: 52px;
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(213, 161, 87, 0.55) 0 3px,
      transparent 3px 8px
    );
}

.step-tab {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(255, 224, 170, 0.84);
  font-family: var(--title-font);
  letter-spacing: 0.1em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.52);
}

.step-tab span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(211, 156, 79, 0.55);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%, rgba(85, 53, 31, 0.86), rgba(29, 20, 20, 0.82) 66%),
    linear-gradient(180deg, rgba(255, 232, 174, 0.2), rgba(121, 74, 35, 0.12));
  box-shadow:
    inset 0 0 0 2px rgba(42, 28, 24, 0.75),
    0 0 0 1px rgba(255, 218, 147, 0.18);
  color: rgba(255, 232, 185, 0.96);
  font-family: var(--serif-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.step-tab strong {
  color: currentColor;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.step-tab.is-active {
  color: #fff2c8;
}

.step-tab.is-active span {
  border-color: rgba(255, 212, 126, 0.88);
  background:
    radial-gradient(circle at 48% 38%, rgba(255, 244, 197, 0.92), rgba(220, 151, 62, 0.9) 43%, rgba(87, 51, 29, 0.92) 74%);
  box-shadow:
    0 0 18px rgba(255, 203, 104, 0.74),
    0 0 0 4px rgba(255, 215, 132, 0.1),
    inset 0 0 0 1px rgba(69, 40, 23, 0.7);
  color: #4a2b18;
}

.step-tab.is-active strong {
  text-shadow:
    0 0 10px rgba(255, 221, 139, 0.62),
    0 3px 12px rgba(0, 0, 0, 0.55);
}

.checkin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.checkin-actions button {
  display: grid;
  place-items: center;
  height: 32px;
  border: 1px solid rgba(201, 155, 104, 0.54);
  border-radius: 999px;
  background: rgba(43, 35, 37, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 198, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.24);
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.checkin-actions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.checkin-actions img {
  display: block;
  width: 50px;
  height: 29px;
  object-fit: contain;
}

.language-button {
  min-width: 92px;
  padding: 0 15px;
  color: rgba(255, 235, 201, 0.96);
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.checkin-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.registration-card {
  position: absolute;
  left: 33.4%;
  top: 16.1%;
  z-index: 5;
  width: 47.9%;
  padding: min(0.88vw, 13px) min(1.36vw, 20px) min(0.92vw, 14px);
  border: 1px solid rgba(159, 104, 58, 0.42);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 232, 195, 0.38), rgba(252, 211, 156, 0.24)),
    radial-gradient(circle at 50% 18%, rgba(255, 248, 227, 0.42), rgba(230, 169, 111, 0.08) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 216, 0.2),
    inset 0 0 22px rgba(101, 55, 26, 0.08);
  pointer-events: auto;
  color: #5b321c;
  font-family: var(--title-font);
}

.registration-card::before,
.registration-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-color: rgba(171, 115, 59, 0.34);
  border-style: solid;
}

.registration-card::before {
  inset: min(0.55vw, 8px);
  border-width: 1px;
  border-radius: 5px;
}

.registration-card::after {
  top: min(1.1vw, 16px);
  bottom: min(1.1vw, 16px);
  left: 50%;
  width: 1px;
  border-width: 0 0 0 1px;
  opacity: 0.48;
}

.registration-title {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: min(0.42vw, 7px);
  text-align: center;
}

.registration-title h2 {
  margin: 0;
  font-size: clamp(21px, 1.52vw, 31px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #4d2a18;
  text-shadow: 0 1px 0 rgba(255, 237, 201, 0.86);
}

.registration-title h2::before,
.registration-title h2::after {
  content: "⌁";
  display: inline-block;
  margin: 0 12px;
  color: rgba(161, 103, 47, 0.72);
  font-size: 18px;
  transform: translateY(-1px);
}

.registration-title p {
  margin: 0;
  color: rgba(91, 50, 28, 0.76);
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.registration-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(1.9vw, 30px);
}

.form-column {
  display: grid;
  align-content: start;
  gap: min(0.38vw, 6px);
}

.form-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.form-field > span,
.memory-check > span {
  color: #53301d;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.08;
}

.form-field em {
  margin-left: 5px;
  color: rgba(93, 54, 31, 0.56);
  font-size: 0.78em;
  font-style: normal;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(146, 93, 52, 0.46);
  border-radius: 5px;
  background: rgba(255, 226, 184, 0.34);
  box-shadow: inset 0 1px 2px rgba(83, 41, 20, 0.09);
  color: rgba(75, 42, 26, 0.9);
  font-family: var(--title-font);
  font-size: clamp(11px, 0.72vw, 14px);
  font-weight: 600;
  outline: none;
}

.form-field input {
  height: min(2vw, 34px);
  padding: 0 12px;
}

.form-field textarea {
  height: min(2.6vw, 44px);
  padding: 6px 10px;
  line-height: 1.28;
  overflow-y: auto;
  resize: none;
}

.compact-field input {
  height: min(1.42vw, 24px);
}

.compact-field textarea {
  height: min(1.46vw, 25px);
  max-height: min(1.46vw, 25px);
  padding: 4px 10px;
  line-height: 1.25;
  overflow-y: auto;
  resize: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(92, 54, 33, 0.5);
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 7px;
}

.choice-row button {
  min-width: 0;
  height: min(1.78vw, 31px);
  border: 1px solid rgba(147, 90, 49, 0.45);
  border-radius: 6px;
  background: rgba(255, 224, 184, 0.26);
  color: rgba(78, 45, 28, 0.88);
  font-family: var(--title-font);
  font-size: clamp(10px, 0.68vw, 13px);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.choice-row button:hover {
  background: rgba(255, 239, 205, 0.46);
  filter: brightness(1.03);
}

.choice-row button.is-selected {
  background: #d69a43 !important;
  color: #1a0f0a !important;
  border-color: #ebd3a9 !important;
  box-shadow: 0 0 10px rgba(214, 154, 67, 0.6);
  transform: scale(1.02);
}

.role-row {
  grid-template-columns: 1.12fr 1.12fr 1fr 1.15fr 0.9fr;
}

.memory-check {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 3px 6px;
  align-items: center;
  margin-top: 0;
  max-height: min(2.08vw, 36px);
  overflow: hidden;
  cursor: pointer;
}

.memory-check.is-selected i {
  background: #d69a43 !important;
  position: relative;
}

.memory-check.is-selected i::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1a0f0a;
  font-size: 11px;
  font-weight: 900;
}

.memory-check > span {
  grid-column: 1 / -1;
}

.memory-check i {
  display: block;
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(147, 90, 49, 0.52);
  border-radius: 4px;
  background: rgba(255, 226, 184, 0.24);
}

.memory-check b {
  color: rgba(78, 45, 28, 0.82);
  max-height: min(1.02vw, 18px);
  overflow-y: auto;
  font-size: clamp(9px, 0.56vw, 11px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.18;
}

.cat-card-row {
  position: absolute;
  left: 28.6%;
  top: 64.7%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 62.6%;
  height: 20.2%;
  padding: 0 3.1%;
  pointer-events: auto;
}

.cat-card {
  position: relative;
  z-index: 1;
  width: auto;
  height: 80%;
  flex: 0 0 auto;
  object-fit: contain;
  transform-origin: center bottom;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 220ms ease;
  filter:
    drop-shadow(0 12px 12px rgba(70, 35, 15, 0.22))
    drop-shadow(0 2px 2px rgba(255, 241, 210, 0.48));
}

.cat-card:hover {
  z-index: 6;
  transform: translateY(-12px) scale(1.1);
  filter:
    drop-shadow(0 18px 18px rgba(70, 35, 15, 0.3))
    drop-shadow(0 0 12px rgba(255, 236, 180, 0.56));
}

.cat-card.is-selected {
  z-index: 7;
  transform: translateY(-22px) scale(1.18);
  filter:
    drop-shadow(0 20px 22px rgba(70, 35, 15, 0.4))
    drop-shadow(0 0 18px rgba(255, 214, 114, 0.8));
}

.complete-checkin-button {
  position: absolute;
  left: 65.4%;
  top: 89.5%;
  z-index: 7;
  width: 16.4%;
  pointer-events: auto;
  filter:
    drop-shadow(0 12px 16px rgba(58, 28, 12, 0.34))
    drop-shadow(0 0 10px rgba(255, 211, 127, 0.2));
  transform-origin: center;
  transition:
    transform 190ms ease,
    filter 190ms ease;
}

.complete-checkin-button:hover {
  transform: translateY(-3px) scale(1.025);
  filter:
    drop-shadow(0 16px 20px rgba(58, 28, 12, 0.42))
    drop-shadow(0 0 16px rgba(255, 220, 140, 0.32));
}

.complete-checkin-button img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.top-actions {
  position: absolute;
  top: 42px;
  right: 48px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    opacity 720ms ease,
    transform 760ms ease;
}

.top-actions button {
  display: block;
  width: 56px;
  height: 34px;
  opacity: 0.94;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.26));
  transition: transform 180ms ease, opacity 180ms ease;
}

.top-actions button:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.top-actions img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-copy {
  position: absolute;
  left: clamp(54px, 5.8vw, 100px);
  top: clamp(72px, 10.8vh, 102px);
  z-index: 4;
  width: 520px;
  color: var(--cream);
  text-align: center;
  transition:
    opacity 720ms ease,
    transform 760ms ease;
}

.title-art {
  display: block;
  width: 510px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 216, 120, 0.28))
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.42));
}

.soul-line {
  position: relative;
  margin: 44px 0 24px;
  color: rgba(255, 246, 222, 0.94);
  font-family: var(--title-font);
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.54);
  white-space: nowrap;
}

.soul-line::before,
.soul-line::after {
  content: "✦";
  position: absolute;
  top: 50%;
  color: #ffe0a2;
  font-size: 14px;
  transform: translateY(-50%);
}

.soul-line::before {
  left: -28px;
}

.soul-line::after {
  right: -22px;
}

.checkin-button {
  position: relative;
  display: grid;
  width: 318px;
  height: 72px;
  margin: 0 auto;
  place-items: center;
  border: 2px solid rgba(208, 145, 58, 0.88);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 254, 245, 0.98), rgba(255, 236, 202, 0.96));
  box-shadow:
    inset 0 0 0 4px rgba(255, 246, 218, 0.74),
    0 14px 38px rgba(0, 0, 0, 0.31),
    0 0 26px rgba(250, 188, 93, 0.22);
  color: var(--ink);
  font-family: var(--title-font);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.checkin-button::before,
.checkin-button::after {
  content: "✦";
  position: absolute;
  top: 50%;
  color: var(--gold);
  font-size: 17px;
  transform: translateY(-50%);
}

.checkin-button::before {
  left: 30px;
}

.checkin-button::after {
  right: 30px;
}

.checkin-button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 4px rgba(255, 246, 218, 0.78),
    0 18px 44px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(250, 198, 105, 0.3);
}

.roof-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.roof-btn {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}

.roof-btn img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.roof-btn:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 10px 20px rgba(255, 230, 150, 0.44)) brightness(1.06);
}

.roof-btn:active {
  transform: scale(0.97);
}

.btn-gashapon {
  bottom: 73.0%;
  left: 72.1%;
  width: 6.7%;
}

.btn-doll {
  bottom: 73.0%;
  left: 79.0%;
  width: 7.3%;
}

.btn-camera {
  top: 68.23%;
  left: 48.27%;
  width: 6.46%;
}

.btn-comb {
  top: 91.07%;
  left: 17.46%;
  width: 5.44%;
}

/* ==========================================
   ✦ Gashapon Machine Overlay Styles
   ========================================== */
.gashapon-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 18, 0.72);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.gashapon-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.gashapon-stage-status {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 104;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 760px);
  padding: 10px 14px;
  border: 1px solid rgba(232, 194, 108, 0.48);
  border-radius: 8px;
  background: rgba(16, 28, 58, 0.84);
  color: #fff4cf;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
}

.gashapon-stage-status span {
  min-width: 0;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.gashapon-stage-status span + span {
  padding-left: 10px;
  border-left: 1px solid rgba(232, 194, 108, 0.32);
}

.gashapon-overlay.is-round-complete .gashapon-knob-wrapper {
  opacity: 0.42;
  pointer-events: none;
}

.gashapon-container {
  position: relative;
  width: 450px;
  height: 822px;
  background: url("扭蛋机.png") no-repeat center/contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.52));
  transform: translateY(20px) scale(0.95);
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gashapon-overlay.is-active .gashapon-container {
  transform: translateY(0) scale(1);
}

/* Glass Dome */
.gashapon-dome {
  position: absolute;
  left: 45px;
  top: 75px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#gashaponCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.glass-reflection {
  position: absolute;
  top: 10px;
  left: 30px;
  right: 30px;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  border-radius: 50% / 100% 100% 0 0;
  pointer-events: none;
}

/* Base container (transparent overlay for absolute components) */
.gashapon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

/* Knob */
.gashapon-knob-wrapper {
  position: absolute;
  top: 61.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid #664a1d;
  background: linear-gradient(135deg, #e3c485, #b89353);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease;
}


.gashapon-knob-wrapper:hover {
  transform: translate(-50%, -50%) scale(1.04);
}

.gashapon-knob {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe7b3, #d9b168);
  border: 2px solid #9c783c;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.knob-arrow {
  width: 10px;
  height: 58px;
  background: linear-gradient(to bottom, #76521a, #51360e);
  border-radius: 4px;
  transform: rotate(0deg);
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.gashapon-knob-wrapper.spinning .knob-arrow {
  animation: spin-knob 1.1s infinite linear;
}

@keyframes spin-knob {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Exit Slot */
.gashapon-exit {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 70px;
  border-radius: 12px;
  background: #23160a;
  border: 2px solid #4a341e;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6);
  overflow: visible;
  pointer-events: auto;
}

.exit-gate {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #422a16, #2d1b0d);
  border-radius: 8px;
  transform-origin: top;
  transition: transform 300ms ease;
}

.gashapon-exit.open .exit-gate {
  transform: rotateX(-90deg);
}

/* Drawn Capsule */
.drawn-capsule {
  position: absolute;
  left: 14px;
  top: -140px;
  width: 82px;
  height: 82px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
}


.drawn-capsule.drop {
  animation: drop-capsule 900ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
  pointer-events: auto;
  cursor: pointer;
}

@keyframes drop-capsule {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6) rotate(0deg);
  }
  30% {
    opacity: 1;
  }
  80% {
    transform: translateY(146px) scale(1) rotate(320deg);
  }
  90% {
    transform: translateY(139px) scale(1) rotate(340deg);
  }
  100% {
    opacity: 1;
    transform: translateY(142px) scale(1) rotate(360deg);
  }
}

.drawn-capsule.bounce-glow {
  animation: capsule-glow 1500ms infinite alternate ease-in-out;
}

@keyframes capsule-glow {
  from {
    filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.5)) drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    transform: translateY(142px) scale(1);
  }
  to {
    filter: drop-shadow(0 0 20px rgba(255, 220, 140, 0.9)) drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    transform: translateY(142px) scale(1.04);
  }
}

/* Result Overlay */
.gashapon-result {
  position: absolute;
  inset: 0;
  z-index: 110;
  background: rgba(10, 8, 18, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.gashapon-result.is-active {
  opacity: 1;
  pointer-events: auto;
}

.result-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transform: scale(0.8) rotateY(180deg);
  opacity: 0;
  transition: transform 750ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease;
  perspective: 1000px;
}

.gashapon-result.is-active .result-card-container {
  transform: scale(1) rotateY(0deg);
  opacity: 1;
}

.result-card-img {
  width: 350px;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 220, 130, 0.25);
  border: 1px solid rgba(255, 230, 160, 0.18);
}

.result-prize-label {
  min-width: 220px;
  padding: 9px 16px;
  border: 1px solid rgba(232, 194, 108, 0.55);
  border-radius: 8px;
  background: rgba(16, 28, 58, 0.9);
  color: #ffe3a1;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.result-prize-label[data-prize-type="amd"] {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(17, 66, 128, 0.95), rgba(178, 122, 38, 0.95));
}

.result-round-meta {
  color: rgba(255, 244, 207, 0.9);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.result-close-btn,
.next-round-btn {
  padding: 12px 34px;
  border: 2px solid #d4af37;
  border-radius: 8px;
  background: linear-gradient(135deg, #fce19b, #d9b168);
  color: #3b240b;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.next-round-btn {
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
}

.result-close-btn:hover,
.next-round-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(255, 220, 140, 0.3);
}

.result-close-btn:active,
.next-round-btn:active {
  transform: scale(0.97);
}

/* Close button for overlay */
.overlay-close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  padding: 0 0 2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 230, 160, 0.4);
  background: rgba(30, 24, 38, 0.8);
  color: #e3c485;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 105;
  transition: border-color 160ms ease, background 160ms ease;
}

.overlay-close-btn:hover {
  border-color: #e3c485;
  background: rgba(43, 34, 52, 0.86);
}

/* Insight Scene Overlay Styles */
.insight-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.insight-overlay-container {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.insight-overlay-container::before {
  content: "";
  position: absolute;
  left: 6.4%;
  top: 54.8%;
  z-index: 5;
  width: 14.2%;
  height: 39.4%;
  background: url("椅子猫 1.png") center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 20px 24px rgba(65, 31, 10, 0.26));
}

.insight-overlay-field {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--title-font);
  font-weight: 700;
  line-height: 1.45;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #5c351b;
  text-shadow: 0 1px 0 rgba(255, 245, 216, 0.64);
  filter: drop-shadow(0 12px 14px rgba(65, 31, 10, 0.18));
  /* Hide scrollbar by default */
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: opacity 300ms ease;
}

.insight-overlay-field::-webkit-scrollbar {
  display: none;
}

/* 1. 你的原话 (Left vertical scroll) */
.overlay-original-words {
  left: 7.4%;
  top: 13.5%;
  width: 18.4%;
  height: 55.3%;
  background:
    linear-gradient(180deg, rgba(255, 239, 207, 0.96), rgba(255, 222, 174, 0.9));
  border: 2px solid rgba(112, 62, 25, 0.72);
  border-radius: min(0.55vw, 9px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 225, 0.72),
    inset 0 0 26px rgba(127, 68, 21, 0.12),
    0 14px 18px rgba(63, 29, 8, 0.22);
  color: #4a2b18;
  font-size: clamp(12px, 0.82vw, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: min(5.2vw, 82px) min(1.45vw, 24px) min(1vw, 16px);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.55;
}

.overlay-original-words::before {
  content: "✦ 你刚才留下的话 ✦";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 6.2%;
  padding-bottom: min(0.75vw, 12px);
  border-bottom: 1px solid rgba(120, 68, 28, 0.28);
  color: #5a3218;
  font-family: var(--title-font);
  font-size: clamp(15px, 1.12vw, 22px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 2. 核心句点 (Top center) */
.overlay-core-sentence {
  left: 27.8%;
  top: 14.0%;
  width: 48.8%;
  height: 12.2%;
  color: #5c351b;
  font-size: clamp(13px, 0.98vw, 19px);
  line-height: 1.35;
  text-shadow: 0 1px 0 rgba(255, 245, 216, 0.64);
  padding: min(7.2vw, 114px) min(4.2vw, 70px) min(0.95vw, 15px);
  background-image: url("ChatGPT Image 2026年7月6日 11_08_36 (2) 1.png");
  background-size: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 3. 表层事件 */
.overlay-card-surface {
  left: 27.9%;
  top: 27.1%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_00 (1) 1.png");
  font-size: clamp(10px, 0.74vw, 14px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

/* 4. 触发点 */
.overlay-card-trigger {
  left: 44.5%;
  top: 27.1%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_01 (2) 1.png");
  font-size: clamp(10px, 0.74vw, 14px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

/* 5. 情绪 */
.overlay-card-emotion {
  left: 61.1%;
  top: 27.1%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_01 (3) 1.png");
  font-size: clamp(11px, 0.78vw, 15px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

/* 6. 需要 */
.overlay-card-need {
  left: 27.9%;
  top: 48.9%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_02 (4) 1.png");
  font-size: clamp(11px, 0.78vw, 15px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

/* 7. 关系模式 */
.overlay-card-pattern {
  left: 44.5%;
  top: 48.9%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_02 (5) 1.png");
  font-size: clamp(10px, 0.74vw, 14px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

/* 8. 卡住的地方 */
.overlay-card-root {
  left: 61.1%;
  top: 48.9%;
  width: 15.9%;
  height: 19.9%;
  background-image: url("ChatGPT Image 2026年7月6日 12_41_02 (6) 1.png");
  font-size: clamp(10px, 0.74vw, 14px);
  padding: min(4.6vw, 74px) min(1.05vw, 18px) min(1vw, 16px);
}

.overlay-card-unseen {
  display: none;
}

/* 9. 底栏：你还没有看见的地方 (Bottom Left Box) */
.overlay-bottom-unseen {
  left: 28.0%;
  top: 74.4%;
  width: 23.9%;
  height: 15.4%;
  color: #5c351b;
  font-size: clamp(12px, 0.86vw, 16px);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: min(4.5vw, 72px) min(2vw, 32px) min(1vw, 16px);
  background-image: url("8224430a-5c3a-41de-9415-3fb3781962ec 1.png");
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.35;
}

.overlay-bottom-unseen::before {
  content: none;
}

/* 10. 底栏：接下来可以怎么做 (Bottom Right Box) */
.overlay-bottom-todo {
  left: 51.8%;
  top: 74.4%;
  width: 23.9%;
  height: 15.4%;
  color: #5c351b;
  font-size: clamp(12px, 0.86vw, 16px);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: min(4.5vw, 72px) min(2vw, 32px) min(1vw, 16px);
  background-image: url("e1a373c8-2cae-4976-a324-35bd2dfc0021 1.png");
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.35;
}

.overlay-bottom-todo::before {
  content: none;
}

.insight-paw-map-button,
.relationship-map-button {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.insight-paw-map-button {
  left: 15.75%;
  top: 76.05%;
  z-index: 6;
  width: 5.35%;
}

.relationship-map-button {
  left: 80.2%;
  top: 77.0%;
  width: 6.8%;
}

.insight-paw-map-button img,
.relationship-map-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.insight-paw-map-button:hover {
  filter:
    drop-shadow(0 0 12px rgba(255, 226, 162, 0.46))
    drop-shadow(0 8px 12px rgba(65, 31, 10, 0.2));
}

.relationship-map-button:hover {
  filter:
    drop-shadow(0 0 12px rgba(255, 226, 162, 0.52))
    drop-shadow(0 10px 14px rgba(65, 31, 10, 0.2));
}

/* ==========================================
   ✦ Bread Scene Overlay Styles (Page 04)
   ========================================== */
.bread-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bread-overlay-container {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bread-overlay-field {
  position: absolute;
  pointer-events: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--title-font);
  font-weight: 700;
  line-height: 1.45;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: opacity 300ms ease;
}

.bread-overlay-field::-webkit-scrollbar {
  display: none;
}

/* Left scroll card contents */
.overlay-bread-image {
  left: 24.3%;
  top: 20.0%;
  width: 28.0%;
  height: 28.0%;
  justify-content: center;
  align-items: center;
}

.overlay-bread-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.overlay-bread-name {
  left: 22.0%;
  top: 48.5%;
  width: 32.6%;
  height: 6.0%;
  color: #4a2b18;
  font-size: clamp(12px, 0.9vw, 17px);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.overlay-bread-ingredients {
  left: 22.0%;
  top: 55.5%;
  width: 32.6%;
  height: 7.0%;
  color: #5c3c26;
  font-size: clamp(9px, 0.7vw, 13px);
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px;
}

.overlay-bread-ingredients .ingredient-tag {
  background: rgba(184, 135, 96, 0.12);
  border: 1px solid rgba(139, 90, 43, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  color: #5c3c26;
  font-weight: 600;
}

.overlay-bread-desc {
  left: 22.0%;
  top: 64.0%;
  width: 32.6%;
  height: 12.0%;
  color: #4a2b18;
  font-size: clamp(11px, 0.78vw, 15px);
  line-height: 1.5;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
}

.overlay-bread-advice {
  left: 22.0%;
  top: 77.0%;
  width: 32.6%;
  height: 13.0%;
  color: #6a4025;
  font-size: clamp(10px, 0.74vw, 14px);
  line-height: 1.55;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Right QR code box */
.overlay-bread-qr {
  left: 64.3%;
  top: 41.0%;
  width: 13.8%;
  height: 24.5%;
  justify-content: center;
  align-items: center;
}

.overlay-bread-qr img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* ==========================================
   ✦ Preview Scene Overlay Styles (Page 05)
   ========================================== */
.preview-overlay-container {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.preview-overlay-field {
  position: absolute;
  pointer-events: auto;
  font-family: var(--title-font);
  font-weight: 700;
  line-height: 1.45;
  color: #4a2b18;
  transition: opacity 300ms ease;
}

/* Left target box */
.overlay-preview-target {
  left: 2.7%;
  top: 45.8%;
  width: 11.4%;
  height: 17.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ebd3a9;
  font-size: clamp(10px, 0.74vw, 14px);
  padding: 8px;
  line-height: 1.5;
  overflow-y: auto;
  scrollbar-width: none;
}
.overlay-preview-target::-webkit-scrollbar {
  display: none;
}

/* Center Speech Bubble */
.overlay-preview-bubble {
  left: 41.5%;
  top: 23.5%;
  width: 14.5%;
  height: 8.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #4a2b18;
  font-size: clamp(10px, 0.7vw, 14px);
  line-height: 1.4;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.overlay-preview-bubble::-webkit-scrollbar {
  display: none;
}

.overlay-preview-bubble .bubble-os {
  font-size: clamp(8px, 0.58vw, 11px);
  opacity: 0.75;
  font-weight: 500;
  margin-top: 2px;
}

/* Input Area "你的话" */
.overlay-preview-input {
  left: 12.8%;
  top: 77.0%;
  width: 43.0%;
  height: 12.0%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #4a2b18;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(11px, 0.8vw, 16px);
  line-height: 1.5;
  padding: 6px;
}

/* Lists at the bottom right */
.preview-list-container {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 17.5%;
}

.preview-list-item {
  height: 3.8%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(9px, 0.6vw, 12px);
  color: #4a2b18;
  padding: 0 4px 0 15%;
  line-height: 1.35;
  overflow-y: auto;
  scrollbar-width: none;
}
.preview-list-item::-webkit-scrollbar {
  display: none;
}

.preview-bad-list {
  left: 75.35%;
  top: 71.45%;
  width: 6.45%;
  height: auto;
}

.preview-good-list {
  left: 87.35%;
  top: 71.45%;
  width: 6.95%;
  height: auto;
}

@media (max-aspect-ratio: 16 / 9) {
  .hotel-home {
    background-position: 55% center;
  }

  .home-copy {
    left: 44px;
    transform: scale(0.88);
    transform-origin: top left;
  }
}

@media (max-width: 760px) {
  .top-actions {
    right: 20px;
    top: 22px;
    gap: 7px;
  }

  .top-actions button {
    width: 44px;
    height: 27px;
  }

  .home-copy {
    left: 22px;
    top: 86px;
    width: 360px;
    transform: scale(0.74);
  }
}

/* ==========================================
   ✦ Claw Machine Overlay Styles (娃娃机)
   ========================================== */
.claw-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 18, 0.72);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.claw-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.claw-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 470px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.52));
  transform: translateY(20px) scale(0.95);
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.claw-overlay.is-active .claw-container {
  transform: translateY(0) scale(1);
}

.claw-title {
  display: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  color: #dfc699;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  background: linear-gradient(to right, #ffd59a, #dfc699);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glass Crane Window */
.claw-window {
  position: relative;
  width: 430px;
  height: 390px;
  border-radius: 16px 16px 0 0;
  border: 4px solid #f9e6c4;
  background: radial-gradient(circle at 50% 30%, rgba(255, 252, 245, 0.15), rgba(255, 248, 230, 0.03) 70%), rgba(20, 16, 28, 0.5);
  box-shadow:
    inset 0 10px 30px rgba(255, 255, 255, 0.22),
    inset 0 -10px 20px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Trolley / Carriage */
.claw-trolley {
  width: 50px;
  height: 12px;
  background: linear-gradient(to bottom, #dfc699, #9c7b41);
  border-radius: 4px;
  border: 2px solid #5c431b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Crane assembly position */
.claw-crane {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}

/* Claw String */
.claw-string {
  width: 3px;
  height: 40px; /* initial */
  background: #dfc699;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(223, 198, 153, 0.4);
  transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Claw Head / Hand */
.claw-hand {
  position: relative;
  width: 32px;
  height: 20px;
  background: linear-gradient(135deg, #dfc699, #b89353);
  border: 2px solid #7c5f2d;
  border-radius: 4px 4px 6px 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Joint dot in claw hand center */
.claw-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c5f2d;
}

/* Claw fingers */
.claw-finger {
  position: absolute;
  bottom: -18px;
  width: 12px;
  height: 22px;
  border: 3px solid #7c5f2d;
  border-top: none;
  transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.claw-finger.left {
  left: -6px;
  border-right: none;
  border-radius: 0 0 0 10px;
  transform-origin: top right;
  transform: rotate(0deg);
}

.claw-finger.right {
  right: -6px;
  border-left: none;
  border-radius: 0 0 10px 0;
  transform-origin: top left;
  transform: rotate(0deg);
}

/* Clenched claw fingers (when grabbing) */
.claw-hand.clenched .claw-finger.left {
  transform: rotate(35deg);
}

.claw-hand.clenched .claw-finger.right {
  transform: rotate(-35deg);
}

/* Toys at the bottom */
.claw-toy-target {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) scale(1);
  width: 76px;
  height: 76px;
  z-index: 4;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: bottom 1.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, transform 0.4s ease;
}

/* Slight scale up when claw grabs */
.claw-toy-target.grabbed {
  transform: translateX(-50%) scale(1.08);
}

/* Decorative pile of toys */
.claw-toys-pile {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 78px;
  pointer-events: none;
  z-index: 2;
}

.claw-pile-toy {
  position: absolute;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
  transition: opacity 240ms ease, transform 240ms ease;
}

/* Base */
.claw-base {
  position: relative;
  width: 450px;
  height: 164px;
  margin-top: -10px;
  border-radius: 12px 12px 30px 30px;
  border: 4px solid #dfc699;
  background: linear-gradient(185deg, #c7a462, #9c7b41 35%, #76592a);
  box-shadow:
    inset 0 4px 10px rgba(255, 245, 218, 0.45),
    0 15px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px 24px;
  z-index: 6;
}

/* Joystick Area */
.claw-joystick-area {
  position: relative;
  width: 96px;
  height: 96px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.claw-joystick {
  position: relative;
  width: 14px;
  height: 14px;
  background: #3e2815;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.joystick-stick {
  position: absolute;
  bottom: 7px;
  width: 6px;
  height: 38px;
  background: linear-gradient(to top, #7c5f2d, #dfc699);
  border-radius: 3px;
  transform-origin: bottom center;
  animation: joystick-wiggle 6s ease-in-out infinite;
}

.joystick-ball {
  position: absolute;
  top: -38px;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #ff4b4b, #b31010);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  z-index: 2;
  transform-origin: center bottom;
  animation: joystick-ball-wiggle 6s ease-in-out infinite;
}

@keyframes joystick-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(8deg); }
  25% { transform: rotate(-5deg); }
  60% { transform: rotate(-10deg); }
  65% { transform: rotate(6deg); }
}

@keyframes joystick-ball-wiggle {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(5px, 1px); }
  25% { transform: translate(-3px, 0); }
  60% { transform: translate(-7px, 1px); }
  65% { transform: translate(4px, 0); }
}

/* Grab Button */
.claw-grab-btn {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 4px solid #b31010;
  background: radial-gradient(circle at 35% 35%, #ff5252, #c61a1a);
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, filter 120ms ease;
  user-select: none;
}

.claw-grab-btn:hover:not(:disabled) {
  transform: scale(1.04);
  filter: brightness(1.08) drop-shadow(0 0 10px rgba(255, 82, 82, 0.6));
}

.claw-grab-btn:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.2);
}

.claw-grab-btn:disabled {
  background: radial-gradient(circle at 35% 35%, #7a7a7a, #525252);
  border-color: #4a4a4a;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Result popup */
.claw-result {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 16, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  z-index: 10;
  overflow: hidden;
}

.claw-result.is-active {
  opacity: 1;
  pointer-events: auto;
}

.claw-result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  width: 290px;
  background: linear-gradient(180deg, #2f213b, #1d1425);
  border: 3px solid #dfc699;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.72);
  transform: scale(0.85);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.claw-result.is-active .claw-result-container {
  transform: scale(1);
}

.claw-result-headline {
  font-size: 20px;
  font-weight: 800;
  color: #ffd59a;
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}

.claw-result-card {
  position: relative;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 235, 180, 0.22) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.claw-result-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: result-cat-bounce 2s ease-in-out infinite alternate;
}

@keyframes result-cat-bounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.03); }
}

.claw-result-name {
  font-size: 18px;
  font-weight: 700;
  color: #dfc699;
  margin-bottom: 8px;
}

.claw-result-desc {
  font-size: 13px;
  color: #d1c8b7;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0 10px;
}

.claw-result-close {
  width: 80%;
  padding: 10px 0;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #ffd59a, #dfc699);
  color: #1e1329;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(223, 198, 153, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.claw-result-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(223, 198, 153, 0.45);
}

.claw-result-close:active {
  transform: translateY(0);
}

.claw-speed-lines {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 15deg,
    rgba(227, 196, 133, 0.12) 15deg 20deg,
    transparent 20deg 45deg
  );
  animation: rotate-lines 12s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes rotate-lines {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Final preview layout lock: keep the extracted PNG UI from being overridden by older demo rules. */
.preview-scene {
  background:
    linear-gradient(180deg, rgba(8, 5, 7, 0.02), rgba(8, 5, 7, 0.04)),
    url("ChatGPT Image Jul 7, 2026, 02_37_36 PM.png") center / cover no-repeat;
}

.preview-goal-panel {
  left: 0.8%;
  top: 10.0%;
  width: 17.4%;
  height: 14.2%;
  padding: min(5.4vw, 86px) min(1.4vw, 23px) min(0.8vw, 14px);
  background: url("ChatGPT Image 2026年7月5日 05_18_30 (3) 1.png") center / contain no-repeat;
}

.suggestion-options {
  left: 0.9%;
  top: 25.1%;
  width: 17.3%;
  height: 42.6%;
  display: block;
  background: url("image 1.png") center / contain no-repeat;
}

.suggestion-options button {
  left: 7.7%;
  width: 84.8%;
  height: 8.65%;
  opacity: 1;
}

.suggestion-options button:nth-child(1) { top: 20.0%; }
.suggestion-options button:nth-child(2) { top: 31.7%; }
.suggestion-options button:nth-child(3) { top: 43.4%; }
.suggestion-options button:nth-child(4) { top: 55.1%; }
.suggestion-options button:nth-child(5) { top: 66.8%; }
.suggestion-options button:nth-child(6) { top: 78.5%; }

.suggestion-options img {
  display: block;
}

.preview-speech-bubble {
  left: 39.7%;
  top: 18.0%;
  width: 17.2%;
  height: 8.2%;
}

.preview-human-bubble {
  left: 39.7%;
  top: 31.3%;
  width: 17.2%;
  height: 8.2%;
}

.preview-user-box {
  left: 1.0%;
  top: 69.0%;
  width: 31.7%;
  height: 28.8%;
  background: url("ChatGPT Image 2026年7月5日 05_18_32 (8) 1.png") center / contain no-repeat;
}

.preview-speech-bubble,
.preview-human-bubble {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #4a2b18;
  padding: 1.25% 2.15% 1.0%;
}

.preview-speech-bubble {
  background-image: url("ChatGPT Image Jul 7, 2026, 09_29_13 PM (2) 1.png");
  padding-left: 2.6%;
  padding-right: 3.6%;
}

.preview-human-bubble {
  background-image: url("ChatGPT Image Jul 7, 2026, 09_28_58 PM (1) 1.png");
  padding-left: 2.2%;
  padding-right: 3.9%;
}

.preview-speech-bubble::after,
.preview-human-bubble::after {
  display: none;
}

.preview-bad-list {
  left: 73.2%;
  top: 12.2%;
  width: 15.9%;
  height: 55.2%;
  display: grid;
  grid-template-rows: repeat(4, 20.2%);
  gap: 3.8%;
  padding: min(8.8vw, 140px) min(1.0vw, 16px) min(1.5vw, 24px) min(4.2vw, 68px);
  background: url("ChatGPT Image 2026年7月5日 05_18_31 (6) 1.png") center / contain no-repeat;
}

.preview-good-list {
  display: none;
}

.preview-bottom-card {
  top: 69.3%;
  width: 20.1%;
  height: 28.0%;
}

.preview-recommended-card {
  left: 33.2%;
}

.preview-reason-card {
  left: 55.0%;
}

.preview-avoid-card {
  left: 76.6%;
}

.preview-recommended-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 2.png");
}

.preview-reason-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 3.png");
}

.preview-avoid-card::before {
  background-image: url("ChatGPT Image 2026年7月5日 05_18_32 (9) 1.png");
}

.start-preview-button {
  left: 89.9%;
  top: 12.9%;
}

.end-preview-button {
  left: 89.95%;
  top: 30.2%;
}

.save-preview-button {
  left: 89.95%;
  top: 45.6%;
}

.record-button {
  left: 89.95%;
  top: 60.8%;
}