:root {
  --bg: #FFFFFF;
  --cream: #F5EBE0;
  --beige: #E3D5CA;
  --blush: #D5BDAF;
  --sage:  #C0B5A0;
  --butter:#F0D9B5;
  --clay:  #B07A65;
  --ink:   #5C4A3C;
  --ink-soft:#8B7355;
  --gold:  #C9A961;
  --shadow: rgba(92, 74, 60, 0.10);
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { touch-action: manipulation; }
html { overflow-x: hidden; max-width: 100vw; }
body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
  /* Explicitly allow vertical page scroll on touch — defends against any
     nested handler that might claim too much. */
  touch-action: pan-y;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ INTRO ============ */
.intro {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.2s ease;
}
.intro.done { opacity: 0; pointer-events: none; }
.intro-stage {
  text-align: center;
  padding: 0 32px;
  max-width: 720px;
  position: relative;
}
.phrase {
  font-family: 'IBM Plex Serif', serif;
  font-weight: 300;
  font-size: clamp(20px, 6vw, 48px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.3px;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 20px;
  word-break: keep-all;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.phrase.show { opacity: 1; transform: translateY(0); }
.phrase.brand { font-style: italic; color: var(--clay); }
.skip {
  position: fixed; bottom: 32px; right: 32px;
  font-size: 13px; color: var(--ink-soft); letter-spacing: 0.4px;
  padding: 10px 18px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  transition: all var(--transition);
  z-index: 1001;
}
.skip:hover { background: var(--cream); color: var(--ink); }
/* "Next" during the intro — for people who don't want to wait but don't want to
   skip the whole intro either. Steps forward one line at a time. (playtest feedback) */
.intro-next {
  position: fixed; bottom: 32px; left: 32px;
  font-size: 13px; color: var(--ink-soft); letter-spacing: 0.4px;
  padding: 10px 18px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  transition: all var(--transition);
  z-index: 1001;
}
.intro-next:hover { background: var(--cream); color: var(--ink); }
@media (max-width: 600px) { .intro-next { bottom: 20px; left: 20px; } }

/* ============ MAIN ============ */
.main {
  opacity: 0;
  transition: opacity 1.4s ease 0.4s;
  min-height: 100vh;
}
.main.visible { opacity: 1; }

header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 2700; /* stay above fullscreen sub-room panes (z-index 2000–2600) so
                    music / bookmark / language controls remain reachable inside every room */
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream);
}
.brand {
  font-family: 'IBM Plex Serif', serif;
  font-size: 19px; font-weight: 400;
  color: var(--ink); letter-spacing: 0.4px;
}
/* Non-home pages ("rooms"): drop the full bar chrome — brand + background strip —
   and keep just the floating icon buttons (music / bookmark / language) so the
   controls never mask a room's own UI. */
body:not([data-page="home"]) header {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  justify-content: flex-end;
  padding: 16px 20px;
  pointer-events: none; /* empty strip lets clicks through to content underneath */
}
body:not([data-page="home"]) header .brand { display: none; }
body:not([data-page="home"]) header .header-actions { pointer-events: auto; }
body:not([data-page="home"]) .music-toggle,
body:not([data-page="home"]) .lang-toggle {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 12px rgba(30, 20, 10, 0.1);
}
.brand .heart { color: var(--clay); }
/* Keep the header logo on ONE line — tall Android screens (e.g. OPPO) were
   wrapping it to two lines. (playtest feedback) */
header .brand { white-space: nowrap; }
/* Center the icon/label inside the collection + language buttons — they read as
   slightly off-center otherwise. (playtest feedback) */
#bookmarkOpen, #langToggle { display: inline-flex; align-items: center; justify-content: center; }
.lang-toggle {
  padding: 8px 18px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
  letter-spacing: 0.3px;
}
.lang-toggle:hover {
  background: var(--cream);
  border-color: var(--clay);
  color: var(--ink);
}

/* Music toggle button */
.music-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--beige);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-size: 16px;
  transition: all var(--transition);
}
.music-toggle:hover {
  background: var(--cream);
  border-color: var(--clay);
  color: var(--ink);
}
.music-toggle.playing {
  background: var(--cream);
  color: var(--clay);
  border-color: var(--clay);
}
.music-toggle.playing .music-icon-pulse {
  animation: musicPulse 1.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.header-actions {
  display: flex; align-items: center; gap: 10px;
  position: relative;
}

/* Music dropdown menu */
.music-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 46px;
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 18px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 12px 36px rgba(92, 74, 60, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 60;
}
.music-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.music-menu-title {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 12px 6px;
}
.track-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  transition: background var(--transition);
}
.track-btn:hover { background: var(--cream); }
.track-btn .track-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--beige);
  flex-shrink: 0;
}
.track-btn.active .track-dot {
  background: var(--clay);
  animation: trackPulse 1.4s ease-in-out infinite;
}
/* Play/pause state shown ON the currently-selected track (replaces the old
   separate "หยุดเพลง" row) — ⏸ while playing, ▶ while paused. (playtest feedback) */
.track-btn.active::after {
  content: '⏸';
  margin-left: auto;
  padding-left: 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--clay);
}
.track-btn.active.paused::after { content: '▶'; }
.track-btn.active .track-meta { display: none; }
@keyframes trackPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); box-shadow: 0 0 0 4px rgba(176, 122, 101, 0.2); }
}
.track-btn .track-meta {
  font-size: 10px;
  color: var(--ink-soft);
  margin-left: auto;
  font-style: italic;
}
.track-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.track-btn.disabled:hover { background: transparent; }
.track-btn.pause-btn {
  border-top: 1px solid var(--cream);
  margin-top: 4px;
  padding-top: 12px;
  color: var(--ink-soft);
  font-size: 12px;
}

/* ---- Music: volume slider + loop toggle ---- */
.music-divider {
  height: 1px;
  background: var(--cream);
  margin: 6px 4px;
}
.music-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 8px;
}
.music-vol-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
  color: var(--clay);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition);
}
.music-vol-btn:hover { background: var(--cream); }
.music-vol-ico { width: 19px; height: 19px; }
.music-vol-btn.muted .vol-wave { opacity: 0; }
.music-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--cream);
  accent-color: var(--clay);
  cursor: pointer;
  outline: none;
}
.music-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--clay);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(92,74,60,.35);
  cursor: pointer;
}
.music-vol-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--clay);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(92,74,60,.35);
  cursor: pointer;
}
.track-btn.loop-btn {
  align-items: center;
}
.track-btn.loop-btn .loop-ico {
  display: inline-flex;
  width: 16px; height: 16px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: color var(--transition);
}
.track-btn.loop-btn .loop-ico .ui-ic { width: 16px; height: 16px; }
.track-btn.loop-btn .loop-label { flex: 1; text-align: left; }
.track-btn.loop-btn .loop-switch {
  flex-shrink: 0;
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--beige);
  position: relative;
  transition: background var(--transition);
}
.track-btn.loop-btn .loop-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(92,74,60,.3);
  transition: transform var(--transition);
}
.track-btn.loop-btn[aria-checked="true"] .loop-switch { background: var(--clay); }
.track-btn.loop-btn[aria-checked="true"] .loop-knob { transform: translateX(14px); }
.track-btn.loop-btn[aria-checked="true"] .loop-ico { color: var(--clay); }

/* Mini-quest panels in step 4 */
.mini-quest {
  display: none;
  margin-bottom: 20px;
}
.mini-quest.active { display: block; }

/* Sothon: vow contract */
/* Vow path choice — simple bow vs make-a-vow */
.vow-choice {
  text-align: center;
  margin-bottom: 18px;
}
.vow-choice h4 { font-size: 17px; color: var(--ink); }
.vow-choice-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.vow-path-btn {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 16px;
  padding: 18px 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.vow-path-btn:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(193,141,107,0.18);
}
.vow-path-icon { font-size: 30px; margin-bottom: 8px; line-height: 1; }
.vow-path-title {
  font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px;
}
.vow-path-sub {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
}
@media (max-width: 480px) {
  .vow-choice-buttons { grid-template-columns: 1fr; gap: 10px; }
}

.vow-contract {
  background: linear-gradient(180deg, #F8F0E2, var(--cream));
  border: 2px dashed var(--clay);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: left;
  position: relative;
}
.vow-contract h4 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 500;
}
.vow-options {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.vow-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition);
}
.vow-options label:hover { border-color: var(--clay); }
.vow-options input[type="radio"] { accent-color: var(--clay); }
.vow-options input[type="radio"]:checked + span { font-weight: 500; }
.vow-options label:has(input:checked) {
  border-color: var(--clay);
  background: #FFF8EE;
}
.stamp-area {
  position: relative;
  text-align: center;
  margin-top: 16px;
  min-height: 80px;
}
.stamp {
  display: inline-block;
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 3px solid var(--clay);
  color: var(--clay);
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-12deg) scale(0);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  margin: 0 auto;
  background: rgba(255, 248, 238, 0.6);
}
.stamp.show {
  transform: rotate(-12deg) scale(1);
  opacity: 0.85;
}

/* Trimurti: write name + fold paper */
.fold-paper {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
}
.fold-paper textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--beige);
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  background: #FFFEFA;
  transition: all var(--transition);
}
.fold-paper textarea:focus { outline: none; border-color: var(--clay); }
.fold-paper.folded textarea {
  transform: rotateX(72deg) scale(0.7);
  opacity: 0.4;
  pointer-events: none;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  transform-origin: center top;
}
.wallet-icon {
  display: inline-block;
  font-size: 32px;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.4s;
}
.fold-paper.folded .wallet-icon { opacity: 1; }

/* Brahma: 4 directions compass */
.compass {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
.compass-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'IBM Plex Serif', serif;
  font-size: 32px;
  color: var(--gold);
}
.compass-direction {
  position: absolute;
  width: 90px;
  padding: 10px 8px;
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 14px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.compass-direction:hover { border-color: var(--clay); transform: scale(1.05); }
.compass-direction.lit {
  background: #FFF8EE;
  border-color: var(--gold);
  color: var(--clay);
  box-shadow: 0 0 24px rgba(201, 169, 97, 0.4);
}
.compass-direction.lit::after {
  content: '✓';
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--bg);
  border-radius: 50%;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.compass-direction.dir-east  { top: 50%; right: 0;  transform: translateY(-50%); }
.compass-direction.dir-west  { top: 50%; left: 0;   transform: translateY(-50%); }
.compass-direction.dir-south { bottom: 0; left: 50%; transform: translateX(-50%); }
.compass-direction.dir-north { top: 0; left: 50%;    transform: translateX(-50%); }
.compass-direction.dir-east.lit  { transform: translateY(-50%) scale(1.05); }
.compass-direction.dir-west.lit  { transform: translateY(-50%) scale(1.05); }
.compass-direction.dir-south.lit { transform: translateX(-50%) scale(1.05); }
.compass-direction.dir-north.lit { transform: translateX(-50%) scale(1.05); }
.compass-name {
  font-family: 'IBM Plex Serif', serif;
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.compass-power {
  font-size: 10px;
  color: var(--ink-soft);
}

/* Ganesha: whisper to mouse */
.whisper-stage {
  background: var(--cream);
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
}
.mouse-char {
  font-size: 64px;
  margin-bottom: 14px;
  display: inline-block;
  animation: mouseWiggle 2s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes mouseWiggle {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-4deg); }
}
.whisper-stage textarea {
  width: 100%;
  max-width: 420px;
  min-height: 80px;
  border: 1px solid var(--beige);
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  background: var(--bg);
  margin-bottom: 12px;
}
.whisper-stage textarea:focus { outline: none; border-color: var(--clay); }
.whisper-sent {
  display: none;
  font-style: italic;
  color: var(--clay);
  font-size: 14px;
  margin-top: 8px;
}
.whisper-sent.show { display: block; animation: stepIn 0.5s var(--ease); }

/* Lakshmi: place coin */
.coin-stage {
  position: relative;
  background: linear-gradient(180deg, #FFF8EE, var(--cream));
  border-radius: 20px;
  padding: 30px 24px 80px;
  min-height: 320px;
  text-align: center;
}
.altar-zone {
  width: 110px; height: 110px;
  margin: 0 auto 30px;
  border: 2px dashed var(--clay);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  transition: all var(--transition);
  position: relative;
}
.altar-zone.over { background: rgba(201, 169, 97, 0.2); border-style: solid; }
.altar-zone.placed { border-color: var(--gold); border-style: solid; }
.altar-icon { font-size: 40px; opacity: 0.5; }
.altar-zone.placed .altar-icon { opacity: 0; }
.altar-zone .placed-coin {
  position: absolute;
  font-size: 50px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s var(--ease);
}
.altar-zone.placed .placed-coin {
  opacity: 1;
  transform: scale(1);
  animation: coinSpin 2s ease-in-out infinite;
}
@keyframes coinSpin {
  0%, 100% { transform: scale(1) rotateY(0); }
  50%      { transform: scale(1.05) rotateY(180deg); }
}
.coin-source {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  cursor: grab;
  user-select: none;
  transition: transform 0.2s ease;
}
.coin-source:hover { transform: translateX(-50%) scale(1.1); }
.coin-source.placed { display: none; }
.coin-instructions {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
}
.sparkle {
  position: absolute;
  font-size: 20px;
  animation: sparkle 1.5s ease-out forwards;
  pointer-events: none;
}
@keyframes sparkle {
  0%   { transform: scale(0) translate(0, 0); opacity: 1; }
  100% { transform: scale(1.5) translate(var(--sx), var(--sy)); opacity: 0; }
}

/* ==========================================
   พิพิธภัณฑ์ฮีลใจ — Museum Room (Art gallery feel)
   ========================================== */
/* Gallery wall background */
#room-museum .room-content {
  background: linear-gradient(180deg, #FAF6EE 0%, #F5EFE3 100%);
  border-radius: 0;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.museum-inner {
  max-width: min(920px, 100vw);
  margin: 0 auto;
  padding: 0 32px;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .museum-inner { padding: 0 16px; }
}

.museum-tabs {
  display: inline-flex;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 32px;
  gap: 4px;
}
.museum-tab {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all var(--transition);
  white-space: nowrap;
}
.museum-tab:hover { color: var(--ink); }
.museum-tab.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 2px 8px var(--shadow);
}

.gallery-pane {
  display: none;
  text-align: left;
}
.gallery-pane.active {
  display: block;
  animation: stepIn 0.4s var(--ease);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}

/* === Art Gallery Exhibits — horizontal slide with Mac-dock-style focus === */
.exhibits {
  display: flex;
  gap: 28px;
  margin: 36px 0 14px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 32px 4px 40px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.exhibits::-webkit-scrollbar { height: 6px; }
.exhibits::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 3px; }
.exhibits .exhibit {
  flex: 0 0 min(380px, 88%);
  scroll-snap-align: center;
  --dock-scale: 1;
  --dock-opacity: 1;
  transform: scale(var(--dock-scale));
  opacity: var(--dock-opacity);
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.6, 1),
              opacity 0.4s ease;
  will-change: transform, opacity;
}
@media (hover: hover) and (pointer: fine) {
  .exhibits .exhibit:hover {
    transform: scale(calc(var(--dock-scale) * 1.10)) translateY(-6px);
    opacity: 1;
    z-index: 50;
    transition: transform 0.22s cubic-bezier(0.34, 1.5, 0.4, 1),
                opacity 0.18s ease;
  }
}
/* Controls + auto-advance indicator */
.exhibit-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  flex-wrap: wrap;
}
.exhibit-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--beige);
  background: var(--bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.exhibit-nav-btn:hover { background: var(--clay); color: var(--bg); border-color: var(--clay); }
.exhibit-nav-dots {
  display: flex; gap: 6px;
}
.exhibit-dot {
  width: 19px; height: 19px;
  box-sizing: border-box;
  background: var(--beige);
  background-clip: padding-box; /* visual dot 7px, hit area 19px */
  border: 6px solid transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.exhibit-dot.active { background: var(--clay); background-clip: padding-box; width: 30px; border-radius: 10px; }
.exhibit-auto-toggle {
  font-size: 11px;
  background: none;
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ink-soft);
  cursor: pointer;
  margin-left: 8px;
}
.exhibit-auto-toggle.on { background: var(--clay); color: var(--bg); border-color: var(--clay); }
@media (min-width: 760px) {
  .exhibits .exhibit { flex: 0 0 min(440px, 60%); }
}

.exhibit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  cursor: pointer;
}

.exhibit-frame {
  position: relative;
  background: linear-gradient(135deg, #2B1F18 0%, #3A2B1F 50%, #2B1F18 100%);
  padding: 14px;
  box-shadow:
    0 14px 24px rgba(0,0,0,0.18),
    0 4px 8px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 2px;
}
.exhibit-frame::before {
  /* inner gold thin border */
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  pointer-events: none;
}
.exhibit-mat {
  background: #F8F4ED;
  padding: 14px;
  position: relative;
}
.exhibit-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Museum plaque (small caption card next to frame) */
.exhibit-plaque {
  background: linear-gradient(180deg, #FFFEF7 0%, #F8F1E0 100%);
  border: 1px solid #E8DDC8;
  padding: 14px 18px;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(92, 74, 60, 0.08);
  position: relative;
  align-self: center;
}
.exhibit-plaque::before {
  /* small mounting "screw" / decorative dot */
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.4;
}
.plaque-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
  margin-top: 6px;
}
.plaque-meta {
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.plaque-tease {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 10px;
  position: relative;
}
.plaque-tease::before {
  content: '\201C';
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px;
  color: var(--blush);
  margin-right: 2px;
  line-height: 0;
  vertical-align: middle;
}
.plaque-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--clay);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Exhibit detail modal */
.exhibit-modal {
  position: fixed; inset: 0;
  background: rgba(43, 31, 24, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
  overflow-y: auto;
}
.exhibit-modal.active { opacity: 1; pointer-events: auto; }
.exhibit-detail {
  background: #FAF6EE;
  border-radius: 8px;
  max-width: 720px; width: 100%;
  position: relative;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  overflow-y: auto; /* เลื่อนในการ์ด — ปุ่มปิด sticky อยู่กับที่ */
  max-height: calc(100dvh - 48px);
  margin: auto;
}
.exhibit-modal.active .exhibit-detail { transform: scale(1); }
.exhibit-detail-frame {
  background: linear-gradient(135deg, #2B1F18, #3A2B1F);
  padding: 22px;
}
.exhibit-detail-mat {
  background: #F8F4ED;
  padding: 22px;
}
.exhibit-detail-photo {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.05);
}
.exhibit-detail-body {
  padding: 32px 40px 40px;
  position: relative;
}
.exhibit-detail-eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.exhibit-detail-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 26px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 6px;
}
.exhibit-detail-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  margin-bottom: 22px;
  font-style: italic;
}
.exhibit-detail-story {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.8;
  white-space: pre-wrap;
}
.exhibit-detail-author {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--clay);
  margin-top: 22px;
  text-align: right;
}
.exhibit-detail-close {
  position: sticky;
  top: 12px;
  margin: 12px 12px -56px auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--ink);
  z-index: 5;
  transition: all var(--transition);
}
.exhibit-detail-close:hover { background: var(--bg); transform: scale(1.05); }

/* === Words gallery cards (printed quotes on wall) === */
/* Words gallery — uses .exhibits horizontal-scroll layout (proven safe).
   Override the in-DOM .word-card-wall sizing so cards have proper width. */
.exhibits.words-as-exhibits { scroll-snap-type: x proximity; }
.exhibits.words-as-exhibits .word-card-wall {
  flex: 0 0 240px;
  scroll-snap-align: center;
  background: linear-gradient(180deg, #FFFEF7 0%, #F8F1E0 100%);
  border: 1px solid #E8DDC8;
  padding: 26px 22px 20px;
  position: relative;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 6px 14px rgba(92, 74, 60, 0.08);
  border-radius: 2px;
  /* Allow Thai (no spaces) to wrap inside card */
  word-break: break-all !important;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
}
.exhibits.words-as-exhibits .word-card-wall span,
.exhibits.words-as-exhibits .word-card-wall div {
  word-break: break-all !important;
}
@media (min-width: 760px) {
  .exhibits.words-as-exhibits .word-card-wall { flex: 0 0 260px; }
}
.word-card-wall:hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 0 12px 24px rgba(92, 74, 60, 0.14);
}
.word-card-wall::before {
  /* tape on top */
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 64px; height: 14px;
  background: rgba(240, 217, 181, 0.7);
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.word-card-wall .quote-mark {
  font-family: 'IBM Plex Serif', serif;
  font-size: 48px;
  color: var(--blush);
  line-height: 0.5;
  display: block;
  margin-bottom: 10px;
}

/* Hidden — keep old class name styles harmless */
.obj-card {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 18px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.obj-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px var(--shadow);
}
.obj-photo {
  aspect-ratio: 4 / 3;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  color: var(--clay);
  position: relative;
  overflow: hidden;
}
.obj-photo::before {
  /* Decorative tape on top */
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 60px; height: 16px;
  background: rgba(240, 217, 181, 0.7);
  border-radius: 2px;
}
.obj-photo.bg-1 { background: linear-gradient(135deg, #F5EBE0, #E3D5CA); }
.obj-photo.bg-2 { background: linear-gradient(135deg, #F0D9B5, #D5BDAF); }
.obj-photo.bg-3 { background: linear-gradient(135deg, #C0B5A0, #E3D5CA); }
.obj-photo.bg-4 { background: linear-gradient(135deg, #D5BDAF, #F5EBE0); }
.obj-photo.bg-5 { background: linear-gradient(135deg, #F0D9B5, #C0B5A0); }
.obj-photo.bg-6 { background: linear-gradient(135deg, #F5EBE0, #F0D9B5); }
.obj-body { padding: 18px 20px 20px; }
.obj-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 500;
}
.obj-caption {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.obj-author {
  font-size: 11px;
  color: var(--clay);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Words card */
.word-card {
  background: linear-gradient(180deg, var(--bg), #FFFEFA);
  border: 1px solid var(--beige);
  border-radius: 18px;
  padding: 24px 22px;
  position: relative;
  transition: all var(--transition);
}
.word-card:hover {
  transform: translateY(-3px);
  border-color: var(--blush);
  box-shadow: 0 12px 28px var(--shadow);
}
.word-card::before {
  content: '\201C';
  position: absolute;
  top: 6px; left: 14px;
  font-size: 56px;
  color: var(--blush);
  line-height: 1;
  font-family: 'IBM Plex Serif', serif;
  opacity: 0.5;
}
.word-quote {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin-top: 8px;
  font-style: italic;
}
.word-author {
  font-size: 11px;
  color: var(--clay);
  letter-spacing: 0.3px;
  margin-top: 12px;
  text-align: right;
}

/* Submit CTA */
.submit-cta {
  background: var(--cream);
  border: 1.5px dashed var(--clay);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  margin-bottom: 24px;
}
.submit-cta-icon { font-size: 32px; margin-bottom: 8px; }
.submit-cta-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 500;
}
.submit-cta-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.submit-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--clay);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: all var(--transition);
}
.submit-cta-btn:hover {
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}

/* Submit modal */
.submit-modal {
  position: fixed; inset: 0;
  background: rgba(92, 74, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.submit-modal.active { opacity: 1; pointer-events: auto; }
.submit-card {
  background: var(--bg);
  border-radius: 28px;
  padding: 32px 28px;
  max-width: 480px; width: 100%;
  text-align: left;
  position: relative;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 20px 60px rgba(92, 74, 60, 0.15);
  max-height: 85vh;
  overflow-y: auto;
}
.submit-modal.active .submit-card { transform: scale(1); }
.submit-card h3 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 6px;
}
.submit-card p.sub {
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 20px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  font-weight: 500;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--beige);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  resize: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--clay); }
.form-group textarea { min-height: 90px; }
.upload-zone {
  border: 1.5px dashed var(--beige);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  transition: all var(--transition);
}
.upload-zone:hover { border-color: var(--clay); background: var(--cream); }
.upload-zone.has-file { color: var(--clay); border-color: var(--clay); background: var(--cream); }
.submit-btns {
  display: flex; gap: 10px;
  margin-top: 20px;
}
.submit-btns button { flex: 1; }
.btn-cancel {
  padding: 14px;
  background: linear-gradient(100deg, var(--ink) 50%, rgba(92,74,60,0) 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  transition: background-position .5s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn-cancel:hover { color: var(--cream); border-color: var(--ink); background-position: 0 0; }
.btn-submit {
  padding: 14px;
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(100deg, var(--clay) 50%, var(--ink) 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: background-position .5s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn-submit:hover { background-position: 0 0; border-color: var(--clay); color: #fff; transform: translateY(-2px); box-shadow: 0 9px 18px rgba(92,74,60,.25); }
.submit-success {
  text-align: center;
  padding: 20px 0;
  display: none;
}
.submit-success.show { display: block; }
.submit-success-icon { font-size: 56px; margin-bottom: 12px; }

/* ==========================================
   ออกไปข้างนอก — Walk suggestions
   ========================================== */
.walk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0 20px;
}
.walk-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--beige);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: left;
  transition: all var(--transition);
}
.walk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px var(--shadow);
  border-color: var(--blush);
}
.walk-emoji {
  font-size: 28px;
  margin-bottom: 8px;
}
.walk-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.walk-card p {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.alt-room-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 24px 0 12px;
  font-style: italic;
}
.alt-room-note a {
  color: var(--clay);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ==========================================
   อยู่กับตัวเอง — Multi-session room
   ========================================== */
.alone-room {
  position: relative;
  min-height: 100vh;
  padding: 100px 24px 60px;
  text-align: center;
  background: var(--bg);
  overflow: hidden;
}
.alone-bg {
  display: none;
  position: absolute;
  inset: 0;
  background-image: url("../images/bedroom.jpg");
  background-size: contain;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
}
.alone-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.alone-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  margin: 24px auto 28px;
  gap: 4px;
}
.alone-tab {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all var(--transition);
  white-space: nowrap;
}
.alone-tab:hover { color: var(--ink); }
.alone-tab.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 2px 8px var(--shadow);
}
.alone-pane { display: none; }
.alone-pane.active { display: block; animation: stepIn 0.4s var(--ease); }

/* ===== Sub-room mode (hotspot click → fullscreen view of that activity) ===== */
/* Stepwise back: inside a sub-pane, hide the jump-to-map exits — only "back to bedroom" shows */
#room-alone.subroom .room-nav,
#room-community.subroom .room-nav { display: none; }
/* Hide stage + intro when in subroom mode */
.alone-content.subroom-active .room-stage,
.alone-content.subroom-active .aesthetic-toggle,
.alone-content.subroom-active .room-eyebrow,
.alone-content.subroom-active .room-title,
.alone-content.subroom-active .room-subtitle,
.community-content.subroom-active .room-stage,
.community-content.subroom-active .room-eyebrow,
.community-content.subroom-active .room-title,
.community-content.subroom-active .room-subtitle,
.museum-inner.subroom-active .room-stage,
.museum-inner.subroom-active .room-eyebrow,
.museum-inner.subroom-active .room-title,
.museum-inner.subroom-active .room-subtitle {
  display: none;
}
/* Tabs stay visible in subroom mode as quick switcher (compact form) */
.alone-content.subroom-active .alone-tabs,
.museum-inner.subroom-active .museum-tabs {
  margin-top: 0;
  margin-bottom: 28px;
  animation: stepIn 0.4s var(--ease) 0.05s backwards;
}
/* In default mode (stage view), hide the panes + tabs — they only show after a hotspot click */
.alone-content:not(.subroom-active) .alone-pane,
.community-content:not(.subroom-active) .alone-pane,
.museum-inner:not(.subroom-active) .gallery-pane {
  display: none !important;
}
/* The little in-room tab strip is kept as a DOM marker only — navigation between
   sub-rooms always goes back out to the room scene first (walk out, walk back in),
   never a same-screen switcher, even while a sub-room is open. */
.community-content .alone-tabs { display: none !important; }
/* Hidden tab containers are kept as DOM markers only — never visible */
.alone-tabs[hidden],
.museum-tabs[hidden] { display: none !important; }
/* The active pane fades in when entering subroom */
.alone-content.subroom-active .alone-pane.active,
.community-content.subroom-active .alone-pane.active,
.museum-inner.subroom-active .gallery-pane.active {
  animation: stepIn 0.5s var(--ease) 0.1s backwards;
}

/* =========================================================================
   IMMERSIVE SUB-ROOMS — entering any little room (diary, sky, meditate,
   coloring) takes over the whole viewport, the same way the cat & dog rooms
   already do. The activity becomes the room instead of a card on the page.
   (Pet panes keep their own petgame-mode fullscreen at z-index 4000.)
   ========================================================================= */
body:has(#room-alone .alone-content.subroom-active) { overflow: hidden; }

#room-alone .alone-content.subroom-active .alone-pane.active:not(.petpane) {
  position: fixed;
  inset: 0;
  z-index: 2000;
  margin: 0;
  /* playtest: แถบบนบังหัวสมุด/หัวข้อ → เว้นที่ให้พ้นแถบเสมอ */
  padding: calc(env(safe-area-inset-top, 0px) + 84px) clamp(16px, 5vw, 40px) 44px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  background:
    radial-gradient(150% 100% at 50% -10%, var(--cream) 0%, var(--bg) 55%);
  animation: subroomIn 0.5s var(--ease) both;
}
/* meditation manages its own full-bleed screens — each screen fills the whole room
   so tapping a card pops the setup / breathing player up full-screen */
#room-alone .alone-content.subroom-active .med-pane.active {
  padding: 0 !important;
  background: radial-gradient(150% 100% at 50% -10%, var(--cream) 0%, var(--bg) 55%);
}
#room-alone .alone-content.subroom-active .med-pane.active > .med-select.active-screen,
#room-alone .alone-content.subroom-active .med-pane.active > .med-detail.active-screen,
#room-alone .alone-content.subroom-active .med-pane.active > .med-play.active-screen,
#room-alone .alone-content.subroom-active .med-pane.active > .med-done.active-screen {
  position: absolute; inset: 0;
  width: 100%; min-height: 100%;
  max-width: none; margin: 0; border-radius: 0;
}
#room-alone .alone-content.subroom-active .med-pane.active > .med-select.active-screen,
#room-alone .alone-content.subroom-active .med-pane.active > .med-done.active-screen {
  justify-content: center;
}
/* recentre the tall detail card's content in the full-height screen */
#room-alone .alone-content.subroom-active .med-pane.active > .med-detail.active-screen {
  padding: 20px clamp(20px, 6vw, 60px) 34px;
}
/* centre each activity's own column inside the full-viewport room */
#room-alone .alone-content.subroom-active .alone-pane.active:not(.petpane) > * {
  margin-left: auto;
  margin-right: auto;
}
@keyframes subroomIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------------------
   Fortune (ดูดวง) — the embedded tarot deck (fortune-deck.html) is built to
   run full-screen. Let it own the whole room instead of sitting as a capped
   widget in a narrow column.
   ------------------------------------------------------------------------- */
body:has(.community-content.subroom-active #cpane-fortune.active) { overflow: hidden; }

.community-content.subroom-active #cpane-fortune.active {
  position: fixed;
  inset: 0;
  z-index: 2000;
  margin: 0;
  padding: 0;
  background: #15121f;
  animation: subroomIn 0.5s var(--ease) both;
}
.community-content.subroom-active #cpane-fortune.active > .alone-h3,
.community-content.subroom-active #cpane-fortune.active > .alone-sub { display: none; }
.community-content.subroom-active #cpane-fortune.active .fortune-embed-wrap {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100%;
}
.community-content.subroom-active #cpane-fortune.active .fortune-embed {
  height: 100% !important;
  min-height: 100vh;
}
/* -------------------------------------------------------------------------
   DESKTOP FIT — on a big screen the immersive rooms have lots of space, so
   each activity's widget grows to fill it. Mobile keeps its own tuned sizes
   (these only kick in from 760px up), so the two fits stay independent.
   ------------------------------------------------------------------------- */
@media (min-width: 760px) {
  /* Diary — roomier calendar & entries */
  #room-alone .alone-content.subroom-active #apane-letter.active .diary { max-width: 600px; }

  /* Coloring — a much larger canvas to actually colour in */
  #room-alone .alone-content.subroom-active #apane-color.active .color-canvas,
  #room-alone .alone-content.subroom-active #apane-color.active .color-canvas-wrap { max-width: 540px; }
  #room-alone .alone-content.subroom-active #apane-color.active .colorbook { max-width: 660px; }
  #room-alone .alone-content.subroom-active #apane-color.active .colorbook-tabs { max-width: 660px; }

  /* Sky / rain bedroom — taller scene, capped so it reads as a room not a band */
  #room-alone .alone-content.subroom-active #apane-bedroom.active .bedroom-stage {
    height: 460px; max-width: 640px; margin-left: auto; margin-right: auto;
  }
  #room-alone .alone-content.subroom-active #apane-bedroom.active .bedroom-controls {
    max-width: 640px;
  }

  /* Meditation — bigger cover-flow cards (offsets are %-based, so spacing scales too) */
  #room-alone .alone-content.subroom-active .med-pane.active .med-flow { height: 430px; }
  #room-alone .alone-content.subroom-active .med-pane.active .med-card { width: 300px; height: 396px; }
}
@media (min-width: 1180px) {
  #room-alone .alone-content.subroom-active #apane-color.active .color-canvas,
  #room-alone .alone-content.subroom-active #apane-color.active .color-canvas-wrap { max-width: 620px; }
  #room-alone .alone-content.subroom-active #apane-color.active .colorbook { max-width: 760px; }
  #room-alone .alone-content.subroom-active #apane-color.active .colorbook-tabs { max-width: 760px; }
  #room-alone .alone-content.subroom-active #apane-letter.active .diary { max-width: 660px; }
  #room-alone .alone-content.subroom-active .med-pane.active .med-flow { height: 470px; }
  #room-alone .alone-content.subroom-active .med-pane.active .med-card { width: 330px; height: 434px; }
}

/* ===== Spatial illustration room (bedroom + museum) ===== */
/* ===== Aesthetic toggle: a segmented tab that grows out of the image top ===== */
.room-stage-wrap {
  max-width: 460px;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aesthetic-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  margin: 0;
  position: relative;
  z-index: 2;
  background: var(--cream);
  border: 1.5px solid var(--beige);
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -5px 14px var(--shadow);
}
.aest-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 5px;
}
.aest-btn:hover { color: var(--ink); }
.aest-divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1.5px;
  height: 16px;
  margin: 0 3px;
  border-radius: 1px;
  background: var(--beige);
  transition: opacity var(--transition);
}
.aest-btn.active {
  background: var(--clay);
  color: var(--bg);
  box-shadow: 0 2px 6px var(--shadow);
}
/* Divider tucks behind whichever side is lit, but stays as a seam otherwise */
.aest-btn.active + .aest-divider,
.aest-divider:has(+ .aest-btn.active) { opacity: 0.35; }
.room-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px var(--shadow);
  transition: opacity 0.4s var(--ease);
}
.room-stage.swapping { opacity: 0; }
.room-illustration {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.hotspot {
  position: absolute;
  background: rgba(255,253,247,0.55);   /* glassy transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,253,247,0.6);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* Gentle float up/down — each hotspot delays differently for organic feel */
  animation: hotspotFloat 3.4s ease-in-out infinite;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hotspot:hover {
  background: rgba(193,141,107,0.92);
  color: var(--bg);
  border-color: var(--clay);
}
.hotspot:hover .hotspot-dot {
  background: var(--bg);
  box-shadow: 0 0 0 4px rgba(255,253,247,0.35);
}
.hotspot:focus-visible { outline: 2px dashed var(--clay); outline-offset: 4px; }
.hotspot.active {
  background: rgba(193,141,107,0.92);
  color: var(--bg);
  border-color: var(--clay);
  animation: hotspotFloatActive 3.4s ease-in-out infinite;
}
.hotspot-dot {
  width: 7px; height: 7px;
  background: var(--clay);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(193,141,107,0.25);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
@keyframes hotspotFloat {
  0%, 100% {
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
  }
  50% {
    transform: translate(-50%, calc(-50% - 5px));
    box-shadow: 0 8px 16px rgba(0,0,0,0.18);
  }
}
@keyframes hotspotFloatActive {
  0%, 100% {
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 14px rgba(193,141,107,0.35);
  }
  50% {
    transform: translate(-50%, calc(-50% - 5px));
    box-shadow: 0 8px 20px rgba(193,141,107,0.5);
  }
}
/* Stagger the float so they feel organic, not synchronized */
.room-stage .hotspot:nth-child(2) { animation-delay: 0.4s; }
.room-stage .hotspot:nth-child(3) { animation-delay: 0.8s; }
.room-stage .hotspot:nth-child(4) { animation-delay: 1.2s; }
.room-stage .hotspot:nth-child(5) { animation-delay: 1.6s; }
.room-stage .hotspot:nth-child(6) { animation-delay: 2.0s; }

/* ===== Museum hotspot positions ===== */
.room-stage-museum { margin-left: auto; margin-right: auto; }
.room-stage-museum .hotspot[data-mpane="objects"] { top: 22%; left: 30%; }
.room-stage-museum .hotspot[data-mpane="words"]   { top: 22%; left: 72%; }

/* ===== Café (community) — IMMERSIVE full-screen entrance ===== */
/* ภาพเต็มจอแบบ cover · กล่อง .stage-cover ถูกคำนวณให้คลุมจอเสมอโดยคงสัดส่วนภาพ
   (1792:2400 → 0.7467) ดังนั้นจุด hotspot ที่วางเป็น % จะเกาะติดเฟอร์นิเจอร์เป๊ะ
   แม้ภาพจะถูกครอปบนจอที่สัดส่วนต่างกัน */
.community-content:not(.subroom-active) {
  position: static;
  max-width: none;
  margin: 0;
}
#room-community .room-stage-community {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}
.room-stage-community .stage-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  /* คลุมจอเสมอ (cover) — ค่าเริ่มต้น = ภาพมือถือ 9:16 (อัตราส่วน 0.558) */
  width: max(100vw, 100vh * 0.558);
  height: max(100vh, 100vw * 1.792);
  transform: translate(-50%, -50%);
}
.room-stage-community .room-illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.room-stage-community .img-desktop { display: none; }
/* ป้ายหัวห้องลอยบนภาพ + ฉากจางด้านบนให้อ่านง่าย */
.community-content:not(.subroom-active) .room-eyebrow,
.community-content:not(.subroom-active) .room-title,
.community-content:not(.subroom-active) .room-subtitle {
  position: relative;
  z-index: 6;
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(255,253,247,0.95), 0 1px 12px rgba(255,253,247,0.85);
}
.community-content:not(.subroom-active) .room-subtitle { color: var(--ink); font-weight: 500; }
/* แผ่นรองโปร่งหลังตัวหนังสือ — สี่เหลี่ยม feather ขอบเยอะ (เบลอ) ให้อ่านง่ายแต่ไม่ทึบ */
.community-content:not(.subroom-active) .room-title::before,
.community-content:not(.subroom-active) .room-subtitle::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.4em -1.3em;
  /* playtest #2: ข้อความใต้ชื่อห้อง (คาเฟ่) ยังอ่านยากบนภาพลายเยอะ → แผ่นรองทึบขึ้นอีก + เบลอน้อยลง
     (0.92→0.985 opacity, blur 18→11) ให้เป็นแผ่นรองชัดขึ้น ภาพไม่ทะลุ แต่ขอบยังนุ่ม */
  background: rgba(255,253,247,0.985);
  border-radius: 26px;
  filter: blur(11px);
  pointer-events: none;
}
.community-content:not(.subroom-active) .room-eyebrow { margin-top: 14px; }
.community-content:not(.subroom-active)::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(255,253,247,0.9) 0%, rgba(255,253,247,0.5) 50%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
/* Landscape / desktop: สลับเป็นภาพแนวนอน 16:9 (อัตราส่วน 1.792) เต็มจอแบบ cover เช่นกัน */
@media (min-aspect-ratio: 1/1) {
  .room-stage-community .img-mobile  { display: none; }
  .room-stage-community .img-desktop { display: block; }
  .room-stage-community .stage-cover {
    width: max(100vw, 100vh * 1.792);
    height: max(100vh, 100vw * 0.558);
  }
}
/* ในโหมดเข้าห้อง ซ่อนปุ่มกลับแผนที่ด้านล่าง — ใช้ปุ่ม ✕ มุมขวาบนแทน */
.community-content:not(.subroom-active) .room-nav { display: none; }

/* จุดคาเฟ่ทำให้ใสกว่าห้องอื่น — กันบังทัศนียภาพในภาพ
   + ลอยแนวตั้งอย่างเดียว เพื่อให้ป้ายยึดขอบเปิดเข้าด้านใน (กันป้ายตกขอบจอเวลาภาพถูกครอป) */
.room-stage-community .hotspot {
  background: rgba(255,253,247,0.32);
  border-color: rgba(255,253,247,0.45);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  animation: hotspotFloatComm 3.4s ease-in-out infinite;
}
.room-stage-community .hotspot:hover,
.room-stage-community .hotspot.active {
  background: rgba(193,141,107,0.92);
  border-color: var(--clay);
}
.room-stage-community .hotspot.active { animation-name: hotspotFloatCommA; }
/* ฝั่งขวา: จุดอยู่ขวา (เกาะเฟอร์นิเจอร์) ป้ายยื่นเข้าด้านในซ้าย */
.room-stage-community .hotspot.hs-right { flex-direction: row-reverse; }
@keyframes hotspotFloatComm {
  0%,100% { transform: translateY(-50%); box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
  50%     { transform: translateY(calc(-50% - 5px)); box-shadow: 0 8px 16px rgba(0,0,0,0.18); }
}
@keyframes hotspotFloatCommA {
  0%,100% { transform: translateY(-50%); box-shadow: 0 4px 14px rgba(193,141,107,0.35); }
  50%     { transform: translateY(calc(-50% - 5px)); box-shadow: 0 8px 20px rgba(193,141,107,0.5); }
}

/* ===== ตำแหน่งจุด hotspot — จูนแยกต่อภาพ ===== */
/* มือถือ 9:16 (ค่าเริ่มต้น) */
.room-stage-community .hotspot[data-cpane="articles"] { top: 40%; left: 45%; right: auto; }
.room-stage-community .hotspot[data-cpane="lofi"]     { top: 53%; right: 18%; left: auto; }
.room-stage-community .hotspot[data-cpane="quiz"]     { top: 75%; left: 24%; right: auto; }
.room-stage-community .hotspot[data-cpane="fortune"]  { top: 72%; right: 28%; left: auto; }
/* คอม 16:9 */
@media (min-aspect-ratio: 1/1) {
  .room-stage-community .hotspot[data-cpane="articles"] { top: 38%; left: 50%; right: auto; }
  .room-stage-community .hotspot[data-cpane="lofi"]     { top: 64%; right: 10%; left: auto; }
  .room-stage-community .hotspot[data-cpane="quiz"]     { top: 82%; left: 38%; right: auto; }
  .room-stage-community .hotspot[data-cpane="fortune"]  { top: 80%; right: 40%; left: auto; }
}

/* ===== Per-aesthetic hotspot positions (bedroom only) ===== */
/* COZY layout (bed center, window left, mirror right) */
.room-stage[data-aest="cozy"] .hotspot[data-pane="bedroom"]  { top: 38%; left: 50%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="mood"]     { top: 28%; left: 56%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="letter"]   { top: 60%; left: 14%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="cat"]      { top: 82%; left: 55%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="dog"]      { top: 66%; left: 80%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="meditate"] { top: 78%; left: 22%; }
.room-stage[data-aest="cozy"] .hotspot[data-pane="color"]    { top: 22%; left: 28%; }
/* LOFT layout (bed center-right, window top-left, mirror upper-right) */
.room-stage[data-aest="loft"] .hotspot[data-pane="bedroom"]  { top: 22%; left: 18%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="mood"]     { top: 26%; left: 50%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="letter"]   { top: 90%; left: 14%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="cat"]      { top: 82%; left: 52%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="dog"]      { top: 58%; left: 18%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="meditate"] { top: 90%; left: 38%; }
.room-stage[data-aest="loft"] .hotspot[data-pane="color"]    { top: 48%; left: 24%; }

@media (max-width: 480px) {
  .room-stage { max-width: 92vw; }
  .hotspot { font-size: 10px; padding: 5px 10px; }
  .hotspot-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(193,141,107,0.25); }
}

/* ===== Release Room (throwing game) ===== */
.release-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 90px 24px 30px;
  text-align: center;
}
.release-stage[hidden] { display: none; }
.release-section { margin: 28px 0; text-align: center; }
.release-h4 {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.release-places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
}
.release-place {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 18px;
  padding: 18px 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.release-place:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
}
.release-place.active {
  background: var(--cream);
  border-color: var(--clay);
  box-shadow: 0 4px 14px rgba(193,141,107,0.2);
}
.release-place-icon { font-size: 36px; margin-bottom: 6px; line-height: 1; }
.release-place-label { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.release-place-sub { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }

.release-times {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.release-time {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}
.release-time:hover { border-color: var(--clay); color: var(--ink); }
.release-time.active { background: var(--clay); color: var(--bg); border-color: var(--clay); }

.release-start-btn {
  font-size: 17px;
  padding: 16px 36px;
  margin-top: 22px;
}

/* Leaderboard */
.release-leaderboard {
  margin: 48px auto 0;
  max-width: 460px;
  text-align: left;
  background: var(--cream);
  border-radius: 16px;
  padding: 22px 24px;
}
.release-leaderboard .release-h4 { text-align: center; }
.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(193,141,107,0.15);
  font-size: 13px;
}
.leaderboard-list li:last-child { border-bottom: none; }
.lb-rank {
  width: 22px; height: 22px;
  background: var(--bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  color: var(--clay);
  flex-shrink: 0;
}
.lb-rank.gold { background: linear-gradient(135deg,#ffd97a,#ffb84d); color: #6b3a00; }
.lb-rank.silver { background: linear-gradient(135deg,#e0e0e0,#bdbdbd); color: #444; }
.lb-rank.bronze { background: linear-gradient(135deg,#e8a87c,#b87333); color: #4a2300; }
.lb-name { flex: 1; color: var(--ink); font-weight: 500; }
.lb-meta { font-size: 11px; color: var(--ink-soft); }
.lb-score {
  font-weight: 700;
  color: var(--clay);
  font-family: 'IBM Plex Serif', serif;
}
.leaderboard-empty { text-align: center; color: var(--ink-soft); font-style: italic; font-size: 13px; }

/* Game play screen */
.release-hud {
  display: flex; justify-content: space-around;
  gap: 16px;
  margin-bottom: 18px;
}
.release-counter {
  flex: 1; max-width: 180px;
  background: var(--cream);
  border-radius: 14px;
  padding: 10px 14px;
}
.counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.counter-value {
  font-family: 'IBM Plex Serif', serif;
  font-size: 28px;
  color: var(--clay);
  font-feature-settings: 'tnum';
  font-weight: 600;
  line-height: 1.1;
}
.release-scene {
  position: relative;
  height: 60vh;
  min-height: 380px;
  max-height: 540px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #e8d7b8 0%, #d4b896 60%, #c19a6c 100%);
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.release-scene.scene-office { background: linear-gradient(180deg, #d8e4f0 0%, #b8cce0 60%, #8da8c4 100%); }
.release-scene.scene-kitchen { background: linear-gradient(180deg, #f4e6cc 0%, #e8d4a4 60%, #c8a878 100%); }
.release-scene.scene-bedroom { background: linear-gradient(180deg, #f4d4d4 0%, #e8b8b8 60%, #c89898 100%); }
.scene-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  font-weight: 500;
  padding: 16px;
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
}
.release-scene.played .scene-hint { opacity: 0; }

/* Thrown item — animated emoji on the scene */
.thrown-item {
  position: absolute;
  font-size: 42px;
  pointer-events: none;
  z-index: 2;
  animation: throwArc 0.9s cubic-bezier(0.4, 1.4, 0.6, 1) forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
@keyframes throwArc {
  0%   { transform: translate(-50%, 0) scale(0.4) rotate(0); opacity: 0; }
  20%  { transform: translate(-50%, -60%) scale(1) rotate(180deg); opacity: 1; }
  60%  { transform: translate(-50%, -90%) scale(1.1) rotate(540deg); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(0.6) rotate(720deg); opacity: 0; }
}
/* Impact splash when item "lands" */
.throw-splash {
  position: absolute;
  font-size: 28px;
  pointer-events: none;
  z-index: 3;
  animation: splashOut 0.6s ease-out forwards;
}
@keyframes splashOut {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.release-stop-btn {
  margin: 0 auto;
  display: inline-flex;
}

/* Result screen */
.release-result-icon { font-size: 56px; margin-bottom: 12px; line-height: 1; }
.release-result-title strong { color: var(--clay); font-size: 1.25em; }
.release-breakdown {
  background: var(--cream);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px auto;
  max-width: 420px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.breakdown-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  color: var(--ink);
}
.breakdown-row .br-count { font-weight: 700; color: var(--clay); }
.release-question {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  margin: 22px 0 14px;
}
.release-yesno {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 22px;
}
.release-name-entry {
  background: var(--cream);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 auto 18px;
  max-width: 440px;
}
.release-name-row {
  display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.release-name-row input {
  flex: 1; min-width: 160px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.release-name-row input:focus { border-color: var(--clay); }
.release-skip-save {
  font-size: 11px;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.release-result-share { margin-top: 8px; }

@media (max-width: 480px) {
  .release-inner { padding: 78px 14px 24px; }
  .release-scene { height: 52vh; min-height: 320px; }
  .counter-value { font-size: 22px; }
  .release-breakdown { grid-template-columns: 1fr; }
  .thrown-item { font-size: 36px; }
}

/* ===== Island room (Memento mori) ===== */
.island-room {
  position: relative;
  min-height: 100vh;
  padding: 90px 24px 80px;
  text-align: center;
  color: #fefcf9;
  isolation: isolate;     /* clip via room-overlay scroll, not here */
}
.island-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.island-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28,29,58,0.55) 0%,
    rgba(42,38,71,0.7) 60%,
    rgba(28,29,58,0.85) 100%);
  z-index: 1;
}
.island-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.island-content .room-eyebrow {
  color: #d4a574;
  letter-spacing: 0.18em;
}
.island-title {
  color: #fefcf9;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.island-content .room-subtitle {
  color: rgba(254,252,249,0.85);
}

.memento-stage {
  margin-top: 32px;
  position: relative;
}
.memento-card,
.memento-takeaway {
  background: rgba(254,252,249,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 36px 28px 28px;
  color: var(--ink);
  box-shadow: 0 18px 54px rgba(0,0,0,0.35);
  max-width: 540px;
  margin: 0 auto;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.memento-card.hide,
.memento-takeaway.hide {
  display: none;
}
.memento-flame {
  font-size: 36px;
  margin-bottom: 10px;
  animation: flameFlicker 2.4s ease-in-out infinite;
}
@keyframes flameFlicker {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50%      { transform: translateY(-2px) scale(1.05); opacity: 0.92; }
}
.memento-prompt {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--clay);
  margin-bottom: 18px;
  font-weight: 500;
}
.memento-textarea {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid var(--beige);
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: none;
  line-height: 1.6;
  outline: none;
  transition: border-color var(--transition);
}
.memento-textarea:focus { border-color: var(--clay); }
.memento-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.memento-takeaway {
  display: none;
}
.memento-takeaway.show {
  display: block;
  animation: stepIn 0.6s var(--ease);
}
.takeaway-icon {
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 14px;
  letter-spacing: 0.4em;
}
.takeaway-quote {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 20px;
}

.island-nav {
  position: relative;
  z-index: 2;
  margin-top: 36px;
}

/* Always-visible back button at top of island room (since night bg makes ✕ hard to spot) */
.island-back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 9px 18px 9px 14px;
  background: rgba(254,252,249,0.16);
  border: 1.5px solid rgba(254,252,249,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fefcf9;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.island-back-top:hover {
  background: rgba(254,252,249,0.28);
  border-color: rgba(254,252,249,0.6);
  transform: translateY(-1px);
}
.island-back-arrow { font-size: 16px; line-height: 1; }

/* ===== Movie mood picker ===== */
.movie-mood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.movie-mood-card {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.movie-mood-card:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(193,141,107,0.18);
}
.movie-mood-icon { font-size: 32px; margin-bottom: 6px; }
.movie-mood-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.movie-mood-sub {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.movie-results {
  margin-top: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.movie-results h4 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px;
  color: var(--clay);
  margin-bottom: 14px;
  text-align: center;
}
.movie-item {
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.movie-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.movie-item-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.movie-item-why {
  font-size: 12.5px;
  color: var(--ink);
  font-style: italic;
  line-height: 1.6;
}

/* ===== Article feed — immersive full-bleed cards ===== */
.article-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.article-hero {
  position: relative;
  min-height: 380px;
  border-radius: 24px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 16px 40px rgba(40,28,18,0.22);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.article-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.12));
  pointer-events: none;
}
.article-hero:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(40,28,18,0.3); }
.article-hero-tag {
  position: relative; z-index: 1;
  align-self: flex-start;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.article-hero-foot { position: relative; z-index: 1; margin-top: auto; }
.article-hero-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 27px; font-weight: 500; line-height: 1.22;
  margin: 0 0 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.article-hero-dek {
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin: 0 0 16px;
  max-width: 92%;
}
.article-hero-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #2c2119;
  background: rgba(255,255,255,0.94);
  border: none; border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.article-hero-more:hover { transform: translateX(3px); background: #fff; }

/* ===== Full-screen article reader ===== */
.article-reader {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.article-reader.open { opacity: 1; }
.article-reader-back {
  position: fixed; top: 18px; left: 18px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease);
}
.article-reader-back:hover { background: rgba(0,0,0,0.5); }
.article-reader-hero {
  min-height: 320px;
  padding: 30px 26px 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
  position: relative;
}
.article-reader-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 60%);
}
.article-reader-tag {
  position: relative; z-index: 1;
  align-self: flex-start;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  padding: 6px 13px; margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
}
.article-reader-title {
  position: relative; z-index: 1;
  font-family: 'IBM Plex Serif', serif;
  font-size: 32px; font-weight: 500; line-height: 1.22;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.article-reader-body {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 26px 80px;
  font-size: 16px; line-height: 1.9;
  color: var(--ink);
}
.article-reader-body p { margin: 0 0 14px; }
.article-reader-body strong { color: var(--clay); }
/* ผู้เขียนบทความ (playtest: ขอชื่อผู้เขียน + เกี่ยวกับผู้เขียน) */
.article-byline {
  font-size: 13.5px; color: var(--ink-soft);
  border-bottom: 1px dashed rgba(0,0,0,0.12);
  padding-bottom: 12px; margin-bottom: 18px !important;
}
.article-about-author {
  margin-top: 30px; padding: 16px 18px;
  background: var(--cream, #f6efe3); border-radius: 14px;
  border-left: 3px solid var(--clay, #b07a65);
}
.article-about-author .aa-title {
  font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--clay, #b07a65); font-weight: 700; margin-bottom: 6px;
}
.article-about-author .aa-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.article-about-author p { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin: 0; }
.article-reader-actions {
  max-width: 600px;
  margin: 4px auto 44px;
  padding: 0 26px;
  display: flex;
  justify-content: center;
}
.article-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--clay, #B07A65);
  border: none; border-radius: 999px;
  padding: 13px 26px; cursor: pointer;
  box-shadow: 0 10px 22px rgba(176,122,101,0.34);
  transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.article-save-btn:hover { transform: translateY(-2px); }
.article-save-btn.saved { background: #5B8C7B; box-shadow: 0 10px 22px rgba(91,140,123,0.32); }
.article-save-btn svg { width: 17px; height: 17px; }
@media (max-width: 480px) {
  .article-hero { min-height: 340px; }
  .article-hero-title { font-size: 23px; }
  .article-reader-title { font-size: 26px; }
  .article-reader-body { font-size: 15px; }
}

/* Community room disclaimer — clarifies this is NOT therapy */
.community-disclaimer {
  background: rgba(255,253,247,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(193,141,107,0.25);
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 600px;
  margin: 14px auto 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.community-disclaimer-icon { font-size: 20px; line-height: 1.4; flex-shrink: 0; }
.community-disclaimer p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.community-disclaimer strong { color: var(--clay); font-weight: 600; }

/* ===== Discord widget mockup ===== */
.discord-mockup {
  background: #fff;
  border: 1.5px solid var(--beige);
  border-radius: 18px;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 8px 28px var(--shadow);
  position: relative;
}
.discord-header {
  background: linear-gradient(135deg, #5865f2 0%, #7289da 100%);
  color: #fff;
  padding: 18px 20px 14px;
}
.discord-server {
  display: flex; align-items: center; gap: 12px;
}
.discord-server-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.discord-server-name {
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
}
.discord-server-meta {
  font-size: 11px; opacity: 0.9; margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.discord-dot {
  width: 7px; height: 7px;
  background: #43b581;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(67,181,129,0.6);
}
.discord-channels-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-top: 14px;
  margin-bottom: 4px;
}
.discord-channels {
  background: linear-gradient(135deg, #4752c4 0%, #5865f2 100%);
  color: #fff;
  padding: 6px 20px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.discord-channel {
  background: rgba(255,255,255,0.15);
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.discord-channel:hover { background: rgba(255,255,255,0.28); }

.discord-messages {
  background: #fafafa;
  padding: 16px 18px;
}
.discord-msg {
  display: flex; gap: 10px;
  padding: 8px 0;
  align-items: flex-start;
}
.discord-msg + .discord-msg { border-top: 1px solid rgba(0,0,0,0.04); }
.discord-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.discord-msg-body { flex: 1; min-width: 0; }
.discord-msg-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.discord-name {
  font-weight: 600; font-size: 13px; color: var(--ink);
}
.discord-time {
  font-size: 10px; color: var(--ink-soft);
}
.discord-msg-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.discord-msg-typing { opacity: 0.75; }
.discord-typing-name {
  font-size: 12px;
  color: var(--ink-soft);
  margin-right: 6px;
  font-weight: 500;
}
.discord-typing {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.dt-dot {
  width: 4px; height: 4px;
  background: var(--ink-soft);
  border-radius: 50%;
  animation: dtBlink 1.4s infinite;
}
.dt-dot:nth-child(2) { animation-delay: 0.2s; }
.dt-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dtBlink {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.discord-coming-soon {
  background: var(--cream);
  border-top: 1px solid var(--beige);
  padding: 14px 20px;
  display: flex; gap: 12px; align-items: center;
}
.discord-cs-icon { font-size: 26px; flex-shrink: 0; }
.discord-cs-title {
  font-weight: 600; font-size: 13px; color: var(--clay);
  margin-bottom: 2px;
}
.discord-cs-sub {
  font-size: 11px; color: var(--ink-soft);
}
.discord-cta {
  display: block;
  text-align: center;
  background: var(--clay);
  color: var(--bg);
  padding: 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--transition);
}
.discord-cta:hover { background: var(--ink); color: var(--bg); text-decoration: none; }

/* ===== Coloring (paint therapy) ===== */
.color-stage {
  text-align: center;
}
.color-levels {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.color-level-btn {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.color-level-btn:hover {
  background: var(--cream);
  color: var(--ink);
}
.color-level-btn.active {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay);
}
.color-canvas {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: #fefcf9;
  box-shadow: 0 10px 28px var(--shadow);
}
.color-canvas-wrap {
  position: relative;
  max-width: 380px;
  margin: 0 auto 18px;
}
.color-canvas-wrap .color-canvas { margin: 0; }

/* =========================================================================
   COLORING BOOK — subjects become bookmark tabs, canvas becomes a book page
   with prev/next page-turn buttons.
   ========================================================================= */
.colorbook-tabs {
  /* เลิกทำเป็นแท็บคั่นหนังสือ (ดูลอย) → เป็นปุ่มชิปกลมๆ เลือกภาพได้ ลอยเหนือเล่มปกติ */
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px;
  overflow-x: visible; scrollbar-width: none;
  max-width: 420px; padding: 0 16px; margin: 6px auto 14px;
  position: relative; z-index: 1;
  scroll-behavior: smooth;
}
.colorbook-tabs::-webkit-scrollbar { display: none; }
/* playtest: แท็บเหลือแค่อิโมจิ (ชื่อภาพอยู่ใน title ตอน hover) */
.colorbook-tabs .color-level-btn span { display: none; }
.colorbook-tabs .color-level-btn {
  flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--beige);
  border-radius: 50%;
  background: var(--bg); color: var(--ink);
  font-size: 21px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 8px var(--shadow);
  transform: translateY(0);
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.colorbook-tabs .color-level-btn:hover { transform: translateY(-2px); background: var(--cream); }
.colorbook-tabs .color-level-btn.active {
  background: var(--cream); color: var(--ink);
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(193,154,108,0.30), 0 4px 10px var(--shadow);
  transform: scale(1.08);
  position: relative; z-index: 2;
}

.colorbook {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 560px; margin: 0 auto 16px;
  perspective: 1700px;
}
.colorbook-flip {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--beige); background: var(--bg);
  color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform 0.15s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.colorbook-flip:hover { background: var(--clay); color: #fff; border-color: var(--clay); transform: scale(1.07); }
.colorbook-flip:active { transform: scale(0.94); }

/* the page (paper) */
.colorbook .color-canvas-wrap {
  max-width: none; margin: 0; flex: 1 1 auto;
  background: #fffaf2;
  border: 1px solid #e7d8c3;
  border-radius: 5px 15px 15px 5px;
  padding: 24px 22px 30px 32px;
  box-shadow: 0 16px 36px rgba(60,48,38,0.16), 0 -3px 9px rgba(120,90,50,0.10);
  position: relative; z-index: 2; overflow: visible;
  transform-style: preserve-3d; will-change: transform;
}
/* left binding / stitch line + inner-fold shadow */
.colorbook .color-canvas-wrap::before {
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 12px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(139,111,71,0.4) 0 7px, transparent 7px 15px);
}
.colorbook .color-canvas-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18px;
  background: linear-gradient(90deg, rgba(139,111,71,0.12), transparent);
  border-radius: 5px 0 0 5px; pointer-events: none;
}
.colorbook .color-canvas { max-width: 100%; }
.colorbook-pagenum {
  position: absolute; bottom: 9px; right: 18px;
  font-family: 'IBM Plex Serif', serif; font-size: 12px; color: var(--ink-soft);
  letter-spacing: 0.05em; display: flex; gap: 4px;
}
/* page-turn flip (driven from JS: rotateY around the spine, content swaps edge-on) */
.colorbook .color-canvas-wrap.turning { box-shadow: 0 26px 54px rgba(60,48,38,0.30); }
.colorbook .color-canvas-wrap.turning::after {
  opacity: 1;
  background: linear-gradient(90deg, rgba(139,111,71,0.28), rgba(139,111,71,0) 42%);
}
@media (max-width: 470px) {
  .colorbook-flip { width: 38px; height: 38px; font-size: 20px; }
  .colorbook { gap: 6px; }
}
.color-tools {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 0;
}
.color-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  font-size: 21px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px var(--shadow);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease), opacity 0.2s var(--ease);
}
.color-icon-btn:hover:not(:disabled) {
  color: var(--clay);
  border-color: var(--clay);
  transform: translateY(-1px);
}
.color-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.color-icon-btn:disabled { opacity: 0.3; cursor: default; }
.color-canvas .cz {
  cursor: pointer;
  transition: filter 0.2s var(--ease);
}
.color-canvas .cz:hover { filter: brightness(0.94); }
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 18px;
  max-width: 360px;
}
/* playtest: ตอนซูมภาพ จานสีลอยเป็นแถบ fixed ล่างจอ จะได้ไม่หลุดจอตอนเลือกสี */
.color-palette.color-palette-float {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1200; margin: 0; max-width: 94vw;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 250, 244, 0.95);
  border: 1px solid var(--beige);
  box-shadow: 0 12px 32px rgba(92, 74, 60, 0.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.color-palette.color-palette-float::-webkit-scrollbar { display: none; }
.color-palette.color-palette-float .color-swatch { flex: 0 0 auto; }
.color-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.85);
  cursor: pointer;
  outline: 1.5px solid rgba(0,0,0,0.12);
  outline-offset: -1.5px;
  transition: transform 0.2s var(--ease);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active {
  transform: scale(1.18);
  outline: 2.5px solid var(--ink);
  outline-offset: 2px;
}
.color-swatch.eraser {
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--ink-soft);
}
.color-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.color-actions .nav-btn:disabled {
  opacity: 0.38; cursor: default; pointer-events: none;
}
.color-custom-label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 4px 0 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.cc-reset {
  flex: 0 0 auto;
  border: 1px solid var(--beige, #e3d5ca);
  background: var(--bg, #fbf4e8);
  color: var(--ink-soft);
  font: 600 11.5px/1 'IBM Plex Sans Thai', sans-serif;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}
.cc-reset:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
.cc-reset:active { transform: scale(0.95); }
.color-custom {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 360px;
  margin: 0 auto 16px;
}
/* ปุ่ม "ล้างทั้งหมด" 🧹 ตอนติดอาวุธรอยืนยัน (แตะแรก) — เด่นขึ้นให้รู้ว่ารอแตะซ้ำ */
.color-icon-btn.color-clear.confirming {
  background: #d98b6a !important; color: #fff !important;
  border-color: #c96f4c !important;
  animation: cclr-pulse 0.9s ease-in-out infinite;
}
@keyframes cclr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ถาดสีทั้งสองจาน — กริด 7 คอลัมน์ (7 สี/จาน × 2 จาน = 14 สี แบบ 7×2) */
#colorPalette, #colorCustom {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-content: center;
  place-items: center;
  gap: 13px 4px;
  max-width: 330px;
  margin: 0 auto 12px;
}
.color-swatch.custom {
  position: relative;
  overflow: visible;
  cursor: pointer;
}
.color-swatch.custom .cc-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  border: 0; padding: 0; margin: 0;
}
.color-swatch.custom .cc-edit {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgba(50, 40, 32, 0.82);
  color: #fff;
  font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.color-swatch.custom .cc-edit:hover { background: var(--clay); transform: scale(1.12); }

/* ===== Cat tab ===== */
.cat-stage {
  background: linear-gradient(180deg, var(--cream), var(--bg));
  border-radius: 24px;
  padding: 28px 24px 22px;
  margin: 0 auto;
  max-width: 460px;
  text-align: center;
  position: relative;
  overflow: visible;        /* let particles float beyond the stage */
}
.cat-img {
  display: block;
  width: 280px;
  height: 280px;
  max-width: 80%;
  margin: 0 auto 14px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 28px var(--shadow);
  background: var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  animation: catBreathe 4.4s ease-in-out infinite;
}
.cat-img.swapping {
  opacity: 0;
  transform: scale(0.92);
  animation: none;
}
.cat-img.wiggle {
  animation: catWiggle 0.55s ease-in-out;
}
@keyframes catBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
@keyframes catWiggle {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.06) rotate(-2deg); }
  40%  { transform: scale(1.05) rotate(2deg); }
  60%  { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Hand emoji that appears at click point — looks like petting motion */
.cat-hand {
  position: absolute;
  font-size: 38px;
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -50%);
  animation: catHandPet 1.2s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  will-change: transform, opacity;
}
@keyframes catHandPet {
  0%   { transform: translate(-50%, -120%) scale(0.5) rotate(-12deg); opacity: 0; }
  20%  { transform: translate(-50%, -90%)  scale(1.1) rotate(-12deg); opacity: 1; }
  40%  { transform: translate(-50%, -60%)  scale(1.0) rotate(0deg);   opacity: 1; }
  60%  { transform: translate(-50%, -90%)  scale(1.05) rotate(-8deg); opacity: 1; }
  80%  { transform: translate(-50%, -65%)  scale(1.0) rotate(4deg);   opacity: 0.85; }
  100% { transform: translate(-50%, -110%) scale(0.7) rotate(0deg);   opacity: 0; }
}

/* Floating particles (hearts, fish, notes, Zz) */
.cat-particle {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  z-index: 5;
  animation: catParticleFloat 1.7s ease-out forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
@keyframes catParticleFloat {
  0%   { transform: translate(0, 0) scale(0.4) rotate(0); opacity: 0; }
  15%  { transform: translate(0, -10px) scale(1.1) rotate(-8deg); opacity: 1; }
  60%  { transform: translate(var(--drift, 0), -70px) scale(1) rotate(8deg); opacity: 0.9; }
  100% { transform: translate(var(--drift, 0), -130px) scale(0.7) rotate(-4deg); opacity: 0; }
}
.cat-message {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  color: var(--ink);
  font-style: italic;
  line-height: 1.7;
  margin-top: 6px;
  min-height: 3em;
  transition: opacity 0.4s var(--ease);
}
.cat-message.swapping { opacity: 0; }
.cat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cat-action {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.cat-action:hover {
  border-color: var(--clay);
  color: var(--ink);
  transform: translateY(-1px);
}
.cat-action.active {
  background: var(--cream);
  border-color: var(--clay);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(193,141,107,0.18);
}
.alone-h3 {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 400;
}
.alone-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 24px;
}

/* Mood pane */
.mood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}
.mood-btn {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 18px;
  padding: 16px 14px;
  min-width: 90px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mood-btn:hover {
  transform: translateY(-2px);
  border-color: var(--clay);
}
.mood-btn.selected {
  background: var(--cream);
  border-color: var(--clay);
  box-shadow: 0 6px 14px var(--shadow);
}
.mood-btn .m-emoji { font-size: 30px; }
.mood-response {
  background: var(--cream);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 12px auto 0;
  max-width: 460px;
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  display: none;
  line-height: 1.6;
}
.mood-response.show { display: block; animation: stepIn 0.4s var(--ease); }

/* Letter pane */
.letter-mode-row {
  display: inline-flex;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 14px;
}
.letter-mode-btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
  transition: all var(--transition);
}
.letter-mode-btn:hover { color: var(--ink); }
.letter-mode-btn.active {
  background: var(--bg);
  color: var(--ink);
}
/* Philosophy line — frames healing as a daily habit, not a fix-when-broken activity */
.streak-philosophy {
  text-align: center;
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 10px 18px;
  background: var(--cream);
  border-radius: 14px;
  border: 1px solid var(--beige);
}

/* Milestone medal row */
.medal-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 20px;
  max-width: 520px;
}
.medal {
  flex: 1 1 80px;
  min-width: 70px;
  background: var(--bg);
  border: 1.5px dashed var(--beige);
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
  position: relative;
  transition: all 0.4s var(--ease);
  opacity: 0.5;
}
.medal-icon {
  font-size: 26px;
  line-height: 1;
  filter: grayscale(0.5);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.medal-label {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-weight: 500;
}
.medal-sub {
  font-size: 9px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}
.medal.unlocked {
  background: linear-gradient(135deg, #fef3e0 0%, #f7d9b0 100%);
  border-style: solid;
  border-color: var(--clay);
  opacity: 1;
  box-shadow: 0 4px 14px rgba(193,141,107,0.25);
}
.medal.unlocked .medal-icon {
  filter: grayscale(0);
  transform: scale(1.05);
  animation: medalShine 2.4s ease-in-out infinite;
}
.medal.unlocked .medal-label { color: var(--clay); font-weight: 600; }
.medal.just-unlocked {
  animation: medalUnlock 0.9s ease-out;
}
@keyframes medalShine {
  0%, 100% { transform: scale(1.05); }
  50%      { transform: scale(1.15) rotate(3deg); }
}
@keyframes medalUnlock {
  0%   { transform: scale(0.6) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Daily writing streak badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fef3e0 0%, #f7d9b0 100%);
  border: 1.5px solid rgba(193,141,107,0.45);
  color: var(--clay);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 auto 18px;
  animation: streakPulse 3s ease-in-out infinite;
}
.streak-badge[hidden] { display: none; }
.streak-flame { font-size: 18px; line-height: 1; }
@keyframes streakPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(193,141,107,0.18); }
  50%      { box-shadow: 0 4px 18px rgba(193,141,107,0.42); }
}
.streak-history {
  text-align: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--beige);
}
.streak-history[hidden] { display: none; }
.streak-history-line {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}
.streak-history-line strong {
  color: var(--clay);
  font-style: normal;
  font-weight: 600;
}

#letterText {
  width: 100%;
  max-width: 520px;
  min-height: 160px;
  border: 1px solid var(--beige);
  border-radius: 16px;
  padding: 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  resize: none;
  display: block;
  margin: 0 auto;
  transition: border-color var(--transition);
}
#letterText:focus { outline: none; border-color: var(--clay); }
.letter-actions { margin: 16px 0; }
.letter-success {
  display: none;
  font-size: 14px;
  color: var(--clay);
  font-style: italic;
}
.letter-success.show { display: block; animation: stepIn 0.4s var(--ease); }

/* Bedroom pane */
.bedroom-stage {
  position: relative;
  height: 280px;
  border-radius: 24px;
  background: linear-gradient(180deg, #2C3E50 0%, #34495E 50%, #4A5C70 100%);
  overflow: hidden;
  margin: 18px auto;
  max-width: 600px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.bedroom-message {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  z-index: 2;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
/* Rain animation */
.rain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  z-index: 1;
}
.rain-overlay.show { opacity: 1; }
.rain-drop {
  position: absolute;
  top: -20%;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, transparent, rgba(220, 230, 240, 0.6));
  animation: rain-fall 1.2s linear infinite;
}
.rain-drop:nth-child(1)  { left: 5%;  animation-delay: 0s;    animation-duration: 1.0s; }
.rain-drop:nth-child(2)  { left: 12%; animation-delay: 0.3s;  animation-duration: 1.4s; }
.rain-drop:nth-child(3)  { left: 19%; animation-delay: 0.7s;  animation-duration: 1.1s; }
.rain-drop:nth-child(4)  { left: 26%; animation-delay: 0.1s;  animation-duration: 1.3s; }
.rain-drop:nth-child(5)  { left: 33%; animation-delay: 0.5s;  animation-duration: 1.0s; }
.rain-drop:nth-child(6)  { left: 40%; animation-delay: 0.9s;  animation-duration: 1.2s; }
.rain-drop:nth-child(7)  { left: 47%; animation-delay: 0.2s;  animation-duration: 1.4s; }
.rain-drop:nth-child(8)  { left: 54%; animation-delay: 0.6s;  animation-duration: 1.1s; }
.rain-drop:nth-child(9)  { left: 61%; animation-delay: 1.0s;  animation-duration: 1.3s; }
.rain-drop:nth-child(10) { left: 68%; animation-delay: 0.4s;  animation-duration: 1.0s; }
.rain-drop:nth-child(11) { left: 75%; animation-delay: 0.8s;  animation-duration: 1.2s; }
.rain-drop:nth-child(12) { left: 82%; animation-delay: 0.0s;  animation-duration: 1.4s; }
.rain-drop:nth-child(13) { left: 89%; animation-delay: 0.5s;  animation-duration: 1.1s; }
.rain-drop:nth-child(14) { left: 96%; animation-delay: 0.7s;  animation-duration: 1.3s; }
.rain-drop:nth-child(15) { left: 50%; animation-delay: 0.3s;  animation-duration: 1.0s; }
@keyframes rain-fall {
  0%   { transform: translateY(0) translateX(0); opacity: 0.7; }
  100% { transform: translateY(330px) translateX(-12px); opacity: 0; }
}

/* ===================================================================
   AMBIENT SCENES — a matching moving backdrop for each ambient sound.
   One .scene fades in based on .bedroom-stage[data-scene]; the stage
   gradient recolours to suit. Pure CSS, calm, low motion.
   =================================================================== */
.scene {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity 0.7s var(--ease);
  overflow: hidden;
}
.bedroom-stage[data-scene="ocean"]     .scene-ocean,
.bedroom-stage[data-scene="waterfall"] .scene-waterfall,
.bedroom-stage[data-scene="forest"]    .scene-forest,
.bedroom-stage[data-scene="underwater"].scene-underwater,
.bedroom-stage[data-scene="underwater"] .scene-underwater,
.bedroom-stage[data-scene="garden"]    .scene-garden,
.bedroom-stage[data-scene="birds"]     .scene-birds,
.bedroom-stage[data-scene="deepsleep"] .scene-deepsleep { opacity: 1; }

/* stage recolour per scene */
.bedroom-stage[data-scene="rain"]      { background: linear-gradient(180deg,#25303b 0%,#2f3d49 55%,#3c4b59 100%); }
.bedroom-stage[data-scene="ocean"]     { background: linear-gradient(180deg,#a9d6e5 0%,#d6eef2 44%,#3a8fa6 46%,#175c72 100%); }
.bedroom-stage[data-scene="waterfall"] { background: linear-gradient(180deg,#3c5a4d 0%,#28463c 60%,#1b3229 100%); }
.bedroom-stage[data-scene="forest"]    { background: linear-gradient(180deg,#cfe8bf 0%,#8fbf76 42%,#3f6b3a 100%); }
.bedroom-stage[data-scene="underwater"]{ background: linear-gradient(180deg,#2a8bab 0%,#12617e 45%,#07344a 100%); }
.bedroom-stage[data-scene="garden"]    { background: linear-gradient(180deg,#f7ddc8 0%,#e7e0bd 45%,#cfe3b0 100%); }
.bedroom-stage[data-scene="birds"]     { background: linear-gradient(180deg,#ffe3b0 0%,#ffd0a3 32%,#bcd4e6 100%); }
.bedroom-stage[data-scene="deepsleep"] { background: linear-gradient(180deg,#232152 0%,#161338 55%,#0c0a24 100%); }

/* ---- Ocean ---- */
.oc-sun { position: absolute; top: 12%; left: 68%; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle,#fff6dc,#ffe0a8 58%,rgba(255,224,168,0) 72%); }
.oc-wave { position: absolute; left: -30%; right: -30%; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.16); }
.oc-wave.w1 { top: 56%; animation: oc-wave 7s ease-in-out infinite; }
.oc-wave.w2 { top: 68%; height: 40px; background: rgba(255,255,255,0.12); animation: oc-wave 9s ease-in-out infinite reverse; }
.oc-wave.w3 { top: 82%; height: 54px; background: rgba(10,60,80,0.22); animation: oc-wave 11s ease-in-out infinite; }
.oc-glint { position: absolute; top: 47%; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 5px, transparent 5px 24px);
  opacity: 0.5; animation: oc-glint 7s linear infinite; }
@keyframes oc-wave { 0%,100% { transform: translateX(-4%); } 50% { transform: translateX(4%); } }
@keyframes oc-glint { from { background-position: 0 0; } to { background-position: 120px 0; } }

/* ---- Waterfall ---- */
.wf-rock { position: absolute; top: 0; bottom: 0; width: 27%; }
.wf-rock.left  { left: 0;  background: linear-gradient(90deg,#1c322a,#2f4a3d); border-right: 2px solid rgba(0,0,0,0.2); }
.wf-rock.right { right: 0; background: linear-gradient(270deg,#1c322a,#2f4a3d); border-left: 2px solid rgba(0,0,0,0.2); }
.wf-stream { position: absolute; top: 0; bottom: 16%; left: 27%; right: 27%;
  background: linear-gradient(180deg,rgba(230,245,255,0.35),rgba(205,232,246,0.8)); filter: blur(1px); }
.wf-line { position: absolute; top: -20%; width: 2px; height: 42%;
  background: linear-gradient(180deg,transparent,rgba(255,255,255,0.95)); animation: wf-fall 0.55s linear infinite; }
.wf-line:nth-child(3){ left: 31%; animation-delay: 0.0s; } .wf-line:nth-child(4){ left: 37%; animation-delay: 0.22s; }
.wf-line:nth-child(5){ left: 43%; animation-delay: 0.08s; } .wf-line:nth-child(6){ left: 49%; animation-delay: 0.3s; }
.wf-line:nth-child(7){ left: 55%; animation-delay: 0.14s; } .wf-line:nth-child(8){ left: 61%; animation-delay: 0.36s; }
.wf-line:nth-child(9){ left: 67%; animation-delay: 0.05s; } .wf-line:nth-child(10){ left: 34%; animation-delay: 0.4s; }
.wf-line:nth-child(11){ left: 46%; animation-delay: 0.18s; } .wf-line:nth-child(12){ left: 58%; animation-delay: 0.28s; }
.wf-line:nth-child(13){ left: 64%; animation-delay: 0.12s; } .wf-line:nth-child(14){ left: 40%; animation-delay: 0.34s; }
.wf-mist { position: absolute; left: 10%; right: 10%; bottom: 0; height: 34%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.75), transparent 70%);
  filter: blur(6px); animation: wf-mist 4s ease-in-out infinite; }
@keyframes wf-fall { from { transform: translateY(-40px); } to { transform: translateY(460px); } }
@keyframes wf-mist { 0%,100% { opacity: 0.5; transform: scaleY(1); } 50% { opacity: 0.85; transform: scaleY(1.12); } }

/* ---- Forest ---- */
.fo-ray { position: absolute; inset: 0; animation: fo-ray 9s ease-in-out infinite;
  background: linear-gradient(115deg, transparent 30%, rgba(255,244,200,0.28) 42%, transparent 52%, transparent 66%, rgba(255,244,200,0.16) 74%, transparent 84%); }
.fo-tree { position: absolute; bottom: 0; width: 92px; height: 150px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fo-tree.t1 { left: 2%;  height: 130px; background: #35603a; }
.fo-tree.t2 { left: 20%; height: 168px; background: #2c5231; }
.fo-tree.t3 { left: 42%; height: 138px; background: #386640; }
.fo-tree.t4 { left: 64%; height: 176px; background: #294c2e; }
.fo-tree.t5 { left: 82%; height: 128px; background: #3a6a42; }
.fo-fly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fce98a;
  box-shadow: 0 0 8px 2px rgba(252,233,138,0.85); animation: fo-fly 7s ease-in-out infinite; }
.fo-fly:nth-child(7){ left: 16%; top: 60%; animation-delay: 0s; }
.fo-fly:nth-child(8){ left: 34%; top: 72%; animation-delay: 1.4s; }
.fo-fly:nth-child(9){ left: 52%; top: 55%; animation-delay: 2.6s; }
.fo-fly:nth-child(10){ left: 68%; top: 76%; animation-delay: 0.8s; }
.fo-fly:nth-child(11){ left: 80%; top: 62%; animation-delay: 3.4s; }
.fo-fly:nth-child(12){ left: 44%; top: 82%; animation-delay: 4.2s; }
@keyframes fo-ray { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes fo-fly { 0% { transform: translate(0,0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(28px,-42px); opacity: 0; } }

/* ---- Underwater ---- */
.uw-caustic { position: absolute; inset: 0; opacity: 0.5; animation: oc-glint 8s linear infinite;
  background: repeating-linear-gradient(60deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 26px); }
.uw-bub { position: absolute; bottom: -8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.14) 60%, transparent);
  border: 1px solid rgba(255,255,255,0.3); animation: uw-rise linear infinite; }
.uw-bub:nth-child(2){ left: 12%; width: 10px; height: 10px; animation-duration: 6s; animation-delay: 0s; }
.uw-bub:nth-child(3){ left: 24%; width: 6px;  height: 6px;  animation-duration: 5s; animation-delay: 1.2s; }
.uw-bub:nth-child(4){ left: 36%; width: 14px; height: 14px; animation-duration: 7.5s; animation-delay: 0.6s; }
.uw-bub:nth-child(5){ left: 48%; width: 8px;  height: 8px;  animation-duration: 6.5s; animation-delay: 2s; }
.uw-bub:nth-child(6){ left: 60%; width: 11px; height: 11px; animation-duration: 5.5s; animation-delay: 0.3s; }
.uw-bub:nth-child(7){ left: 72%; width: 6px;  height: 6px;  animation-duration: 6.8s; animation-delay: 1.6s; }
.uw-bub:nth-child(8){ left: 84%; width: 12px; height: 12px; animation-duration: 7s; animation-delay: 0.9s; }
.uw-bub:nth-child(9){ left: 30%; width: 7px;  height: 7px;  animation-duration: 6.2s; animation-delay: 2.6s; }
.uw-bub:nth-child(10){ left: 66%; width: 9px; height: 9px;  animation-duration: 5.8s; animation-delay: 3.2s; }
@keyframes uw-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: translateY(-360px) translateX(14px); opacity: 0; } }

/* ---- Garden ---- */
.ga-petal { position: absolute; top: -8%; width: 12px; height: 12px;
  background: radial-gradient(circle at 50% 0,#f6a8c0,#e87ea6); border-radius: 50% 0 50% 50%;
  animation: ga-fall linear infinite; }
.ga-petal:nth-child(1){ left: 8%;  animation-duration: 9s;  animation-delay: 0s; }
.ga-petal:nth-child(2){ left: 22%; animation-duration: 11s; animation-delay: 1.5s; }
.ga-petal:nth-child(3){ left: 36%; animation-duration: 8s;  animation-delay: 3s; }
.ga-petal:nth-child(4){ left: 50%; animation-duration: 12s; animation-delay: 0.8s; }
.ga-petal:nth-child(5){ left: 63%; animation-duration: 9.5s;animation-delay: 2.2s; }
.ga-petal:nth-child(6){ left: 76%; animation-duration: 10.5s;animation-delay: 4s; }
.ga-petal:nth-child(7){ left: 88%; animation-duration: 8.5s;animation-delay: 1s; }
.ga-petal:nth-child(8){ left: 44%; animation-duration: 11.5s;animation-delay: 5s; }
@keyframes ga-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(340px) translateX(40px) rotate(220deg); opacity: 0; } }

/* ---- Birds (dawn sky) ---- */
.bi-sun { position: absolute; top: 14%; right: 16%; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle,#fff3d0,#ffcf9a 60%,rgba(255,207,154,0) 74%); }
.bi-cloud { position: absolute; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.72); filter: blur(2px); }
.bi-cloud.c1 { top: 30%; left: 14%; width: 90px; animation: bi-cloud 26s ease-in-out infinite; }
.bi-cloud.c2 { top: 52%; left: 50%; width: 120px; animation: bi-cloud 34s ease-in-out infinite reverse; }
.bi-bird { position: absolute; width: 14px; height: 7px; animation: bi-fly linear infinite; }
.bi-bird::before, .bi-bird::after { content: ''; position: absolute; top: 0; width: 8px; height: 7px; border-top: 2px solid rgba(70,70,90,0.7); border-radius: 60%; }
.bi-bird::before { left: 0; transform: rotate(18deg); transform-origin: right center; }
.bi-bird::after  { right: 0; transform: rotate(-18deg); transform-origin: left center; }
.bi-bird:nth-child(3){ top: 22%; animation-duration: 13s; animation-delay: 0s; }
.bi-bird:nth-child(4){ top: 30%; animation-duration: 16s; animation-delay: 2s; }
.bi-bird:nth-child(5){ top: 18%; animation-duration: 14s; animation-delay: 4s; }
.bi-bird:nth-child(6){ top: 38%; animation-duration: 18s; animation-delay: 1s; }
.bi-bird:nth-child(7){ top: 26%; animation-duration: 15s; animation-delay: 6s; }
@keyframes bi-fly { from { transform: translateX(-40px) translateY(0); } 50% { transform: translateX(280px) translateY(-10px); } to { transform: translateX(600px) translateY(0); } }
@keyframes bi-cloud { 0%,100% { transform: translateX(-24px); } 50% { transform: translateX(30px); } }

/* ---- Deep sleep (starry night) ---- */
.ds-moon { position: absolute; top: 14%; right: 18%; width: 54px; height: 54px; border-radius: 50%;
  background: #f4efd0; box-shadow: inset -14px -8px 0 -2px #1c1a44, 0 0 26px rgba(244,239,208,0.5); }
.ds-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff8e6;
  box-shadow: 0 0 6px rgba(255,248,230,0.9); animation: ds-tw 3.4s ease-in-out infinite; }
.ds-star:nth-child(2){ left: 10%; top: 20%; animation-delay: 0s; }
.ds-star:nth-child(3){ left: 26%; top: 12%; animation-delay: 0.6s; }
.ds-star:nth-child(4){ left: 40%; top: 26%; animation-delay: 1.2s; }
.ds-star:nth-child(5){ left: 54%; top: 16%; animation-delay: 0.3s; }
.ds-star:nth-child(6){ left: 20%; top: 40%; animation-delay: 1.8s; }
.ds-star:nth-child(7){ left: 68%; top: 34%; animation-delay: 0.9s; }
.ds-star:nth-child(8){ left: 82%; top: 22%; animation-delay: 2.4s; }
.ds-star:nth-child(9){ left: 34%; top: 52%; animation-delay: 1.5s; }
.ds-star:nth-child(10){ left: 60%; top: 48%; animation-delay: 2.1s; }
.ds-star:nth-child(11){ left: 14%; top: 60%; animation-delay: 0.4s; }
.ds-star:nth-child(12){ left: 76%; top: 56%; animation-delay: 1.1s; }
@keyframes ds-tw { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* ===== Extend / collapse the scene to full screen ===== */
.stage-expand {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.28);
  cursor: pointer; backdrop-filter: blur(4px);
  transition: transform 0.2s, background 0.3s;
}
.stage-expand:hover { transform: scale(1.08); background: rgba(0,0,0,0.44); }
.stage-expand .se-close { display: none; }
.bedroom-stage.stage-full .se-open { display: none; }
.bedroom-stage.stage-full .se-close { display: inline; }
.bedroom-stage.stage-full,
.bedroom-stage.stage-collapsing {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
  max-width: none !important; margin: 0 !important;
  border-radius: 0 !important; z-index: 2600;
  box-shadow: none !important;
  transform-origin: 26px 26px;   /* genie grows from the ⤢ button corner */
}
.bedroom-stage.stage-full    { animation: stageGenieIn 0.5s cubic-bezier(0.32,0.72,0.24,1) both; }
.bedroom-stage.stage-collapsing { animation: stageGenieOut 0.42s cubic-bezier(0.5,0,0.75,0.4) both; }
@keyframes stageGenieIn {
  0%   { opacity: 0.15; transform: scale(0.1) translate(-6%, -6%); border-radius: 46px; }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translate(0,0); border-radius: 0; }
}
@keyframes stageGenieOut {
  0%   { opacity: 1; transform: scale(1) translate(0,0); border-radius: 0; }
  100% { opacity: 0.1; transform: scale(0.1) translate(-6%, -6%); border-radius: 46px; }
}
.bedroom-stage.stage-full .stage-expand { top: 18px; left: 18px; width: 44px; height: 44px; }
.bedroom-stage.stage-full .light-switch { top: 84px; right: 18px; width: 44px; height: 44px; }
.bedroom-stage.stage-full .bedroom-message { bottom: 96px; font-size: 17px; }
body:has(.bedroom-stage.stage-full) { overflow: hidden; }

/* ===== Glass ambient dock — floats over the full-screen scene, fades when idle ===== */
.stage-dock {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: none; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: 90%; padding: 10px 12px; border-radius: 20px;
  background: rgba(20,18,30,0.30);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.bedroom-stage.stage-full .stage-dock { display: flex; }
.stage-dock.idle { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }
@keyframes dockRise { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.stage-dock-pill {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; border-radius: 999px; padding: 7px 13px;
  font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, transform 0.12s, color 0.2s;
}
.stage-dock-pill:hover { background: rgba(255,255,255,0.24); transform: translateY(-1px); }
.stage-dock-pill.active { background: #fff; color: #2a2436; border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .bedroom-stage.stage-full, .bedroom-stage.stage-collapsing, .stage-dock { animation: none !important; }
}

.bedroom-controls {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}
.ctrl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ctrl-label {
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
/* Ambient sound picker — rain/ocean/garden/birds */
.ambient-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ambient-pill {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.ambient-pill:hover { border-color: var(--clay); color: var(--ink); }
.ambient-pill.active {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay);
}
.ambient-pill.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.rain-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 4px;
}
.rain-toggle-track {
  width: 40px; height: 22px;
  background: var(--beige);
  border-radius: 999px;
  position: relative;
  transition: background var(--transition);
}
.rain-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--bg);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 2px 4px var(--shadow);
}
.rain-toggle[aria-pressed="true"] .rain-toggle-track { background: var(--clay); }
.rain-toggle[aria-pressed="true"] .rain-toggle-thumb { transform: translateX(18px); }
.rain-toggle-state {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.rain-note {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-style: italic;
}
.rain-note code {
  background: var(--cream);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
}
.bedroom-tracks, .lofi-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
.bedroom-track {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--ink-soft);
  transition: all var(--transition);
}
.bedroom-track:hover { border-color: var(--clay); color: var(--ink); }
.bedroom-track.active {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay);
}
.bedroom-track-pause {
  border-style: dashed;
  color: var(--ink-soft);
}
.bedroom-track-pause:hover { border-color: var(--ink-soft); }
/* ▶/⏸ shown ON the active in-room track (playtest: drop the separate pause button) */
.bedroom-track.active::after {
  content: '⏸';
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
}
.bedroom-track.active.paused::after { content: '▶'; }

/* ==========================================
   ชุมชน — Community room
   ========================================== */
.community-room {
  position: relative;
  min-height: 100vh;
  padding: 100px 24px 60px;
  text-align: center;
  background: var(--bg);
  overflow: hidden;
}
.community-bg {
  display: none;
  position: absolute;
  inset: 0;
  background-image: url("../images/community.jpg");
  background-size: contain;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
}
.community-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.lofi-vibes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 24px;
}
.vibe-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--beige);
  font-size: 13px;
  color: var(--ink-soft);
  transition: all var(--transition);
}
.vibe-btn:hover { border-color: var(--clay); color: var(--ink); }
.vibe-btn.active {
  background: var(--cream);
  border-color: var(--clay);
  color: var(--ink);
}
.lofi-timer-box {
  background: var(--cream);
  border-radius: 18px;
  padding: 28px 22px;
  margin: 24px auto 0;
  max-width: 460px;
  text-align: center;
}
.lofi-phase {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  transition: color 0.4s ease;
}
.lofi-phase.work { color: var(--clay); }
.lofi-phase.break { color: #6b8e6b; }
.lofi-timer-box .timer-display {
  font-family: 'IBM Plex Serif', serif;
  font-size: 56px;
  color: var(--clay);
  margin-bottom: 6px;
  font-feature-settings: 'tnum';
  letter-spacing: 0.02em;
}
.lofi-cycle {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  min-height: 16px;
  font-style: italic;
}
.lofi-actions {
  display: flex; gap: 10px; justify-content: center;
}

/* Timer mode picker */
.timer-modes {
  margin: 22px auto 0;
  max-width: 520px;
}
.timer-modes-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 10px;
}
.timer-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.timer-mode {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--transition);
}
.timer-mode:hover {
  border-color: var(--clay);
  transform: translateY(-1px);
}
.timer-mode.active {
  background: var(--cream);
  border-color: var(--clay);
  box-shadow: 0 2px 10px rgba(193,141,107,0.12);
}
.timer-mode .tm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.timer-mode .tm-desc {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.45;
}
@media (max-width: 480px) {
  .timer-mode-grid { grid-template-columns: 1fr; }
}
.placeholder-card {
  background: var(--cream);
  border-radius: 20px;
  padding: 36px 24px;
  max-width: 420px;
  margin: 24px auto;
  text-align: center;
}
.placeholder-icon { font-size: 48px; margin-bottom: 14px; }
.placeholder-card p {
  color: var(--ink-soft);
  font-size: 14px;
  font-style: italic;
}

/* === Quiz (ใจคุณเป็นแบบไหน) === */
.quiz-stage {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 24px;
  padding: 36px 24px;
  max-width: 540px;
  margin: 18px auto 0;
  position: relative;
  min-height: 360px;
}
.quiz-screen { display: none; }
.quiz-screen.active { display: block; animation: stepIn 0.5s var(--ease); }
/* Quiz menu (subset list) */
.quiz-menu.active {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 460px; margin: 8px auto 0;
}
.quiz-menu-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 152px; padding: 20px 18px;
  border: none; border-radius: 20px; cursor: pointer;
  color: #fff; text-align: left;
  background: var(--qm, linear-gradient(165deg,#f0b07a,#c0664a));
  box-shadow: 0 10px 26px rgba(60,48,38,0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  justify-content: flex-end;
}
.quiz-menu-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(60,48,38,0.26); }
/* playtest: ตัวอักษรจมกับพื้น — เพิ่มเงามืดโซนล่างการ์ด + เงาตัวอักษรเข้มขึ้น */
.quiz-menu-card { position: relative; overflow: hidden; }
.quiz-menu-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(40,25,15,0) 0%, rgba(40,25,15,0.40) 100%);
  pointer-events: none; border-radius: inherit;
}
.quiz-menu-art, .quiz-menu-name, .quiz-menu-desc { position: relative; z-index: 1; }
.quiz-menu-art { font-size: 40px; margin-bottom: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2)); }
.quiz-menu-name { font-family: 'IBM Plex Serif', serif; font-size: 17px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.quiz-menu-desc { font-size: 12px; opacity: 1; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.quiz-back {
  align-self: flex-start; background: none; border: none;
  color: var(--ink-soft); font-family: inherit; font-size: 13px;
  cursor: pointer; margin-bottom: 12px; padding: 4px 0;
}
.quiz-back:hover { color: var(--clay); }
.flowerq-color {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 4px;
}
.flowerq-color .fc-swatch { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.16); flex-shrink: 0; }
.flowerq-color .fc-name { font-size: 13px; color: var(--ink-soft); text-align: left; }
.flowerq-color .fc-name b { display: block; font-family: 'IBM Plex Serif', serif; font-size: 16px; color: var(--ink); }
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.quiz-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--clay);
  width: 0%;
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}
.quiz-progress-text {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
  font-weight: 500;
}
.quiz-q-text {
  font-family: 'IBM Plex Serif', serif;
  font-size: 19px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 22px;
  line-height: 1.4;
}
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-choice {
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}
.quiz-choice:hover {
  background: var(--bg);
  border-color: var(--clay);
  transform: translateX(3px);
}
.quiz-choice .choice-icon {
  margin-right: 10px;
  font-size: 18px;
}

.quiz-result-icon {
  font-size: 64px;
  margin-bottom: 14px;
}
.quiz-result-title {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 500;
}
.quiz-result-desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 24px;
}
.quiz-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* === Dog-breed quiz === */
.quiz-q-emoji {
  font-size: 38px;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1;
}
.dogq-hero {
  --dq-accent: var(--clay);
  border-radius: 22px;
  padding: 30px 24px 26px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(92, 74, 60, 0.16);
}
.dogq-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.dogq-art {
  display: block;
  font-size: 76px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}
.dogq-breed {
  font-family: 'IBM Plex Serif', serif;
  font-weight: 500;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  margin-bottom: 4px;
}
.dogq-eng {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.dogq-tagline {
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 12px 18px;
  max-width: 340px;
  margin: 0 auto;
}
.dogq-affirm {
  background: var(--cream);
  border-radius: 16px;
  border-left: 4px solid var(--clay);
  padding: 18px 20px;
  font-family: 'IBM Plex Serif', serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  text-align: left;
  margin-bottom: 16px;
}
.dogq-section {
  background: #fff;
  border: 1px solid var(--beige);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  text-align: left;
}
.dogq-sec-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dogq-strengths {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dogq-strengths li {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
  padding-left: 22px;
  position: relative;
}
.dogq-strengths li::before {
  content: '🐾';
  position: absolute;
  left: 0;
  font-size: 12px;
  top: 3px;
}
.dogq-missions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dogq-mission {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cream);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.dogq-mis-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* === Fortune (เซียมซี) === */
.fortune-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 24px;
}
.fortune-topic {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--beige);
  font-size: 13px;
  color: var(--ink-soft);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.fortune-topic:hover { border-color: var(--clay); color: var(--ink); }
.fortune-topic.active {
  background: var(--cream);
  border-color: var(--clay);
  color: var(--ink);
}

/* Tarot deck */
.tarot-stage {
  background: linear-gradient(180deg, var(--cream), var(--bg));
  border-radius: 24px;
  padding: 28px 18px 36px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.fortune-instr {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 22px;
}
/* 3D sun fortune card */
.suncard-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.suncard-wrap {
  position: relative;
  width: 300px;
  height: 434px;
  max-width: 78vw;
  cursor: grab;
  touch-action: none;
}
.suncard-wrap:active { cursor: grabbing; }
.suncard-wrap.is-locked { cursor: default; }
.suncard-wrap.is-locked .suncard-glow { opacity: 0.4; }
.suncard-glow {
  position: absolute;
  inset: 6%;
  z-index: 0;
  pointer-events: none;
  filter: blur(26px);
  border-radius: 24px;
  background: radial-gradient(60% 60% at 50% 42%, rgba(255,228,168,0.55), transparent 70%);
  transition: opacity 0.5s var(--ease);
}
.suncard-wrap canvas { position: relative; z-index: 1; }
.suncard-hint {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.85;
}
.tarot-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  perspective: 1400px;
  min-height: 170px;
}
.tarot-deck.disabled .tarot-card {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.4);
}
.tarot-card {
  width: 64px;
  height: 100px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.tarot-card:hover:not(.flipped):not(.faded) {
  transform: translateY(-10px) rotate(2deg);
  z-index: 5;
}
.tarot-card.faded {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.tarot-card.flipped {
  transform: translateY(-22px) rotateY(180deg) scale(1.18);
  z-index: 10;
}
.tarot-face,
.tarot-back {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 14px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, var(--clay) 0%, #8a4a3a 100%);
  border: 1.5px solid rgba(255,255,255,0.25);
}
.tarot-back::before {
  content: '✦';
  color: var(--gold);
  font-size: 24px;
  text-shadow: 0 0 8px rgba(212,165,116,0.4);
}
.tarot-back::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212,165,116,0.4);
  border-radius: 5px;
}
.tarot-face {
  background: linear-gradient(180deg, #fdfaf3 0%, var(--cream) 100%);
  border: 1.5px solid var(--gold);
  transform: rotateY(180deg);
  flex-direction: column;
  padding: 8px;
  text-align: center;
}
.tarot-face .tf-symbol {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.tarot-face .tf-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 9px;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tarot-face .tf-num {
  font-family: 'IBM Plex Serif', serif;
  font-size: 9px;
  color: var(--clay);
  letter-spacing: 0.1em;
}
@media (max-width: 480px) {
  .tarot-card { width: 56px; height: 88px; }
  .tarot-face .tf-symbol { font-size: 22px; }
  .tarot-face .tf-name { font-size: 8px; }
}

.fortune-result-room {
  display: none;
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 460px;
  margin: 18px auto 0;
  text-align: center;
}
.fortune-actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.fortune-result-room.show { display: block; animation: stepIn 0.5s var(--ease); }
.fortune-num-room {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 600;
  width: 40px; height: 40px;
  line-height: 40px;
  border-radius: 50%;
  font-size: 16px;
  margin-bottom: 14px;
}
.fortune-headline {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px;
  color: var(--clay);
  font-style: italic;
  margin-bottom: 12px;
  font-weight: 500;
}
.fortune-msg-room {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Garden / sit room */
/* ===== Wheel of Activities (ออกไปข้างนอก) ===== */
.wheel-mode {
  display: flex; gap: 10px; justify-content: center;
  margin: 0 auto 18px;
  flex-wrap: wrap;
}
.wheel-mode-btn {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}
.wheel-mode-btn:hover { border-color: var(--clay); color: var(--ink); }
.wheel-mode-btn.active {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay);
}
.wheel-custom-editor {
  max-width: 460px;
  margin: 0 auto 22px;
  text-align: center;
}
.wheel-textarea {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid var(--beige);
  border-radius: 14px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
  line-height: 1.7;
  outline: none;
  transition: border-color var(--transition);
  margin-bottom: 12px;
  min-height: 120px;
}
.wheel-textarea:focus { border-color: var(--clay); }

.wheel-stage {
  position: relative;
  max-width: 360px;
  margin: 0 auto 28px;
  text-align: center;
}
.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: var(--clay);
  z-index: 5;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}
.wheel-disc-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 18px;
}
.wheel-disc {
  width: 100%; height: 100%;
  display: block;
  transition: transform 4.5s cubic-bezier(0.17, 0.67, 0.32, 1.04);
  filter: drop-shadow(0 8px 24px rgba(60,40,20,0.18));
}
.wheel-spin-btn {
  min-width: 140px;
  font-size: 16px;
  padding: 14px 32px;
}
.wheel-result {
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--cream), var(--bg));
  border-radius: 24px;
  box-shadow: 0 10px 28px var(--shadow);
  animation: stepIn 0.6s var(--ease);
}
.wheel-result[hidden] { display: none; }
.wheel-result-icon { font-size: 36px; margin-bottom: 10px; }
.wheel-result-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px;
  color: var(--clay);
  margin-bottom: 8px;
  font-style: italic;
}
.wheel-result-sub {
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.7;
}
.wheel-result-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

.garden-room {
  position: relative;
  min-height: 100vh;
  padding: 100px 24px 60px;
  text-align: center;
  background: var(--bg);
  overflow: hidden;
}
.garden-bg {
  display: none;
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 65% at center 55%, black 30%, transparent 90%);
}
.garden-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}
.sit-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(92, 74, 60, 0.08);
  margin-top: 30px;
}
.sit-duration {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}
.duration-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--beige);
  color: var(--ink);
  font-size: 13px;
  transition: all var(--transition);
}
.duration-btn:hover { border-color: var(--clay); }
.duration-btn.active {
  background: var(--clay); color: var(--bg); border-color: var(--clay);
}

.breathing-stage {
  display: none;
  text-align: center;
  padding: 40px 0;
}
.breathing-stage.active { display: block; }
.breath-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cream) 0%, var(--blush) 100%);
  margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Serif', serif;
  color: var(--ink);
  font-size: 16px;
  font-style: italic;
  box-shadow: 0 0 50px rgba(213, 189, 175, 0.5);
}
.breath-circle.natural  { animation: br-natural 8s ease-in-out infinite; }
.breath-circle.b478     { animation: br-478 19s ease-in-out infinite; }
.breath-circle.box      { animation: br-box 16s ease-in-out infinite; }
.breath-circle.coherent { animation: br-coherent 10s ease-in-out infinite; }

@keyframes br-natural {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
@keyframes br-478 {
  0%   { transform: scale(1); }
  21%  { transform: scale(1.2); }   /* inhale 4s (4/19) */
  58%  { transform: scale(1.2); }   /* hold 7s (4+7=11/19) */
  100% { transform: scale(1); }     /* exhale 8s (11→19) */
}
@keyframes br-box {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }   /* inhale 4s */
  50%  { transform: scale(1.2); }   /* hold 4s */
  75%  { transform: scale(1); }     /* exhale 4s */
  100% { transform: scale(1); }     /* hold 4s */
}
@keyframes br-coherent {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.pattern-btn {
  padding: 12px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--beige);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.pattern-btn:hover { border-color: var(--clay); }
.pattern-btn.active {
  background: var(--cream);
  border-color: var(--clay);
}
.pattern-btn .pat-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.pattern-btn .pat-desc {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.breath-label {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px;
  color: var(--ink);
  font-style: italic;
  letter-spacing: 0.5px;
}
.timer-display {
  font-family: 'IBM Plex Serif', serif;
  font-size: 28px;
  color: var(--clay);
  margin-top: 16px;
  font-feature-settings: 'tnum';
}

/* Prayer-type choice (regular vs special) */
.prayer-type-stage {
  margin-top: 28px;
  display: none;
}
.prayer-type-stage.show { display: block; }
.prayer-type-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 400;
}
.prayer-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 540px;
  margin: 0 auto;
}
.prayer-type-btn {
  position: relative;
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
  color: var(--ink);
}
.prayer-type-btn:hover:not(:disabled) {
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px var(--shadow);
}
.prayer-type-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.prayer-type-btn .pt-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}
.prayer-type-btn .pt-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.prayer-type-btn.special {
  background: linear-gradient(135deg, var(--cream), var(--butter));
  border-color: var(--gold);
}
.prayer-type-btn.special .pt-name { color: var(--clay); }
.prayer-type-btn.special::before {
  content: '✨';
  position: absolute;
  top: -10px; right: -10px;
  font-size: 18px;
  background: var(--bg);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px var(--shadow);
}
.prayer-type-btn.locked {
  background: var(--bg);
  border-color: var(--beige);
}
.prayer-type-btn.locked::before {
  content: '🔒';
}
.prayer-type-btn.locked .pt-name { color: var(--ink-soft); }

.map-page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 110px 24px 60px;
  text-align: center;
}
.map-headline {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400; color: var(--ink);
  letter-spacing: -0.4px;
  margin-bottom: 10px;
  line-height: 1.2;
}
.map-headline em {
  font-style: italic;
  color: var(--clay);
  font-weight: 400;
}
.map-sub {
  color: var(--ink-soft); font-size: 15px; font-weight: 300;
  margin-bottom: 24px;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}

/* ============ HEART MAP + GOOGLE PINS ============ */
.map-wrapper {
  position: relative;
  width: min(720px, 94vw);
  aspect-ratio: 1 / 1;
  margin: 8px auto 0;
  overflow: hidden;
  border-radius: 24px;
  /* Browser handles vertical scroll (page) by default.
     We capture horizontal swipes via JS and translate the canvas — so vertical
     swipe always passes through cleanly with no friction. */
  touch-action: pan-y;
  cursor: grab;
}
/* Pin previews are PORTALED to body via JS to escape map-wrapper clipping.
   The portaled clone sits at top z-index, fixed-positioned to viewport. */
.pin-preview-portal {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  width: 170px;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 14px;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  user-select: none;
  -webkit-user-select: none;
  font-size: 12px;
  line-height: 1.5;
}
.pin-preview-portal.show {
  opacity: 1;
  transform: translateY(0);
}
.pin-preview-portal::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.pin-preview-portal.arrow-down::after {
  top: 100%;
  border-top-color: var(--ink);
}
.pin-preview-portal.arrow-up::after {
  bottom: 100%;
  border-bottom-color: var(--ink);
}
.pin-preview-portal .pin-preview-title {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  margin-bottom: 4px;
}
.pin-preview-portal .pin-preview-tags {
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.55;
}
.pin-preview-portal .pin-preview-coming {
  font-size: 11px;
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}
.map-wrapper.is-dragging { cursor: grabbing; }

.map-canvas {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.map-section {
  position: relative;
  flex-shrink: 0;
  -webkit-user-drag: none;
}
.map-section-heart {
  width: min(720px, 94vw);
  aspect-ratio: 1/1;
}
.map-section-island {
  /* Same size as heart — feels like the city continues seamlessly. */
  width: min(720px, 94vw);
  aspect-ratio: 1/1;
  margin-left: clamp(40px, 7vw, 80px);
  margin-right: 12px;
}
.map-img {
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  display: block;
}
/* Wooden arrow plate — absolute overlay on the map, always visible.
   Two variants: .signpost-right (default, points →) and .signpost-left (points ←) */
.signpost {
  position: absolute;
  bottom: 6%;                  /* moved to BOTTOM of map */
  transform: translateY(0);
  background: linear-gradient(180deg, #d8b78c 0%, #c19a6c 100%);
  color: #4a2f1a;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 6px rgba(60,40,20,0.18), inset 0 1px 0 rgba(255,255,255,0.32);
  border: 1px solid #8b6f47;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 8;
  letter-spacing: 0.02em;
  animation: signpostBob 2.6s ease-in-out infinite;
  transition: opacity 0.4s var(--ease), transform 0.3s var(--ease);
  max-width: 28%;
}
.signpost-right {
  right: 12px;
  padding-left: 16px;
  border-radius: 3px 12px 12px 3px;
}
.signpost-right::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 7px solid #8b6f47;
}
.signpost-left {
  left: 12px;
  padding-right: 16px;
  border-radius: 12px 3px 3px 12px;
}
.signpost-left::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 7px solid #8b6f47;
}
.signpost:focus { outline: none; }
.signpost:focus-visible { outline: 2px dashed var(--clay); outline-offset: 4px; }
.signpost:hover {
  transform: translateY(calc(-50% - 2px)) scale(1.04);
  box-shadow: 0 6px 16px rgba(60,40,20,0.32);
}
.signpost.gone {
  opacity: 0;
  pointer-events: none;
}
.signpost-right.gone { transform: translate(8px, 0); }
.signpost-left.gone  { transform: translate(-8px, 0); }
@keyframes signpostBob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, 0); }
}
.signpost-left {
  animation-name: signpostBobLeft;
}
@keyframes signpostBobLeft {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-4px, 0); }
}
.signpost-arrow-tip { font-size: 12px; line-height: 1; }
@media (max-width: 480px) {
  .signpost { font-size: 8.5px; padding: 4px 8px; gap: 4px; max-width: 30%; bottom: 4%; }
  .signpost-right { right: 8px; padding-left: 12px; }
  .signpost-left  { left: 8px; padding-right: 12px; }
  .signpost-right::before { left: -6px; border-top-width: 7px; border-bottom-width: 7px; border-right-width: 6px; }
  .signpost-left::after  { right: -6px; border-top-width: 7px; border-bottom-width: 7px; border-left-width: 6px; }
}
/* Single pin on island — positioned near the pier/center of the cute graveyard */
.pin-island { top: 58%; left: 50%; animation-delay: 0.2s; }
.pin-island .pin-pulse { background: rgba(126,111,168,0.45); }

/* Google-style pin (red teardrop) — drops in on load, hovers up on hover */
.pin {
  position: absolute;
  display: block;
  transform: translate(-50%, -100%);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  z-index: 5;
  animation: pin-drop 0.8s var(--ease) backwards;
  transition: transform 0.35s var(--ease);
}
.pin-1 { top: 30%; left: 16%; animation-delay: 0.4s; }   /* shrine */
.pin-2 { top: 24%; left: 81%; animation-delay: 0.55s; }  /* park (removed) */
.pin-3 { top: 25%; left: 50%; animation-delay: 0.7s; }   /* museum / gallery building */
.pin-4 { top: 34%; left: 84%; animation-delay: 0.85s; }  /* bedroom */
.pin-5 { top: 52%; left: 50%; animation-delay: 1.0s; }   /* cafe-quiz */
.pin-6 { top: 76%; left: 11%; animation-delay: 1.15s; }  /* scream booth */
.pin-7 { top: 80%; left: 67%; animation-delay: 1.3s; }   /* indie store */

@keyframes pin-drop {
  0%   { transform: translate(-50%, -160%); opacity: 0; }
  60%  { transform: translate(-50%, -92%); opacity: 1; }
  80%  { transform: translate(-50%, -103%); }
  100% { transform: translate(-50%, -100%); opacity: 1; }
}

.pin-svg {
  width: 36px; height: 50px;
  filter: drop-shadow(0 4px 8px rgba(176, 122, 101, 0.45));
  transition: transform 0.35s var(--ease);
  position: relative;
  animation: pin-bob 3.2s ease-in-out infinite;
}
.pin:hover .pin-svg {
  transform: translateY(-5px) scale(1.08);
}
@keyframes pin-bob {
  0%, 100% { top: 0; }
  50%      { top: -5px; }
}
/* Stagger bob timing per pin so they don't all float in unison */
.pin-1 .pin-svg { animation-delay: 0s;    }
.pin-2 .pin-svg { animation-delay: 0.4s;  }
.pin-3 .pin-svg { animation-delay: 1.6s;  }
.pin-4 .pin-svg { animation-delay: 0.8s;  }
.pin-5 .pin-svg { animation-delay: 2.0s;  }
.pin-6 .pin-svg { animation-delay: 1.2s;  }
.pin-7 .pin-svg { animation-delay: 2.4s;  }

/* Pulse ring */
.pin-pulse {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #D8523F;
  opacity: 0;
  pointer-events: none;
}
.pin:hover .pin-pulse {
  animation: ping 1.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: translateX(-50%) scale(1); opacity: 0.45; }
  80%, 100% { transform: translateX(-50%) scale(2.4); opacity: 0; }
}

/* === Rich preview card (hover desktop / long-press mobile) === */
.pin-preview {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  --preview-shift: 0px;
  transform: translateX(calc(-50% + var(--preview-shift))) translateY(6px);
  width: 170px;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 14px;
  border-radius: 12px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 10;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  /* Block text selection + iOS callout when user long-presses a pin */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Also block selection on the pin itself + parents that propagate touch */
.pin, .pin * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pin-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--preview-shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--ink);
}
/* In-DOM pin-preview is hidden — portaled version is shown instead.
   Keep the source markup for portal innerHTML cloning. */
.pin:hover .pin-preview,
.pin.previewing .pin-preview {
  opacity: 0 !important;
  pointer-events: none !important;
}
.pin-preview {
  /* Always hidden — content used as source for portal */
  display: block;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
/* Flip preview to BELOW the pin (for pins close to top edge) */
.pin.preview-below .pin-preview {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-6px);
}
.pin.preview-below .pin-preview::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}
.pin.preview-below:hover .pin-preview,
.pin.preview-below.previewing .pin-preview {
  transform: translateX(calc(-50% + var(--preview-shift, 0px))) translateY(0);
}

/* Per-pin shift to keep preview inside map bounds */
.pin-1 .pin-preview { --preview-shift: 50px; }   /* left-edge pin → shift right */
.pin-6 .pin-preview { --preview-shift: 60px; }   /* left-edge pin → shift right */
.pin-2 .pin-preview { --preview-shift: -50px; }  /* right-edge pin → shift left */
.pin-4 .pin-preview { --preview-shift: -50px; }  /* right-edge pin → shift left */
.pin-7 .pin-preview { --preview-shift: -20px; }  /* slight right → small shift left */

.pin-preview-title {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--bg);
  letter-spacing: 0.2px;
}
.pin-preview-tags {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.2px;
}
.pin-preview-coming {
  font-size: 11px;
  color: var(--butter);
  font-style: italic;
  margin: 0;
  letter-spacing: 0.2px;
}

/* ===== Shopping mini-game (in #room-travel) ===== */
.shop-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--beige), transparent);
  margin: 40px auto 28px;
  max-width: 360px;
}
.shop-section {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 24px;
}
.shop-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 6px;
}
.shop-sub {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0 0 22px;
  line-height: 1.6;
}
.shop-block { margin-bottom: 18px; }
.shop-h4 {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 8px;
}
.shop-zones, .shop-durations {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.shop-zone {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  min-width: 96px;
  text-align: center;
  transition: all 0.25s var(--ease);
}
.shop-zone:hover { transform: translateY(-2px); border-color: var(--clay); }
.shop-zone.active { background: var(--cream); border-color: var(--clay); box-shadow: 0 4px 10px rgba(193,141,107,0.15); }
.shop-zone-icon { font-size: 24px; margin-bottom: 4px; }
.shop-zone-label { font-size: 12px; color: var(--ink); }
.shop-dur {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: all 0.25s var(--ease);
}
.shop-dur:hover { border-color: var(--clay); }
.shop-dur.active { background: var(--clay); color: var(--bg); border-color: var(--clay); }
.shop-start-btn { margin-top: 8px; }
.shop-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
}
.shop-arena {
  position: relative;
  width: 100%;
  height: 320px;
  background: linear-gradient(180deg, #fff7ec, #fef0d8);
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--beige);
}
.shop-item {
  position: absolute;
  font-size: 32px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.shop-item:hover { transform: scale(1.15); }
.shop-item.taken {
  animation: shopGrab 0.5s cubic-bezier(0.4, 1.4, 0.5, 1) forwards;
  pointer-events: none;
}
@keyframes shopGrab {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.5) translateY(-20px); opacity: 0.9; }
  100% { transform: scale(0.2) translateY(-80px); opacity: 0; }
}
.shop-tip {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 12px 0 0;
}
.shop-result {
  background: var(--cream);
  border-radius: 22px;
  padding: 32px 24px;
  text-align: center;
}
.shop-result-icon { font-size: 48px; margin-bottom: 8px; }
.shop-result-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 12px;
}
.shop-result-stat {
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 4px;
}
.shop-result-mood {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0 0 18px;
  line-height: 1.6;
}

/* ===== Bookmark drawer / Saved items modal ===== */
.bookmark-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--clay);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg);
  line-height: 1;
}
.bookmark-badge[hidden] { display: none !important; }
#bookmarkOpen { position: relative; }
.bookmark-modal {
  position: fixed; inset: 0;
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.bookmark-modal[hidden] { display: none !important; }
.bookmark-modal.show { pointer-events: auto; }
.bookmark-backdrop {
  position: absolute; inset: 0;
  background: rgba(74, 47, 26, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bookmark-modal.show .bookmark-backdrop { opacity: 1; }
.bookmark-panel {
  position: relative;
  z-index: 2;
  background: var(--bg);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  border-radius: 24px 24px 0 0;
  padding: 24px 22px 28px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 1.05, 0.4, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
  pointer-events: auto;
}
.bookmark-backdrop { z-index: 1; }
.bookmark-modal.show .bookmark-panel { transform: translateY(0); }
@media (min-width: 760px) {
  .bookmark-modal { align-items: center; }
  .bookmark-panel { border-radius: 20px; max-height: 76vh; }
}
.bookmark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.bookmark-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 20px;
  margin: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bookmark-close {
  background: transparent;
  border: 1px solid var(--beige);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  font-family: inherit;
  pointer-events: auto;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.bookmark-close:hover { background: var(--cream); }
.bookmark-close:active { transform: scale(0.94); }
.bookmark-sub {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 0 0 16px;
  line-height: 1.6;
}
.bookmark-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bookmark-item {
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
.bookmark-item-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.bookmark-item-text {
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.bookmark-item-actions {
  display: flex;
  gap: 8px;
}
.bookmark-item-actions button {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.bookmark-item-actions button:hover { background: var(--clay); color: var(--bg); border-color: var(--clay); }
.bookmark-empty {
  text-align: center;
  padding: 28px 16px 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.bookmark-empty-icon { font-size: 36px; margin-bottom: 8px; }

/* ---- Backup / Restore tools (ในกล่องของฉัน) ---- */
.bookmark-tools { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cream); }
.bk-tool {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--beige);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.bk-tool:hover { background: var(--cream); border-color: var(--clay); color: var(--ink); }
.bk-note { font-size: 11px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; opacity: .85; }

/* ============================================================
   MY COLLECTION — item inventory grid + 3D artifact viewer
   ============================================================ */
.bookmark-list.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 12px;
  padding: 6px 2px 10px;
  perspective: 900px;
}
.inv-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
}
.inv-slot.empty {
  border: 1.5px dashed var(--beige);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(176,122,101,.045) 8px 9px);
}
.inv-slot.empty::after {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px dashed var(--beige);
  opacity: .65;
}
.inv-slot.filled {
  cursor: pointer;
  border: 1px solid var(--beige);
  background: radial-gradient(125% 92% at 50% 0%, oklch(0.955 0.032 var(--hue,40)) 0%, var(--bg) 64%);
  box-shadow: 0 3px 10px rgba(92,74,60,.09), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  animation: invPop .42s cubic-bezier(.22,1.35,.4,1) both;
}
@keyframes invPop { from { transform: translateY(10px) scale(.9); } to { transform: none; } }
.inv-slot.filled:hover {
  transform: translateY(-5px) rotateX(7deg) scale(1.03);
  box-shadow: 0 14px 24px rgba(92,74,60,.2);
}
.inv-slot.filled:active { transform: translateY(-1px) scale(.98); }
.inv-emblem {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(92,74,60,.2));
}
.inv-type {
  font-size: 9.5px;
  letter-spacing: .3px;
  color: var(--ink-soft);
  padding: 0 5px;
  line-height: 1.28;
  max-width: 100%;
  word-break: keep-all;
}
.inv-date {
  position: absolute;
  top: 7px; right: 8px;
  font-size: 8px;
  color: var(--ink-soft);
  opacity: .68;
  letter-spacing: .2px;
}
.inv-slot.filled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 48%, transparent 58%);
  opacity: 0;
  transition: opacity .3s ease;
}
.inv-slot.filled:hover::before { opacity: 1; }

/* ---- 3D artifact viewer ---- */
.inv-viewer {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  pointer-events: none;
}
.inv-viewer[hidden] { display: none !important; }
/* Opacity is STATIC (no transition/animation on the container): a timed opacity can
   freeze mid-flight at 0 if the compositor is busy on first paint after a page load,
   leaving the viewer invisible but still trapping clicks. The fade-in lives on the
   inner stage instead, which can't leave the overlay invisible if it stalls. */
.inv-viewer.open { opacity: 1; pointer-events: auto; }
.inv-viewer-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 28%, rgba(74,47,26,.42), rgba(36,23,12,.8));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.inv-stage {
  position: relative;
  z-index: 2;
  perspective: 1150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.inv-card-stage {
  transform: translateY(30px) scale(.8);
  opacity: 1;
  transition: transform .55s cubic-bezier(.2,1,.32,1);
  will-change: transform;
}
.inv-viewer.open .inv-card-stage { transform: none; animation: invFloat 6.5s ease-in-out .55s infinite; }
@keyframes invFloat { 0%,100% { translate: 0 -5px; } 50% { translate: 0 7px; } }
.inv-card-tilt {
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .25s ease;
  transform-style: preserve-3d;
}
.inv-card-flip {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: .66;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.5,.05,.2,1);
  cursor: pointer;
}
.inv-card-flip.flipped { transform: rotateY(180deg); }
.inv-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 34px 64px rgba(20,12,6,.5), 0 4px 14px rgba(20,12,6,.35);
}
.inv-face.front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 22px;
  background: linear-gradient(180deg, #FFFDF8 0%, #F7ECDD 100%);
  border: 1px solid #E8D9C6;
}
.inv-face.front::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 13px;
  border: 1px solid var(--gold);
  opacity: .5;
  pointer-events: none;
}
.inv-medallion {
  width: 78px; height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, oklch(0.94 0.05 var(--hue,40)), oklch(0.86 0.045 var(--hue,40)));
  box-shadow: inset 0 2px 5px rgba(255,255,255,.7), inset 0 -3px 7px rgba(92,74,60,.18), 0 4px 12px rgba(92,74,60,.2);
  border: 2px solid rgba(255,255,255,.6);
  flex-shrink: 0;
  margin-bottom: 14px;
}
.inv-medallion-emo { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(92,74,60,.25)); }
.inv-card-eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 12px;
  font-weight: 600;
}
.inv-card-text {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
  text-align: center;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  width: 100%;
  padding: 0 2px;
}
.inv-card-text::-webkit-scrollbar { width: 4px; }
.inv-card-text::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 3px; }
.inv-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,169,97,.35);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .3px;
}
.inv-card-foot .heal-mark { font-family: 'IBM Plex Serif', serif; font-style: italic; color: var(--clay); }
.inv-face.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, #6B4A32, #4A2F1A);
  border: 1px solid #3a2513;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.inv-face.back::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(201,169,97,.4);
  background-image: radial-gradient(rgba(201,169,97,.14) 1px, transparent 1.4px);
  background-size: 13px 13px;
  pointer-events: none;
}
.inv-seal {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 42% 36%, #D89B5C, #A9682F);
  box-shadow: inset 0 3px 6px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.4);
  border: 2px solid rgba(255,240,214,.35);
  position: relative;
  z-index: 1;
}
.inv-seal-emo { font-size: 40px; line-height: 1; filter: grayscale(.15) drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.inv-back-brand {
  position: relative;
  z-index: 1;
  font-family: 'IBM Plex Serif', serif;
  color: #F0D9B5;
  font-size: 15px;
  letter-spacing: .5px;
  text-align: center;
}
.inv-back-brand small { display: block; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 10px; opacity: .7; letter-spacing: 1px; margin-top: 5px; }
.inv-hint {
  font-size: 11px;
  color: rgba(245,235,224,.72);
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inv-hint::before { content: "⇅"; font-size: 13px; opacity: .8; }
.inv-viewer-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.inv-vbtn {
  background: rgba(255,253,248,.94);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .18s ease, background .2s ease;
}
.inv-vbtn:hover { transform: translateY(-2px); background: #fff; }
.inv-vbtn:active { transform: scale(.96); }
.inv-vbtn.danger { color: #9c4f3a; }
.inv-vbtn.back-btn { background: rgba(74,47,26,.55); color: #F5EBE0; border-color: rgba(240,217,181,.3); }
.inv-vbtn.back-btn:hover { background: rgba(74,47,26,.72); }

/* ---- Tarot card face: real card art + holographic light reflection ---- */
.inv-card-art, .inv-holo, .inv-holo-bar, .inv-card-caption { display: none; }
.inv-face.front.is-card { padding: 0; border-color: transparent; }
.inv-face.front.is-card::before { display: none; }
.inv-face.front.is-card .inv-paper,
.inv-face.front.is-card .inv-card-caption { display: none; }
.inv-face.front.is-card .inv-card-art,
.inv-face.front.is-card .inv-holo,
.inv-face.front.is-card .inv-holo-bar { display: block; }
.inv-viewer.showing-card .inv-card-flip { aspect-ratio: .63; }
.inv-paper { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1; }
.inv-card-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
}
/* glossy gold foil — a soft iridescence + a specular highlight that tracks the tilt */
.inv-holo {
  position: absolute; inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    radial-gradient(circle at calc(var(--gx,50) * 1%) calc(var(--gy,50) * 1%), rgba(255,255,255,.92), rgba(255,246,222,.22) 30%, rgba(255,255,255,0) 52%),
    linear-gradient(120deg, rgba(120,200,255,.12), rgba(255,182,228,.12) 30%, rgba(255,240,182,.15) 55%, rgba(180,255,212,.12) 80%);
}
.inv-holo-bar {
  position: absolute; inset: -25%;
  pointer-events: none;
  z-index: 2;
  border-radius: 20px;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 48%, rgba(255,246,214,.2) 52%, transparent 60%);
  transform: translateX(calc((var(--gx,50) - 50) * 1.1%));
  transition: transform .15s ease;
}
.inv-card-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 22px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(24,14,8,.86));
  display: flex; flex-direction: column; gap: 3px;
  text-align: center;
  border-radius: 0 0 20px 20px;
}
.inv-cap-roman { font-family: 'IBM Plex Serif', serif; font-style: italic; color: #F7E7C9; font-size: 17px; letter-spacing: .3px; }
.inv-cap-th { color: rgba(255,247,235,.86); font-size: 12.5px; }
/* card back = the reading (poem / voice) */
.inv-back-poem { display: none; }
.inv-face.back.is-card .inv-back-default { display: none; }
.inv-face.back.is-card .inv-back-poem {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 34px 26px;
  text-align: center;
  position: relative; z-index: 1;
}
.inv-poem-roman { font-family: 'IBM Plex Serif', serif; font-style: italic; color: #F0D9B5; font-size: 18px; }
.inv-poem-divider { width: 34px; height: 1px; background: rgba(240,217,181,.5); }
.inv-poem-text { font-family: 'IBM Plex Serif', serif; color: #F7E7C9; font-size: 15px; line-height: 1.85; }
.inv-back-poem small { color: rgba(240,217,181,.6); font-size: 10px; letter-spacing: .6px; margin-top: 4px; }
/* grid slot shows a mini of the actual card instead of an emoji */
.inv-emblem-card {
  width: 46px; height: 68px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  box-shadow: 0 3px 9px rgba(92,74,60,.32);
  border: 1px solid rgba(255,255,255,.55);
  filter: none;
}

/* ===== Universal Share + Bookmark buttons (every completed activity) ===== */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.card-action-btn {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--beige);
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.card-action-btn:hover {
  background: #FBF3E2;
  color: var(--clay);
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 6px 13px rgba(176,122,101,.16);
}
.card-action-btn.saved {
  background: #FBF3E2;
  color: var(--clay);
  border-color: var(--clay);
}
/* Toast notification for share/bookmark */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(74, 47, 26, 0.95);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* "Under Construction" tag on SOON pins — clean, airy, sits like a sticky note */
.uc-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: #fff8e1;
  color: #7a5418;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(184, 138, 44, 0.35);
  white-space: nowrap;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(60,40,20,0.12);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: ucBadgeBob 3.2s ease-in-out infinite;
}
.uc-badge::before {
  content: '🌱';
  font-size: 10px;
  margin-right: 4px;
}
@keyframes ucBadgeBob {
  0%, 100% { transform: translateX(-50%) rotate(-2deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-2deg) translateY(-2px); }
}

/* ============ ROOM OVERLAYS ============ */
.room-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;     /* iOS momentum scrolling */
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
  max-width: 100vw;
}
.room-overlay.active { opacity: 1; pointer-events: auto; }
.room-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 100px 32px 40px;
  text-align: center;
  overflow-x: hidden;
  max-width: min(760px, 100vw);
  box-sizing: border-box;
}
.room-eyebrow {
  display: inline-block;
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 14px; color: var(--clay);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.room-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(34px, 5vw, 52px);
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 400; letter-spacing: -0.5px;
}
.room-subtitle {
  color: var(--ink-soft);
  font-size: 17px;
  margin-bottom: 48px;
  font-weight: 300;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}
.activity-block {
  background: var(--cream);
  padding: 32px;
  border-radius: 24px;
  margin-bottom: 18px;
  text-align: left;
  transition: transform var(--transition);
}
.activity-block:hover { transform: translateY(-2px); }
.activity-block h3 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px; color: var(--clay);
  margin-bottom: 10px; font-weight: 500;
}
.activity-block p { color: var(--ink); font-size: 16px; line-height: 1.7; }

.room-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--beige);
}
.room-nav-simple {
  justify-content: center;
}
/* === Inline UI icon (line-icon system) === */
.ui-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.15em;flex-shrink:0}
.ui-ic-lg{width:1.25em;height:1.25em}

/* === Button System C · Editorial === */
.nav-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: linear-gradient(100deg, var(--ink) 50%, rgba(92,74,60,0) 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: background-position .5s var(--ease), color .35s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-btn:hover { background-position: 0 0; color: var(--cream); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(92,74,60,.20); }
/* Primary */
.nav-btn.next {
  border-color: var(--ink);
  color: var(--cream);
  background: linear-gradient(100deg, var(--clay) 50%, var(--ink) 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
}
.nav-btn.next:hover { background-position: 0 0; color: #fff; border-color: var(--clay); transform: translateY(-3px); box-shadow: 0 11px 22px rgba(92,74,60,.28); }
/* Ghost */
.nav-btn.map {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--ink-soft);
  padding: 10px 4px;
}
.nav-btn.map:hover { background: none; color: var(--clay); border-bottom-color: var(--clay); transform: none; box-shadow: none; gap: 13px; }

.close-btn {
  position: fixed;
  top: 24px; left: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--beige);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  z-index: 110;
  font-size: 18px; color: var(--ink);
}
.close-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); transform: translateY(-2px); }
/* Inside the header's icon row, the close/back-to-map button flows as just
   another icon — same layer, same row as music / bookmark / language. */
.header-actions .close-btn {
  position: static;
  width: 36px; height: 36px;
  font-size: 15px;
}

/* ==========================================
   ห้องมู GAME — 6-step interactive
   ========================================== */
.game-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 90px 24px 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Deity background overlay — fullscreen with feathered edges */
.deity-bg-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: 78vmin;
  background-position: center 48%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at center 48%, black 25%, transparent 90%);
          mask-image: radial-gradient(ellipse 50% 55% at center 48%, black 25%, transparent 90%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1s var(--ease);
}
.deity-bg-overlay.show { opacity: 0.55; }

/* Selected deity info banner shown in steps 2-5 */
.deity-info {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--cream);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  max-width: 420px;
  margin: 0 auto 20px;
  box-shadow: 0 4px 14px var(--shadow);
}
.deity-info.show { display: inline-flex; }
.deity-info img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}
.deity-info-text { text-align: left; }
.deity-info-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.deity-info-power {
  font-size: 11px;
  color: var(--clay);
  letter-spacing: 0.3px;
}

/* Ritual hint banner — shown in step 4 */
.ritual-banner {
  background: var(--butter);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.ritual-banner .ritual-emoji {
  font-size: 22px;
  flex-shrink: 0;
}
.ritual-banner.hidden { display: none; }
.ritual-label {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.game-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 40px;
}
.game-dot {
  width: 28px; height: 4px;
  border-radius: 999px;
  background: var(--beige);
  transition: background 0.4s var(--ease);
}
.game-dot.active { background: var(--clay); }
.game-dot.done { background: var(--gold); }

.game-step {
  display: none;
  animation: stepIn 0.6s var(--ease);
}
.game-step.active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-eyebrow {
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 14px; color: var(--clay);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.step-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(26px, 4vw, 36px);
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
.step-desc {
  color: #6a5544;
  font-size: 16px;
  margin-bottom: 36px;
  font-weight: 400;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}

/* Step 1: deity choices */
.deity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}
.deity-card {
  position: relative;
  background: linear-gradient(180deg, #fbf4e6, #f1e3ca);
  border: 1.5px solid #d9c39b;
  border-radius: 16px 16px 13px 13px;
  padding: 30px 18px 22px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  box-shadow: 0 4px 14px rgba(120,90,50,0.10), inset 0 0 0 4px rgba(255,255,255,0.45);
}
/* small altar ornament above each niche */
.deity-card::before {
  content: '✦';
  position: absolute;
  top: 9px; left: 0; right: 0;
  text-align: center;
  font-size: 13px; line-height: 1;
  color: #c2a25c;
  opacity: 0.85;
}
.deity-card:hover {
  transform: translateY(-3px);
  border-color: #c2a25c;
  box-shadow: 0 14px 26px rgba(120,90,50,0.18), inset 0 0 0 4px rgba(255,255,255,0.5);
}
.deity-card.selected {
  border-color: #b8893f;
  background: linear-gradient(180deg, #fffaf0, #f3e6cb);
  box-shadow: 0 8px 22px rgba(184,137,63,0.28), inset 0 0 0 4px rgba(255,255,255,0.55);
}
.deity-icon {
  display: block;
  width: 104px;
  height: 118px;
  margin: 0 auto 13px;
  border-radius: 52px 52px 14px 14px;   /* arched worship niche */
  object-fit: cover;
  background: var(--bg);
  border: 3px solid #c9a76a;
  box-shadow: 0 0 0 4px #fbf4e6, 0 6px 16px rgba(140,100,55,0.22), inset 0 -6px 14px rgba(0,0,0,0.12);
  transition: transform 0.4s var(--ease);
}
.deity-card:hover .deity-icon { transform: scale(1.04); }

/* Principal deity — Luang Pho Sothon, set apart above the others */
.deity-principal {
  position: relative;
  max-width: 640px;
  margin: 0 auto 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.deity-principal-label {
  font-family: 'IBM Plex Serif', serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #b8893f;
  margin-bottom: 8px;
  padding: 3px 14px;
  border-top: 1px solid #d9c39b; border-bottom: 1px solid #d9c39b;
}
.deity-card-principal {
  width: 210px;
  padding: 24px 20px 18px;
  background: linear-gradient(180deg, #fdf6e7, #efe0c2);
  border-color: #c2a25c;
  box-shadow: 0 10px 30px rgba(150,110,55,0.22), inset 0 0 0 4px rgba(255,255,255,0.5);
}
.deity-card-principal::after {
  content: '';
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,180,90,0.30), rgba(217,180,90,0) 70%);
  z-index: -1;
  pointer-events: none;
}
.deity-card-principal .deity-icon {
  width: 112px;
  height: 128px;
  border-radius: 56px 56px 14px 14px;
}
.deity-card-principal .deity-name { font-size: 19px; }


/* Placeholder for deities without art yet — CSS gradient + giant emoji */
.deity-icon-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  background: var(--ph-bg, linear-gradient(180deg, var(--cream), var(--beige)));
  display: flex; align-items: center; justify-content: center;
  font-size: 84px;
  margin-bottom: 12px;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.12), 0 4px 14px rgba(0,0,0,0.08);
  transition: transform 0.4s var(--ease);
  filter: drop-shadow(0 2px 4px rgba(255,255,255,0.35));
  position: relative;
  overflow: hidden;
}
.deity-icon-placeholder::after {
  /* subtle "soon real art" hint */
  content: '✦';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  filter: none;
}
.deity-card.deity-placeholder:hover .deity-icon-placeholder {
  transform: scale(1.04);
}
@media (max-width: 480px) {
  .deity-icon-placeholder { font-size: 60px; }
}
.deity-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.deity-power {
  font-size: 12.5px;
  color: #6a5544;
  margin-bottom: 4px;
}
.deity-meta {
  font-size: 11.5px;
  color: #9a5a3f;
  letter-spacing: 0.3px;
  font-weight: 600;
}
/* playtest: ไฮไลต์องค์ที่ "วันนี้" เป็นวันไหว้พิเศษ */
.deity-card.special-today {
  border-color: #d9a441;
  box-shadow: 0 8px 22px rgba(201,150,50,0.28), inset 0 0 0 4px rgba(255,247,225,0.6);
}
.deity-special-today {
  display: block;
  margin-top: 9px;
  font-size: 11px; font-weight: 700;
  color: #a9761f;
  background: linear-gradient(180deg, #fff4d6, #ffe9b0);
  border: 1px solid #e6c777;
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.2px;
}

/* Step 2: offerings — pick correct one */
.offering-stage {
  background: var(--cream);
  border-radius: 28px;
  padding: 40px 24px;
  margin-bottom: 24px;
  position: relative;
}
.offering-deity {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 8px;
  border-radius: 24px;
  object-fit: cover;
  background: var(--bg);
  box-shadow: 0 8px 24px var(--shadow);
}
.offering-hint {
  font-size: 14px; color: #6a5544; font-weight: 500;
  margin-bottom: 24px; font-style: italic;
}
.offering-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}
.offering-btn {
  background: var(--bg);
  border: 1.5px solid var(--beige);
  border-radius: 16px;
  padding: 18px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: all 0.25s var(--ease);
}
.offering-btn:hover { border-color: var(--clay); transform: translateY(-2px); }
.offering-btn .o-emoji { font-size: 30px; display: block; margin-bottom: 4px; }
.offering-btn.correct {
  background: #E8F0DD;
  border-color: var(--sage);
  color: var(--ink);
}
.offering-btn.wrong {
  animation: shake 0.5s ease;
  background: #FAE7E2;
  border-color: var(--clay);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* Step 3: light incense */
.incense-stage {
  position: relative;
  min-height: 320px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--bg) 100%);
  border-radius: 28px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 56px 16px 40px;
}
.incense-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  align-items: flex-end;
  justify-content: center;
  max-width: 540px;
}
.incense {
  position: relative;
  cursor: pointer;
  width: 24px;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.25s var(--ease);
}
.incense:hover { transform: translateY(-4px); }
.incense .smoke {
  position: absolute;
  bottom: 100%;
  width: 18px; height: 50px;
  background: radial-gradient(ellipse at center bottom, rgba(220, 215, 210, 0.7), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transform-origin: center bottom;
  pointer-events: none;
}
.incense.lit .smoke {
  opacity: 1;
  animation: rise 3s var(--ease) infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0.7; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}
.incense .stick {
  width: 4px;
  height: 104px;
  margin: 0 auto;
  border-radius: 2px;
  /* red-brown incense coating up top (the part that burns) → bamboo core below */
  background: linear-gradient(180deg, #a5371d 0%, #b5432a 42%, #c89f5c 47%, #d9b878 100%);
  box-shadow: inset -1px 0 1.5px rgba(0,0,0,0.2);
}
.incense .tip {
  width: 5px; height: 7px;
  margin: 0 auto -1px;
  background: #7c2a15;          /* unlit: dark maroon incense head */
  border-radius: 3px 3px 1px 1px;
  position: relative; z-index: 2;
  transition: all 0.4s var(--ease);
}
.incense.lit .tip {
  background: radial-gradient(circle at 50% 40%, #ffe0a0, #ff6e40 58%, #b8340f);
  box-shadow: 0 0 12px #FFA866, 0 0 22px rgba(255, 110, 64, 0.6);
}
.incense-count {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Step 4: write prayer */
.prayer-card {
  background: var(--cream);
  border-radius: 28px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.prayer-textarea {
  width: 100%;
  max-width: 480px;
  min-height: 120px;
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 16px;
  padding: 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: none;
  transition: border-color var(--transition);
}
.prayer-textarea:focus {
  outline: none;
  border-color: var(--clay);
}
.prayer-released {
  position: absolute;
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--clay);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  max-width: 80%;
  white-space: pre-wrap;
}
.prayer-released.float {
  animation: floatUp 4s var(--ease) forwards;
}
@keyframes floatUp {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-300px) scale(0.8); opacity: 0; }
}

/* Step 5: fortune sticks (เซียมซี) */
.fortune-stage {
  background: var(--cream);
  border-radius: 28px;
  padding: 40px 24px;
  margin-bottom: 24px;
  min-height: 280px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.fortune-cup {
  width: 120px; height: 140px;
  background: linear-gradient(180deg, var(--clay) 0%, var(--ink) 100%);
  border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 0.3s var(--ease);
  box-shadow: 0 12px 30px var(--shadow);
}
.fortune-cup:hover { transform: rotate(-4deg) translateY(-4px); }
.fortune-cup::before {
  content: '';
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 60px;
  background: var(--gold);
  border-radius: 4px;
}
.fortune-cup.shake { animation: cupShake 0.6s var(--ease); }
@keyframes cupShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
.fortune-result {
  display: none;
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 460px;
  margin: 0 auto;
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px; line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}
.fortune-result.show {
  display: block;
  animation: stepIn 0.6s var(--ease);
}
.fortune-num {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal; font-weight: 600;
  width: 32px; height: 32px;
  line-height: 32px;
  border-radius: 50%;
  font-size: 14px;
  margin-bottom: 12px;
}

/* Step 5: seamsi shaker (3D) keyframes */
@keyframes smGlow{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes smHint{0%,100%{transform:translateX(-50%) translateY(0);opacity:.85}50%{transform:translateX(-50%) translateY(-4px);opacity:1}}
@keyframes smPop{0%{opacity:0;transform:translateY(14px) scale(.96)}60%{transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* Step 6: blessing */
.blessing-card {
  background: linear-gradient(180deg, var(--cream) 0%, var(--bg) 100%);
  border-radius: 28px;
  padding: 48px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.blessing-card::before {
  content: '✨';
  position: absolute;
  top: 20px; right: 30px;
  font-size: 24px;
  animation: twinkle 3s ease-in-out infinite;
}
.blessing-card::after {
  content: '✨';
  position: absolute;
  bottom: 20px; left: 30px;
  font-size: 18px;
  animation: twinkle 3s ease-in-out infinite 1.5s;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.blessing-icon {
  font-size: 60px; margin-bottom: 16px;
}
.blessing-text {
  font-family: 'IBM Plex Serif', serif;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.5;
}
.blessing-sub {
  color: var(--ink-soft); font-size: 15px;
  font-weight: 300;
}

/* Game step navigation */
.step-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.step-nav .nav-btn { font-size: 14px; padding: 12px 24px; }
.step-back {
  background: transparent;
  border-color: var(--beige);
  color: var(--ink-soft);
}
.step-back:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.step-next:disabled {
  background: var(--card); color: var(--ink-soft); border-color: var(--beige);
  cursor: not-allowed; opacity: 0.85;
}
.step-next:disabled:hover {
  background: var(--beige); border-color: var(--beige);
  transform: none;
}

/* ============ COMING SOON MODAL ============ */
.soon-modal {
  position: fixed; inset: 0;
  background: rgba(92, 74, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.soon-modal.active { opacity: 1; pointer-events: auto; }
.soon-card {
  background: var(--bg);
  border-radius: 28px;
  padding: 40px 36px;
  max-width: 420px; width: 100%;
  text-align: center;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 20px 60px rgba(92, 74, 60, 0.15);
}
.soon-modal.active .soon-card { transform: scale(1); }
.soon-icon { font-size: 48px; margin-bottom: 16px; }
.soon-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 26px; color: var(--ink);
  font-weight: 500; margin-bottom: 10px;
}
.soon-uc {
  display: inline-block;
  background: var(--butter);
  color: var(--ink);
  font-size: 11px; font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.soon-msg {
  color: var(--ink-soft); font-size: 15px; line-height: 1.6;
  margin-bottom: 24px;
}
.soon-close {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: all var(--transition);
}
.soon-close:hover { background: var(--clay); }

/* ============ SAFETY BANNER (mental-health disclaimer) ============ */
.safety-banner {
  background: linear-gradient(180deg, #fffaf2 0%, var(--cream) 100%);
  border-top: 1px solid var(--beige);
  padding: 36px 24px 28px;
}
.safety-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
}
.safety-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  color: var(--clay);
  flex-wrap: wrap;
}
.safety-icon { font-size: 18px; }
.safety-banner p {
  margin-bottom: 12px;
  color: var(--ink-soft);
}
.safety-hotlines {
  list-style: none;
  padding: 14px 16px;
  background: rgba(255,253,247,0.75);
  border-radius: 12px;
  border: 1px solid var(--beige);
}
.safety-hotlines li {
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink);
}
.safety-hotlines li + li {
  border-top: 1px solid rgba(193,141,107,0.12);
  margin-top: 5px;
  padding-top: 10px;
}
.safety-hotlines strong {
  display: inline-block;
  min-width: 56px;
  color: var(--clay);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-right: 4px;
}
@media (max-width: 480px) {
  .safety-banner { padding: 28px 18px 22px; }
  .safety-banner-head { font-size: 14px; }
  .safety-banner-inner { font-size: 12px; }
  .safety-hotlines li, .safety-hotlines strong { font-size: 12px; }
}

footer {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 40px 24px calc(90px + env(safe-area-inset-bottom, 0px));
  color: var(--ink-soft);
  font-size: 13px;
  background: var(--cream);
}
.footer-link {
  /* playtest (iPhone): แตะไม่ติด — ปุ่มเล็กเกิน + โดนของลอยด้านล่างทับ
     → ทำ tap target ให้ได้ 44px ตามมาตรฐาน + ยกขึ้นเหนือของลอย */
  display: inline-block;
  position: relative;
  z-index: 20;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  margin-top: 10px;
  padding: 13px 18px;
  min-height: 44px;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.footer-link:hover { color: var(--clay); }

/* Privacy Policy modal */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(60,40,20,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.privacy-modal.show { display: flex; animation: stepIn 0.4s var(--ease); }
.privacy-card {
  background: var(--bg);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
  padding: 36px 32px 28px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}
.privacy-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--beige);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.privacy-close:hover { background: var(--clay); color: var(--bg); border-color: var(--clay); }
.privacy-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 24px;
  color: var(--clay);
  margin-bottom: 4px;
}
.privacy-updated {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 24px;
}
.privacy-body h3 {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  color: var(--clay);
  margin-top: 22px;
  margin-bottom: 8px;
}
.privacy-body p { margin-bottom: 12px; color: var(--ink); }
.privacy-body ul { padding-left: 22px; margin-bottom: 12px; }
.privacy-body li { margin-bottom: 6px; }
.privacy-body strong { color: var(--clay); font-weight: 600; }
@media (max-width: 480px) {
  .privacy-modal { padding: 12px; }
  .privacy-card { padding: 28px 22px 22px; font-size: 13px; }
  .privacy-title { font-size: 20px; }
}

/* ============ MOBILE ============ */
@media (max-width: 640px) {
  /* Header + brand */
  header { padding: 12px 16px; }
  .brand { font-size: 15px; }

  /* Padding tightening */
  .map-page { padding: 84px 14px 36px; }
  .room-content, .game-shell { padding: 80px 16px 28px; }
  .activity-block { padding: 20px; }

  /* Nav buttons go full-width column */
  .room-nav { flex-direction: column; gap: 10px; }
  .room-nav .nav-btn { width: 100%; justify-content: center; }
  /* playtest (ศาล): หั่นความยาวปุ่มย้อนกลับ/ต่อไป ให้อยู่บรรทัดเดียว ไม่เต็มความกว้าง */
  .step-nav { flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: center; }
  .step-nav .nav-btn { width: auto; flex: 0 1 auto; justify-content: center; white-space: nowrap; }
  .step-nav .nav-btn.next { flex: 1 1 auto; max-width: 60%; }

  /* Misc */
  .skip { bottom: 20px; right: 20px; }
  .uc-badge { font-size: 8px; padding: 2px 7px; top: -12px; }
  .pin-svg { width: 30px; height: 42px; }
  .deity-grid { grid-template-columns: 1fr 1fr; }
  .offering-options { grid-template-columns: 1fr 1fr; }

  /* Mobile body sizing only — keep font weight as-is */
  body {
    font-size: 14.5px;
    line-height: 1.7;
  }
  /* Headlines shrink + clamp to viewport */
  .map-headline {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.3;
    margin-bottom: 8px;
    padding: 0 4px;
  }
  .map-sub { font-size: 13px; padding: 0 8px; }
  .room-title { font-size: clamp(22px, 7vw, 30px); line-height: 1.3; padding: 0 4px; }
  .room-subtitle { font-size: 13px; line-height: 1.65; padding: 0 8px; }
  .room-eyebrow { font-size: 11px; letter-spacing: 0.18em; }
  .alone-h3 { font-size: 18px; line-height: 1.4; }
  .alone-sub { font-size: 13px; line-height: 1.65; }

  /* Thai text — prevent breaking inside words/characters
     (keep-all stops the browser from breaking Thai char-by-char) */
  body, h1, h2, h3, h4, p, span, div, button {
    word-break: keep-all;
  }

  /* All interactive controls — min 44px tap target */
  button, .nav-btn, a.nav-btn, .alone-tab, .museum-tab, .vibe-btn,
  .ambient-pill, .bedroom-track, .timer-mode, .cat-action,
  .aest-btn, .wheel-mode-btn, .fortune-topic, .mood-btn {
    min-height: 40px;
  }
  /* Small indicator dots must stay round — opt out of the 40px tap rule */
  .exhibit-dot,
  .color-swatch,
  .color-swatch.custom .cc-edit,
  .quiz-dot,
  .pin-dock-x,
  .step-dot {
    min-height: 0 !important;
  }
  /* ปุ่มดินสอ ✎ แก้สี — บังคับกลมเป๊ะ (กันกฎ tap-target ยืดสูง) */
  .color-swatch.custom .cc-edit { width: 18px !important; height: 18px !important; min-width: 0 !important; }
  .pin-dock-x { width: 18px !important; height: 18px !important; min-width: 0 !important; flex: 0 0 auto; }
  .exhibit-dot {
    width: 20px !important;
    height: 20px !important;
    border: 6px solid transparent;
    background-clip: padding-box;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  .exhibit-dot.active {
    width: 34px !important;
    height: 20px !important;
  }

  /* Cursor-hover patterns → become touch friendly */
  /* Pin previews: rely on long-press handler (already present) */
  /* Hotspot tap effect — show pressed state */
  .hotspot:active { background: var(--clay); color: var(--bg); }

  /* Music toggle / lang toggle / close — bigger taps */
  .lang-toggle, .music-toggle, .close-btn { width: 40px; height: 40px; }
  .lang-toggle { font-size: 11px; }

  /* Footer + safety banner — softer padding */
  .safety-banner { padding: 24px 16px 18px; }
  .safety-banner-head { font-size: 13px; }
  .safety-banner-inner { font-size: 12px; line-height: 1.7; }
  .safety-hotlines li, .safety-hotlines strong { font-size: 12px; }

  /* Card content typography — friendlier sizing */
  .vibe-btn, .ambient-pill, .nav-btn { font-size: 13px; }
  /* playtest (iPhone): ตัวอักษรใต้รูปองค์เล็กไป อ่านยาก → ขยายให้ชัด */
  .deity-name { font-size: 16px; }
  .deity-power { font-size: 12.5px; }
  .deity-meta { font-size: 11.5px; }
  .pin-preview-title { font-size: 13px; }
  .pin-preview-tags { font-size: 11px; }

  /* Stage padding for sub-room content */
  .alone-content, .museum-inner { padding: 0 4px; }

  .island-back-top { font-size: 12px; padding: 8px 14px 8px 12px; }
}

/* Even narrower phones — extra love */
@media (max-width: 380px) {
  body { font-size: 14px; }
  .map-headline { font-size: clamp(20px, 7vw, 26px); }
  .room-title { font-size: clamp(20px, 7vw, 26px); }
  .map-page { padding: 80px 10px 30px; }
  .room-content { padding: 78px 12px 24px; }
}

/* Touch device — disable hover-only effects, use tap state instead */
@media (hover: none) {
  .pin:hover .pin-preview { opacity: 0; pointer-events: none; }
  .pin.previewing .pin-preview { opacity: 1; pointer-events: auto; }
  /* Hotspot hover removed on touch — only :active applies */
  .hotspot:hover {
    background: rgba(255,253,247,0.55);
    color: var(--ink);
    border-color: rgba(255,253,247,0.6);
  }
  .hotspot:hover .hotspot-dot {
    background: var(--clay);
    box-shadow: 0 0 0 3px rgba(193,141,107,0.25);
  }
}

/* ============ LANGUAGE ============ */
body[data-lang="th"] [data-en] { display: none; }
body[data-lang="en"] [data-th] { display: none; }


.close-btn, .nav-btn { text-decoration: none; }

/* ============ Island name label on the map ============ */
.island-name {
  position: absolute;
  bottom: 7%;
  left: 50%;
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: 92%;
  margin: 0;
  padding: 9px 24px;
  animation: islandNameFloat 4.2s ease-in-out infinite;
  background: linear-gradient(180deg, #fffdf8 0%, #f6e9d6 100%);
  border: 1px solid rgba(193, 154, 108, 0.55);
  border-radius: 999px;
  box-shadow:
    0 8px 18px rgba(92, 74, 60, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 4px rgba(201, 169, 97, 0.10);
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--ink);
  text-transform: none;
  /* NOTE: keep this absolute (see `position: absolute` above).
     A stray `position: relative` here used to push the sign into normal flow,
     so it fell BELOW the island image and got clipped by .map-wrapper's
     overflow:hidden — the "bottom tab is cut off" bug. */
}
/* gold flourish lines on both sides of the sign text */
.island-name::before,
.island-name::after {
  content: '';
  height: 1px;
  width: 28px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.island-name::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}
@keyframes islandNameFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -7px); }
}
/* Time Island variant — dusk-purple tint */
.island-name-time {
  background: linear-gradient(180deg, #fdfcff 0%, #ece6f4 100%);
  border-color: rgba(126, 111, 168, 0.5);
  box-shadow:
    0 10px 24px rgba(74, 64, 100, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 4px rgba(126, 111, 168, 0.10);
  color: #4a4064;
  animation-delay: -2.1s;
}
.island-name-time::before { background: linear-gradient(90deg, transparent, #7E6FA8); }
.island-name-time::after  { background: linear-gradient(90deg, #7E6FA8, transparent); }

/* ============ Mood check-in: note + trend graph ============ */
.mood-note-wrap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.mood-note {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--beige);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  resize: none;
  line-height: 1.6;
}
.mood-note:focus { outline: none; border-color: var(--clay); }
.mood-save-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, #C68A72, #B07A65);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(176,122,101,0.35);
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.mood-save-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(176,122,101,0.45); }
.mood-saved-note { font-size: 13px; color: var(--ink-soft); }

.mood-trend {
  margin-top: 22px;
  padding: 18px 16px 14px;
  border-radius: 18px;
  background: var(--cream);
  max-width: 100%;
  box-sizing: border-box;
}
.mood-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mood-trend-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  color: var(--ink);
}
.mood-range { display: flex; gap: 6px; }
.mood-range-btn {
  background: var(--bg);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}
.mood-range-btn.active { background: var(--clay); border-color: var(--clay); color: #fff; }
.mood-chart { width: 100%; max-width: 100%; overflow: hidden; }
.mood-chart svg { display: block; }
.mood-summary {
  margin: 10px 2px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}

/* ============ "พาทัวร์" header button ============ */
/* Tour only makes sense on the map/home — hide it inside rooms */
body:not([data-page="home"]) #tourOpen { display: none; }
.tour-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,235,224,0.9));
  color: var(--clay);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(92,74,60,0.08);
  transition: all var(--transition);
}
.tour-open-btn:hover {
  color: #fff;
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: 0 4px 12px rgba(176,122,101,0.3);
  transform: translateY(-1px);
}
.tour-open-icon { font-size: 14px; line-height: 1; }

/* ============ Room "Introduce" replay button (floating, every room) ============ */
/* Icon-only compass button (was the only chrome carrying a text label). (playtest feedback) */
.room-tour-btn {
  position: fixed;
  top: 22px; left: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  color: var(--clay);
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid var(--beige);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(60, 40, 20, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.25s var(--ease), opacity 0.3s var(--ease);
}
.room-tour-btn:hover {
  color: #fff;
  background: var(--clay);
  border-color: var(--clay);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(176, 122, 101, 0.4);
}
.room-tour-btn-ic {
  display: inline-flex;
  color: var(--clay);
  transition: color 0.25s var(--ease);
}
.room-tour-btn:hover .room-tour-btn-ic { color: #fff; }
/* Tuck the replay button away while a sub-room activity is open */
body:has(.subroom-active) .room-tour-btn,
body.meditating .room-tour-btn { opacity: 0; pointer-events: none; }
/* Exception: inside the diary, the same replay button stays put — it now opens
   the diary's own guide instead of the room tour (one button, not two). */
body:has(#apane-letter.active) .room-tour-btn { opacity: 1; pointer-events: auto; }
@media (max-width: 480px) {
  .room-tour-btn { top: 14px; left: 14px; padding: 8px 13px 8px 10px; font-size: 12.5px; }
}

/* ============ GUIDED TOUR / DIRECTORY ============ */
.tour {
  position: fixed;
  inset: 0;
  z-index: 9000;
  max-width: 100vw;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.tour.show { opacity: 1; }
.tour[hidden] { display: none; }

.tour-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
#tourHoleRect { transition: x 0.5s var(--ease), y 0.5s var(--ease),
  width 0.5s var(--ease), height 0.5s var(--ease); }

/* Soft feathered halo around the spotlit element (premium glow + gentle pulse) */
.tour-ring {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.9),
    0 0 0 8px rgba(255,255,255,0.08),
    0 0 28px 10px rgba(255,255,255,0.28),
    0 0 60px 26px rgba(201,169,97,0.18);
  transition: left 0.5s var(--ease), top 0.5s var(--ease),
    width 0.5s var(--ease), height 0.5s var(--ease);
  animation: tourPulse 2.6s var(--ease) infinite;
}
.tour-ring[hidden] { display: none; }
@keyframes tourPulse {
  0%, 100% { box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.9),
    0 0 0 8px rgba(255,255,255,0.08),
    0 0 28px 10px rgba(255,255,255,0.26),
    0 0 60px 26px rgba(201,169,97,0.16); }
  50% { box-shadow:
    0 0 0 1.5px rgba(255,255,255,1),
    0 0 0 11px rgba(255,255,255,0.12),
    0 0 38px 14px rgba(255,255,255,0.34),
    0 0 78px 34px rgba(201,169,97,0.24); }
}

/* The instruction card — premium glass-paper feel */
.tour-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 360px);
  max-width: 100vw;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EF 100%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  padding: 26px 26px 20px;
  box-shadow:
    0 2px 8px rgba(40,28,20,0.10),
    0 30px 70px rgba(20,12,6,0.42),
    inset 0 1px 0 rgba(255,255,255,0.9);
  text-align: center;
  z-index: 2;
  transition: top 0.5s var(--ease), left 0.5s var(--ease),
    transform 0.5s var(--ease);
}
/* Emoji inside a soft circular medallion */
.tour-emoji {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #FFF7E9, #F0D9B5 78%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.8),
    inset 0 -3px 6px rgba(176,122,101,0.18),
    0 6px 16px rgba(201,169,97,0.28);
}
.tour-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.2px;
  margin: 0 0 10px;
}
.tour-text {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
/* Progress — refined: active step elongates into a pill */
.tour-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.tour-dots span {
  width: 6px;
  height: 6px;
  min-height: 0 !important;
  border-radius: 999px;
  background: var(--beige);
  transition: all 0.4s var(--ease);
}
.tour-dots span.on {
  width: 22px;
  background: linear-gradient(90deg, var(--gold), var(--clay));
}
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Skip moved to the top-right corner of the card, away from the primary
   "ถัดไป / Next" button — people were fat-fingering it and skipping the
   whole tour on first run. (playtest feedback) */
.tour-skip {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
  opacity: 0.72;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.tour-skip:hover { color: var(--ink); opacity: 1; }
.tour-next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #C68A72 0%, #B07A65 55%, #9A6450 100%);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(176,122,101,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
/* Arrow (→) removed per playtest feedback — the "ถัดไป / Next" label already reads clearly on its own. */
.tour-next:hover { transform: translateY(-1.5px); box-shadow: 0 10px 24px rgba(176,122,101,0.5); filter: brightness(1.04); }
.tour-next:active { transform: translateY(0); }

/* Gentle content fade-in on each step */
.tour-card.anim .tour-emoji { animation: tourStepIn 0.5s var(--ease) both; }
.tour-card.anim .tour-title { animation: tourStepIn 0.5s var(--ease) 0.06s both; }
.tour-card.anim .tour-text  { animation: tourStepIn 0.5s var(--ease) 0.12s both; }
@keyframes tourStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-ring { animation: none; }
  .tour-card.anim .tour-emoji,
  .tour-card.anim .tour-title,
  .tour-card.anim .tour-text { animation: none; }
}

/* ============================================================
   BEDROOM (บ้านพักใจ) — meditation dim, letter history,
   cat hunger, desk cat walk, light switch  (added 4 Jun 2026)
   ============================================================ */

/* ----- Meditation dim — darken everything while sitting ----- */
.sit-dim {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(24, 19, 12, 0.5) 0%, rgba(8, 6, 4, 0.92) 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease;
  z-index: 8;
}
body.meditating .sit-dim { opacity: 1; }
body.meditating #apane-meditate .breathing-stage.active { position: relative; z-index: 9; }

/* ----- Letter history (date-stamped entries) ----- */
.letter-history { margin-top: 18px; text-align: left; }
.letter-history-toggle {
  background: none;
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
}
.letter-history-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.letter-history-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.letter-entry {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px 34px 12px 14px;
  position: relative;
}
.letter-entry-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #8a8276;
  margin-bottom: 6px;
}
.letter-entry-tag {
  background: rgba(201, 169, 97, 0.15);
  border-radius: 999px;
  padding: 2px 8px;
}
.letter-entry-text {
  font-size: 14px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.letter-entry-del {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #c4bbac;
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
}
.letter-entry-del:hover { color: #8a8276; }

/* ----- Cat hunger status ----- */
.cat-hunger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 8px 16px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13.5px;
  color: var(--ink);
}
.cat-hunger[data-state="hungry"] {
  background: rgba(216, 82, 63, 0.08);
  border-color: rgba(216, 82, 63, 0.25);
}
.cat-hunger[data-state="hungry"] .cat-hunger-icon { display: inline-block; animation: hunger-wiggle 1.6s ease-in-out infinite; }
@keyframes hunger-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}
.cat-action.attention { animation: feed-pulse 1.8s ease-out infinite; }
@keyframes feed-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 82, 63, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(216, 82, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 82, 63, 0); }
}

/* ----- Desk cat — walks along the bottom of the bedroom stage ----- */
.desk-cat {
  position: absolute;
  bottom: 6px;
  left: -44px;
  font-size: 30px;
  line-height: 1;
  z-index: 3;
  cursor: pointer;
  user-select: none;
  animation: desk-cat-walk 36s linear infinite;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}
@keyframes desk-cat-walk {
  0%   { left: -44px;             transform: scaleX(1); }
  44%  { left: calc(100% + 6px);  transform: scaleX(1); }
  50%  { left: calc(100% + 6px);  transform: scaleX(-1); }
  94%  { left: -44px;             transform: scaleX(-1); }
  100% { left: -44px;             transform: scaleX(1); }
}
.desk-cat.meow { animation: desk-cat-walk 36s linear infinite, desk-cat-hop 0.5s ease; }
@keyframes desk-cat-hop {
  0%   { margin-bottom: 0; }
  40%  { margin-bottom: 10px; }
  100% { margin-bottom: 0; }
}
.desk-cat-heart {
  position: absolute;
  z-index: 4;
  font-size: 16px;
  pointer-events: none;
  animation: desk-heart-float 1.4s ease-out forwards;
}
@keyframes desk-heart-float {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px); }
}

/* ----- Light switch — lights on/off in the bedroom stage ----- */
.lights-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 26, 0);
  pointer-events: none;
  transition: background 1.1s ease;
  z-index: 2;
}
.bedroom-stage.lights-off .lights-overlay { background: rgba(8, 10, 26, 0.62); }
.bedroom-stage.lights-off .bedroom-message { color: rgba(247, 239, 217, 0.9); }
.light-switch {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 0.2s, background 0.3s;
}
.light-switch:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.28); }

/* ----- Tarot card with real image (from backend sheet, future assets) ----- */
.tf-img {
  width: 78%;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   MUSEUM GALLERY — เดินชมแกลเลอรี (แทน horizontal slide เดิม)
   ฉากเดียวกล้องเดียว: overview (ภาพกระจาย salon wall) ↔ walk (เดินชมแถวยาว)
   โหมดอยู่บน .mg-room: .overview-mode / .walk-mode / .pinching
   ============================================================ */
.mg-room {
  --wall: #F2E8DA;
  --wall-dark: #E8DCC8;
  --floor: #C9B294;
  --cam-ease: cubic-bezier(0.55, 0, 0.15, 1);
  position: fixed; inset: 0; z-index: 150;
  color: var(--ink);
  background: linear-gradient(180deg, var(--wall) 0%, var(--wall-dark) 71.8%, var(--floor) 72%, #BCA47F 100%);
}
.mg-room[hidden] { display: none !important; }

/* --- ห้องเดียว กล้องเดียว --- */
.mg-room .hall {
  position: absolute; inset: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mg-room .hall::-webkit-scrollbar { display: none; }
.mg-room.overview-mode .hall { overflow-x: hidden; touch-action: none; } /* มุมกว้าง: นิ้วเป็นของเรา (ปัด/pinch) */
/* โหมดเดินชม: ล็อกทีละภาพ (scroll-snap) — playtest: ให้ภาพหยุดกึ่งกลางทีละรูป */
.mg-room.walk-mode .hall { scroll-snap-type: x mandatory; }
.mg-room.walk-mode .piece { scroll-snap-align: center; scroll-snap-stop: always; }

.mg-room .hall-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: clamp(48px, 7vw, 120px);
  width: max-content;
  transform-origin: 0 0;
  will-change: transform;
  background:
    linear-gradient(180deg, rgba(43,33,24,0.07) 0%, transparent 13%),
    repeating-linear-gradient(90deg, transparent 0 340px, rgba(139,115,85,0.05) 340px 342px),
    linear-gradient(180deg, transparent 0 71.2%, #D8C9B2 71.2% 71.9%, #C4B49A 71.9% 72.1%, transparent 72.1%),
    repeating-linear-gradient(90deg, rgba(92,74,60,0.10) 0 2px, transparent 2px 110px),
    linear-gradient(180deg, var(--wall) 0%, var(--wall-dark) 72%, #D3BD9E 72.2%, var(--floor) 100%);
}
.mg-room .hall-inner::after {
  content: ''; position: absolute; left: 0; right: 0; top: 72%; height: 7%;
  background: linear-gradient(180deg, rgba(43,33,24,0.16), transparent);
  pointer-events: none;
}
.mg-room.pinching .hall-inner, .mg-room.pinching .piece { transition: none !important; }

/* โหมดเดินชม: หรี่ไฟทั้งห้อง — ลำแสงกรวยจากโคมเพดาน (จุดกำเนิดเหนือจอ) */
.mg-room .walk-dim {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    conic-gradient(from 0deg at 50% -12%,
      rgba(24, 18, 12, 0.62) 0deg,
      rgba(24, 18, 12, 0.62) 126deg,
      rgba(24, 18, 12, 0.40) 138deg,
      rgba(24, 18, 12, 0.14) 148deg,
      rgba(24, 18, 12, 0)   156deg,
      rgba(24, 18, 12, 0)   204deg,
      rgba(24, 18, 12, 0.14) 212deg,
      rgba(24, 18, 12, 0.40) 222deg,
      rgba(24, 18, 12, 0.62) 234deg,
      rgba(24, 18, 12, 0.62) 360deg);
  opacity: 0; /* JS ขับค่าตาม t ของกล้อง */
}
@media (min-width: 700px) {
  .mg-room .walk-dim {
    background:
      conic-gradient(from 0deg at 50% -35%,
        rgba(24, 18, 12, 0.62) 0deg,
        rgba(24, 18, 12, 0.62) 126deg,
        rgba(24, 18, 12, 0.40) 138deg,
        rgba(24, 18, 12, 0.14) 148deg,
        rgba(24, 18, 12, 0)   156deg,
        rgba(24, 18, 12, 0)   204deg,
        rgba(24, 18, 12, 0.14) 212deg,
        rgba(24, 18, 12, 0.40) 222deg,
        rgba(24, 18, 12, 0.62) 234deg,
        rgba(24, 18, 12, 0.62) 360deg);
  }
}
.mg-room .room-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(43, 31, 24, 0.14) 100%);
}

/* --- ชิ้นงานแต่ละชิ้น --- */
.mg-room .piece {
  position: relative;
  flex: 0 0 auto;
  width: min(560px, 86vw);
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 9vh;
  transition: transform 1.3s var(--cam-ease);
  will-change: transform;
}
.mg-room .spacer { flex: 0 0 calc(50vw - min(280px, 43vw)); }

.mg-room .spot {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 150%; height: 78%;
  background: radial-gradient(ellipse 46% 80% at 50% 0%,
    rgba(255, 240, 200, 0.55) 0%,
    rgba(255, 240, 200, 0.18) 45%,
    transparent 72%);
  opacity: 0.18;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.mg-room .piece.lit .spot { opacity: 1; }
.mg-room.overview-mode .spot { opacity: 0; }
.mg-room.overview-mode .end-wall { opacity: 0; transition: opacity 0.5s; }
.mg-room .end-wall { transition: opacity 0.5s 0.6s; }

.mg-room .art { display: flex; flex-direction: column; align-items: center; }
.mg-room .lamp {
  position: relative;
  width: 64px; height: 10px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, #8B6F47, #6B543A);
  box-shadow: 0 2px 5px rgba(43,31,24,0.3);
  margin-bottom: 12px;
}
.mg-room .lamp::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 26px; height: 5px; border-radius: 0 0 8px 8px;
  background: #FFE9B8;
  opacity: 0.4; transition: opacity 0.9s;
  box-shadow: 0 0 14px 4px rgba(255, 233, 184, 0.35);
}
.mg-room .piece.lit .lamp::after, .mg-room.overview-mode .lamp::after { opacity: 1; }

.mg-room .frame {
  position: relative;
  background: linear-gradient(135deg, #2B1F18 0%, #4A3826 48%, #2B1F18 100%);
  padding: clamp(12px, 2vw, 20px);
  box-shadow:
    0 24px 60px rgba(43, 31, 24, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer;
  filter: brightness(0.62) saturate(0.85);
  transform: scale(0.94);
  transition: filter 0.9s var(--ease), transform 0.9s var(--ease), box-shadow 0.9s;
}
.mg-room .frame::before {
  content: ''; position: absolute; inset: clamp(6px, 1vw, 10px);
  border: 1px solid rgba(201, 169, 97, 0.35);
  pointer-events: none;
}
.mg-room .piece.lit .frame {
  filter: brightness(1) saturate(1);
  transform: scale(1);
  box-shadow:
    0 30px 80px rgba(43, 31, 24, 0.45),
    0 0 60px rgba(255, 233, 184, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.mg-room.overview-mode .frame {
  filter: brightness(0.96) saturate(0.97);
  transform: scale(1);
  cursor: zoom-in;
}
.mg-room .frame .mat { background: #FAF6EE; padding: clamp(10px, 1.6vw, 18px); }
.mg-room .ph-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 44vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(139,115,85,0.04) 0 14px, transparent 14px 28px),
    #F4ECDE;
  border: 1.5px dashed rgba(139, 115, 85, 0.35);
}
.mg-room .ph-num {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(40px, 6vw, 64px);
  color: rgba(139, 115, 85, 0.4);
  font-style: italic;
  line-height: 1;
}
.mg-room .ph-text { font-size: 12px; color: rgba(139, 115, 85, 0.55); letter-spacing: 1px; }
/* ปุ่มฝากของ/คำในช่องว่าง — กดแล้วเปิดฟอร์มอัปโหลดทันที */
.mg-room .ph-add-btn {
  margin-top: 12px;
  font-family: inherit; font-size: 12.5px; color: #fff;
  background: linear-gradient(180deg, #C08A6B, var(--clay));
  border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(176, 125, 98, 0.32);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.mg-room .ph-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(176, 125, 98, 0.42);
}
.mg-room .note-empty .ph-add-btn { margin-top: 8px; font-size: 11.5px; padding: 7px 15px; }
.mg-room .frame img {
  display: block;
  width: 100%;
  max-height: 44vh;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.95);
  /* วางภาพเป็นเลเยอร์ GPU ของตัวเอง → ตอนซูมเครื่องแค่ย่อ/ขยายพื้นผิวที่ถอดรหัสไว้ (ลื่น) */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* หมายเหตุ: ตอนซูมใช้ภาพเล็ก (thumb) sepia จึงเบามาก ไม่ต้องปิด filter อีก
   → สีคงที่ตลอด ไม่เด้งเปลี่ยนตอนจบซูม (กันอาการ "ป๊อบ") */

/* ป้ายคำอธิบายใต้กรอบ */
.mg-room .plaque {
  margin-top: 22px;
  background: linear-gradient(180deg, #FFFDF8, #F6EDDD);
  border: 1px solid rgba(193, 154, 108, 0.4);
  border-radius: 4px;
  padding: 12px 22px;
  text-align: center;
  max-width: 86%;
  box-shadow: 0 6px 18px rgba(92, 74, 60, 0.14);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s;
  cursor: pointer;
}
.mg-room .piece.lit .plaque { opacity: 1; transform: translateY(0); }
.mg-room.overview-mode .plaque { opacity: 0.85; transform: none; transition-delay: 0s; }
.mg-room .plaque-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 16.5px; font-weight: 500; font-style: italic;
}
/* เรื่องเต็ม — คลี่ตามตัวแปร --reveal (0→1) สมการเดียวกับกล้อง */
.mg-room .plaque-story {
  display: block;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink);
  text-align: left;
  max-height: calc(var(--reveal, 0) * 30vh);
  opacity: var(--reveal, 0);
  margin-top: calc(var(--reveal, 0) * 10px);
  padding-top: calc(var(--reveal, 0) * 10px);
  border-top: 1px solid rgba(193, 154, 108, calc(var(--reveal, 0) * 0.3));
  transition: max-height 0.6s var(--ease), opacity 0.6s var(--ease),
              margin-top 0.6s var(--ease), padding-top 0.6s var(--ease);
}
.mg-room .plaque-sig {
  display: block;
  overflow: hidden;
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
  max-height: calc(var(--reveal, 0) * 3em);
  opacity: var(--reveal, 0);
  margin-top: calc(var(--reveal, 0) * 6px);
  transition: max-height 0.6s var(--ease), opacity 0.6s var(--ease), margin-top 0.6s var(--ease);
}
.mg-room.pinching .plaque-story, .mg-room.pinching .plaque-sig { transition: none !important; }
.mg-room .plaque-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; letter-spacing: 0.4px; }

/* --- ผนังท้ายสุด: CTA --- */
.mg-room .end-wall {
  position: relative;
  flex: 0 0 auto;
  width: min(520px, 90vw);
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 9vh;
}
.mg-room .end-card {
  text-align: center; padding: 40px 32px;
  border: 1.5px dashed rgba(176, 125, 98, 0.5);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.65);
  max-width: 380px;
}
.mg-room .end-card .big { font-size: 38px; margin-bottom: 12px; }
.mg-room .end-card h3 { font-family: 'IBM Plex Serif', serif; font-size: 20px; margin-bottom: 8px; color: var(--ink); }
.mg-room .end-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 18px; }
.mg-room .end-btn {
  font-family: inherit; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #C08A6B, var(--clay));
  border: none; border-radius: 999px; padding: 12px 28px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(176, 125, 98, 0.35);
}

/* --- UI มุมกว้าง --- */
.mg-room .ov-ui {
  position: absolute; left: 0; right: 0; top: 0; z-index: 10;
  /* clear the fixed top bar — the title used to sit UNDER it and the two texts
     read as one overlapping mess on entry. (playtest) */
  padding: calc(env(safe-area-inset-top, 0px) + 92px) 22px 0;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.mg-room.overview-mode .ov-ui { opacity: 1; }
/* ระหว่างซูม เครื่องยนต์คุมความจางเองทุกเฟรม → ปิด transition ไม่ให้หน่วงตามหลังกล้อง */
.mg-room.pinching .ov-ui, .mg-room.pinching .wall-nav, .mg-room.pinching .ov-bottom { transition: none !important; }
.mg-room .ov-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(19px, 3vw, 26px); color: var(--ink);
}
.mg-room .ov-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.mg-room .ov-submit {
  position: static;
  margin-top: 0;
  /* the .ov-ui wrapper is pointer-events:none (so the wall stays swipeable) —
     the button must opt back IN or it can't be pressed at all. (playtest bug) */
  pointer-events: auto;
  font-family: inherit; font-size: 13px; color: var(--clay);
  background: rgba(255,255,255,0.72); border: 1px solid var(--beige);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(176, 125, 98, 0.16);
  transition: background var(--transition), color var(--transition);
}
.mg-room .ov-submit:hover { background: var(--clay); color: #fff; border-color: var(--clay); }

/* จุดเปลี่ยนผนัง — กดจุดไหนไปผนังนั้น */
.mg-room .wall-nav {
  position: absolute; left: 50%; bottom: 86px; z-index: 10;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.mg-room.overview-mode .wall-nav { opacity: 1; pointer-events: auto; }
.mg-room .wall-dot {
  width: 32px; height: 32px; min-height: 0 !important;
  border: none; background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mg-room .wall-dot::after {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(92, 74, 60, 0.25);
  transition: all 0.35s var(--ease);
}
.mg-room .wall-dot:hover::after { background: rgba(92, 74, 60, 0.45); }
.mg-room .wall-dot.active::after {
  width: 22px; border-radius: 5px;
  background: var(--clay);
}

/* แถวปุ่มล่างของมุมกว้าง — "เดินชมตามลำดับ" + "เพิ่มภาพของฉัน" อยู่ด้วยกัน */
.mg-room .ov-bottom {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 11;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: max-content; max-width: 94vw; flex-wrap: wrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.mg-room.overview-mode .ov-bottom { opacity: 1; pointer-events: auto; }
.mg-room .ov-walk-btn {
  position: static; z-index: 10;
  transform: none;
  font-family: inherit; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #C08A6B, var(--clay));
  border: none; border-radius: 999px; padding: 12px 30px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(176, 125, 98, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.mg-room .ov-walk-btn, .mg-room .ov-submit { opacity: 1 !important; pointer-events: auto; }

/* ปุ่มกลับมุมกว้าง (โหมดเดินชม) */
.mg-room .ov-back {
  position: absolute; top: 84px; right: 16px; z-index: 12;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(193,154,108,0.35);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s;
}
.mg-room .ov-back.show { opacity: 1; pointer-events: auto; }

/* ปุ่มถอยกลับหน้าทางเข้า (มุมกว้าง) */
.mg-room .ov-exit {
  position: absolute; top: 16px; left: 16px; z-index: 12;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(193,154,108,0.35);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.mg-room.overview-mode .ov-exit { opacity: 1; pointer-events: auto; }

/* --- HUD ความคืบหน้า (โหมดเดินชม) --- */
.mg-room .hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* playtest: ปุ่ม ? (ลอยมุมซ้ายล่าง) บังตัวนับจำนวนภาพ → เว้นที่ให้มัน */
  padding: 14px 22px 18px 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  z-index: 10; pointer-events: none;
  transition: opacity 0.6s;
}
.mg-room.overview-mode .hud { opacity: 0; }
.mg-room .hud-count {
  font-family: 'IBM Plex Serif', serif; font-style: italic;
  font-size: 13px; color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(193,154,108,0.35);
  padding: 6px 14px; border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mg-room .hud-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(92, 74, 60, 0.15);
  overflow: hidden;
}
.mg-room .hud-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--clay));
  border-radius: 2px;
  transition: width 0.2s linear;
}
.mg-room .walk-hint {
  pointer-events: none;
  position: absolute; bottom: 64px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px; color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(193,154,108,0.3);
  padding: 9px 20px; border-radius: 999px;
  z-index: 10;
  animation: mgHintBob 2.4s ease-in-out infinite;
  transition: opacity 0.8s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mg-room .walk-hint.gone, .mg-room.overview-mode .walk-hint { opacity: 0; }
@keyframes mgHintBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -6px); }
}

/* ฝุ่นละอองในแสง */
.mg-room .mote {
  position: absolute; border-radius: 50%;
  background: rgba(255, 240, 200, 0.5);
  pointer-events: none; z-index: 4;
  animation: mgMoteFloat linear infinite;
}
@keyframes mgMoteFloat {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.7; }
  88% { opacity: 0.4; }
  100% { transform: translateY(-46vh); opacity: 0; }
}

@media (max-width: 600px) {
  .mg-room .plaque-title { font-size: 14.5px; }
}

/* --- โพสต์อิทคำพูด (โซน 💌 ใช้เครื่องยนต์แกลเลอรีเดียวกัน แต่เป็นกระดาษแปะผนัง) --- */
.mg-room {
  --note1: #FFF3B0; /* เหลือง */
  --note2: #FFDDE6; /* ชมพู */
  --note3: #D6EFFF; /* ฟ้า */
  --note4: #E0F5D9; /* เขียว */
  --note5: #FFE9CF; /* พีช */
}
.mg-room .note {
  position: relative;
  width: min(400px, 76vw);
  min-height: min(340px, 64vw);
  padding: clamp(28px, 4vw, 46px) clamp(24px, 3.4vw, 40px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  box-sizing: border-box;
  background: var(--note1);
  box-shadow: 0 14px 34px rgba(43, 31, 24, 0.22);
  cursor: pointer;
  filter: brightness(0.72) saturate(0.9);
  transform: scale(0.94) rotate(var(--tilt, 0deg));
  transition: filter 0.9s var(--ease), transform 0.9s var(--ease), box-shadow 0.9s;
}
/* มุมพับล่างขวา */
.mg-room .note::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 36px; height: 36px;
  background: linear-gradient(315deg, rgba(43,31,24,0.13) 0%, rgba(43,31,24,0.05) 46%, transparent 50%);
}
/* เทปกาวแปะหัวกระดาษ */
.mg-room .note-tape {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  width: 88px; height: 26px;
  background: rgba(255, 253, 247, 0.55);
  border-left: 1px dashed rgba(139, 115, 85, 0.25);
  border-right: 1px dashed rgba(139, 115, 85, 0.25);
  box-shadow: 0 2px 6px rgba(43, 31, 24, 0.10);
}
.mg-room .note-c0 { background: var(--note1); }
.mg-room .note-c1 { background: var(--note2); }
.mg-room .note-c2 { background: var(--note3); }
.mg-room .note-c3 { background: var(--note4); }
.mg-room .note-c4 { background: var(--note5); }
.mg-room .tilt0 { --tilt: -1.8deg; }
.mg-room .tilt1 { --tilt: 0.9deg; }
.mg-room .tilt2 { --tilt: 2.1deg; }
.mg-room .note-text {
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 2.05;
  font-weight: 500;
  color: #4A3B2E;
}
/* สถานะไฟ — เหมือนกรอบภาพ: มุมกว้างสว่างรอ เดินชมสว่างเฉพาะใบที่ดู */
.mg-room .piece.lit .note {
  filter: brightness(1) saturate(1);
  transform: scale(1) rotate(var(--tilt, 0deg));
  box-shadow: 0 22px 50px rgba(43, 31, 24, 0.28), 0 0 60px rgba(255, 233, 184, 0.10);
}
.mg-room.overview-mode .note {
  filter: brightness(0.97) saturate(0.97);
  transform: scale(1) rotate(var(--tilt, 0deg));
  cursor: zoom-in;
}
/* ปุ่ม "อ่านทั้งหมด" บนโพสต์อิทคำยาว (playtest: limit ความยาว + คลิกอ่านเต็ม) */
.mg-room .note-more {
  display: inline-block;
  margin-top: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: rgba(74, 59, 46, 0.72);
  text-decoration: underline dotted;
  padding: 2px 4px;
}
.mg-room .note-more:hover { color: rgba(74, 59, 46, 0.95); }
/* ลายเซ็นมุมล่าง — อาชีพ · อายุ ตัวเล็กๆ บนกระดาษ (ไม่ใช่ป้ายแยก) */
.mg-room .note-sig {
  position: absolute;
  right: 18px; bottom: 12px;
  font-size: 10.5px;
  font-style: italic;
  color: rgba(74, 59, 46, 0.55);
  letter-spacing: 0.3px;
  pointer-events: none;
}
/* กันลายเซ็นชนมุมพับ: ขยับมุมพับไปซ้ายล่างแทน */
.mg-room .note:not(.note-empty)::after {
  right: auto; left: 0;
  background: linear-gradient(45deg, rgba(43,31,24,0.13) 0%, rgba(43,31,24,0.05) 46%, transparent 50%);
}

/* โพสต์อิทเปล่า — รอคำใหม่ */
.mg-room .note-empty {
  background: rgba(255, 253, 248, 0.6);
  border: 1.5px dashed rgba(139, 115, 85, 0.35);
  box-shadow: none;
  gap: 8px;
}
.mg-room .note-empty .ph-num { font-size: clamp(30px, 4vw, 46px); }
.mg-room .note-empty-text {
  font-size: 12.5px;
  color: rgba(139, 115, 85, 0.6);
  letter-spacing: 0.5px;
}
/* ปุ่มท้ายผนังแบบลิงก์ (ฝากคำ → Google Form) ให้หน้าตาเหมือนปุ่มปกติ */
.mg-room a.end-btn {
  display: inline-block;
  text-decoration: none;
}

/* ============================================================
   Pixel cat — Tamagotchi-style companion (ห้องอยู่กับแมว)
   ============================================================ */
.petcat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  margin: 6px auto 0;
}
/* ---- Name bar ---- */
.petcat-namebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.petcat-paw { font-size: 16px; }
.petcat-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--clay, #d8523f);
  background: none;
  border: none;
  border-bottom: 1.5px dashed transparent;
  cursor: pointer;
  padding: 2px 4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.petcat-name:hover { border-bottom-color: rgba(216, 82, 63, 0.4); }
.petcat-name.unnamed { color: rgba(139, 115, 85, 0.7); font-style: italic; }
.petcat-name-edit { font-size: 12px; color: rgba(139, 115, 85, 0.55); }
.petcat-name-input {
  font-family: 'IBM Plex Serif', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--clay, #d8523f);
  text-align: center;
  background: #fff;
  border: 1.5px solid rgba(216, 82, 63, 0.4);
  border-radius: 8px;
  padding: 3px 10px;
  width: 180px;
  outline: none;
}
/* ---- Stat meters ---- */
.petcat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.petstat {
  display: flex;
  align-items: center;
  gap: 9px;
}
.petstat-icon {
  font-size: 19px;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex: none;
}
.petstat-meta { flex: 1; min-width: 0; }
.petstat-name {
  display: block;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink, #5b4636);
  margin-bottom: 3px;
}
.petstat-track {
  height: 9px;
  border-radius: 6px;
  background: rgba(176, 102, 54, 0.14);
  overflow: hidden;
}
.petstat-fill {
  height: 100%;
  width: 60%;
  border-radius: 6px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.petstat[data-stat="hunger"] .petstat-fill { background: linear-gradient(90deg, #f0a85a, #e8862f); }
.petstat[data-stat="happy"]  .petstat-fill { background: linear-gradient(90deg, #f6c453, #efb022); }
.petstat[data-stat="clean"]  .petstat-fill { background: linear-gradient(90deg, #7ec6e8, #4ba6d6); }
.petstat[data-stat="energy"] .petstat-fill { background: linear-gradient(90deg, #9bd47e, #5fb83f); }
.petstat-fill.bump { animation: petstat-bump 0.5s ease; }
@keyframes petstat-bump {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

/* ---- Stage ---- */
.petcat-stage {
  position: relative;
  height: 270px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 50% 18%, #fff7ee 0%, #fdeede 55%, #f7e0c9 100%);
  border: 1.5px solid rgba(176, 102, 54, 0.16);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.6s var(--ease, ease), filter 0.6s ease;
}
.petcat-stage::after {  /* soft floor band */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(176, 102, 54, 0) 0%, rgba(176, 102, 54, 0.10) 100%);
}
.petcat-stage.dim {
  background: radial-gradient(120% 82% at 50% 20%, #4c3a34 0%, #362825 58%, #241b18 100%) !important;
  filter: saturate(0.92);
}
.petcat-stage.bath {
  background: radial-gradient(120% 80% at 50% 16%, #eaf6fb 0%, #d2ecf6 55%, #b6dcef 100%) !important;
}
.petcat-stage.evening {
  background: radial-gradient(120% 80% at 50% 16%, #fff0e0 0%, #fbd9b8 55%, #f3b78a 100%);
}
.petcat-stage.night {
  background:
    radial-gradient(100% 68% at 50% 6%, rgba(226,162,98,0.20) 0%, rgba(226,162,98,0) 56%),
    radial-gradient(120% 92% at 50% 22%, #4c3a32 0%, #382924 56%, #251b18 100%);
  box-shadow: inset 0 -56px 110px rgba(20,12,8,0.34);
}
.petcat-stage.night .petstat-name,
.petcat-stage.night .petcat-msg { color: inherit; }
/* mover = horizontal walk position (transition makes it glide) */
.petcat-mover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.3, 1);
  will-change: transform;
}
.petcat-shadow {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 18px;
  background: rgba(120, 80, 50, 0.16);
  border-radius: 50%;
  filter: blur(1px);
  animation: petcat-shadow 3.4s ease-in-out infinite;
}
@keyframes petcat-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
  50% { transform: translateX(-50%) scaleX(0.9); opacity: 0.4; }
}
/* bobber = vertical bounce (breathing idle, walking, hop, wiggle, nom) */
.petcat-bobber {
  position: relative;
  z-index: 2;
  animation: petcat-bob 3.4s ease-in-out infinite;
}
@keyframes petcat-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.petcat-bobber.walking { animation: petcat-walk 0.3s ease-in-out infinite; }
@keyframes petcat-walk {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.petcat-bobber.wiggle { animation: petcat-wiggle 0.55s ease; }
@keyframes petcat-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
.petcat-bobber.hop { animation: petcat-hop 0.5s ease; }
@keyframes petcat-hop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-20px); }
}
.petcat-bobber.nom { animation: petcat-nom 0.46s ease; }
@keyframes petcat-nom {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
.petcat-bobber.stretch { animation: petcat-stretch 0.82s ease; }
@keyframes petcat-stretch {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  40% { transform: scaleY(0.82) scaleX(1.12) translateY(6px); }
  70% { transform: scaleY(1.08) scaleX(0.96) translateY(-3px); }
}
.petcat-bobber.spin { animation: petcat-spin 0.76s ease-in-out; }
@keyframes petcat-spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
/* sprite = facing direction (flip) only — no transform conflict with bobber */
.petcat-sprite {
  position: relative;
  image-rendering: pixelated;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.petcat-sprite.flip { transform: scaleX(-1); }
.petcat-dot { position: absolute; border-radius: 1px; }

/* floating particles + props */
.petcat-fx {
  position: absolute;
  z-index: 3;
  font-size: 22px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: petcat-float 1.9s ease-out forwards;
}
@keyframes petcat-float {
  0% { opacity: 0; transform: translateY(6px) scale(0.6); }
  20% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-72px) scale(0.8); }
}
.petcat-prop {
  position: absolute;
  z-index: 1;
  font-size: 30px;
  pointer-events: none;
}
.petcat-prop.bowl { bottom: 26px; }
.petcat-prop.yarn { bottom: 30px; }
@keyframes petcat-yarn {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-8px) rotate(8deg); }
}
.petcat-prop.zzz {
  top: 40px;
  font-size: 22px;
  animation: petcat-float 2.4s ease-out infinite;
}
/* falling water droplet (bath) */
.petcat-drop {
  position: absolute;
  top: -10px;
  z-index: 3;
  font-size: 16px;
  pointer-events: none;
  animation: petcat-drop 1.1s cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
@keyframes petcat-drop {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0.5; transform: translateY(150px); }
}

/* ---- Message + bond ---- */
.petcat-msg {
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink, #5b4636);
  min-height: 2.6em;
  transition: opacity 0.35s var(--ease, ease);
}
.petcat-msg.swap { opacity: 0; }
/* dismissible message bubble */
.petcat-msg-wrap { position: relative; }
.petcat-msg-wrap.msg-dismissed { display: none; }
.petcat-msg-dismiss {
  position: absolute;
  top: -8px; right: -8px;
  flex: none;
  width: 28px; height: 28px;
  min-width: 28px; min-height: 28px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(176, 102, 54, 0.22);
  background: rgba(255, 252, 248, 0.96);
  color: var(--clay, #d8523f);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(120, 80, 50, 0.16);
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 5;
}
.petcat-msg-dismiss:hover { transform: scale(1.1); background: #fff; }
body.petgame-mode .petcat-msg-wrap {
  position: absolute;
  top: 112px; left: 50%;
  transform: translateX(-50%);
  width: min(86%, 440px);
  z-index: 4;
}
body.petgame-mode .petcat-msg-wrap .petcat-msg {
  position: relative !important;
  top: auto !important; bottom: auto !important; left: auto !important;
  transform: none !important;
  width: 100% !important;
}
.petcat-bond {
  text-align: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(139, 115, 85, 0.78);
}
.petcat-bond b { color: var(--clay, #d8523f); font-weight: 600; }
.petcat-actions { justify-content: center; }

/* ---- Trays: wardrobe + sticker book ---- */
.petcat-tray {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.petcat-tray-head {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(139, 115, 85, 0.7);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.petcat-tray-hint {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(139, 115, 85, 0.55);
}
.petcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.petcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink, #5b4636);
  background: rgba(255, 247, 238, 0.9);
  border: 1.5px solid rgba(176, 102, 54, 0.2);
  border-radius: 999px;
  padding: 5px 13px 5px 9px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.12s ease;
}
.petcat-chip:hover { transform: translateY(-1px); }
.petcat-chip .petcat-chip-pix { display: inline-flex; }
.petcat-chip.active {
  border-color: var(--clay, #d8523f);
  background: rgba(216, 82, 63, 0.1);
  color: var(--clay, #d8523f);
  font-weight: 500;
}
.petcat-chip.locked {
  cursor: default;
  opacity: 0.5;
  filter: grayscale(0.7);
}
.petcat-chip.locked:hover { transform: none; }
.petcat-stickers {
  display: grid;
  /* playtest: 8 คอลัมน์ตายตัวล้นขอบจอมือถือ → ปรับตามความกว้างจริง (แถวใหม่เลื่อนดูใน sheet ได้) */
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 8px;
}
.petcat-sticker {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 247, 238, 0.7);
  border: 1.5px solid rgba(176, 102, 54, 0.16);
  border-radius: 10px;
  position: relative;
  transition: transform 0.18s ease, border-color 0.2s ease;
}
.petcat-sticker.got { border-color: rgba(216, 82, 63, 0.3); background: rgba(216, 82, 63, 0.06); }
.petcat-sticker.locked .petcat-chip-pix { opacity: 0.16; filter: grayscale(1); }
.petcat-sticker .lock-q {
  position: absolute;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: rgba(139, 115, 85, 0.4);
}
/* ชื่อระดับ streak ไดอารี่ (playtest) */
.drw-level {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--clay, #b07a65);
  background: rgba(216, 82, 63, 0.08);
  border: 1px solid rgba(216, 82, 63, 0.22);
  border-radius: 999px; padding: 2px 9px;
  vertical-align: 1px;
}
.petcat-sticker.pop { animation: petcat-sticker-pop 0.5s ease; }
@keyframes petcat-sticker-pop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* accessory overlay on the cat */
.petcat-acc {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 3;
}
/* attention bubble */
.petcat-call {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  z-index: 5;
  opacity: 0;
  font-size: 20px;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.petcat-call.show { opacity: 1; transform: translateX(-50%) scale(1); }
@media (max-width: 420px) {
  .petcat-stats { grid-template-columns: 1fr; }
  .petcat-stage { height: 240px; }
  .petcat-stickers { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Immersive full-screen cat mode (body.petgame-mode)
   Entering the cat turns the pane into a full-screen "cat's room"
   game: a room scene fills the viewport, with a HUD overlaid.
   ============================================================ */
.petcat-gamechrome { display: none; }
.petroom-decor { display: none; }

body.petgame-mode { overflow: hidden; }

/* lift the active cat pane onto a full-screen game layer */
body.petgame-mode .alone-pane.petpane.active {
  position: fixed;
  inset: 0;
  z-index: 4000;
  margin: 0;
  padding: 0;
  display: block;
  animation: petgame-in 0.5s ease both;
}
@keyframes petgame-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}
body.petgame-mode .alone-pane.petpane > .alone-h3,
body.petgame-mode .alone-pane.petpane > .alone-sub { display: none; }

body.petgame-mode .petcat {
  position: fixed;
  inset: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  gap: 0;
  display: block;
}

/* stage becomes the whole room */
body.petgame-mode .petcat-stage {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  border: none;
  padding-bottom: 0;
  align-items: center;   /* centre the pet inside the stat ring (ring is centred at 47%) */
  /* flat 8-bit wall */
  background: linear-gradient(180deg, #fcefdd 0 50%, #f8e6cf 50% 100%);
  image-rendering: pixelated;
}
body.petgame-mode .petcat-stage::after { display: none; }

/* ---- room scene ---- */
body.petgame-mode .petroom-decor {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
}
body.petgame-mode .petroom-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  /* 8-bit floorboards — hard-edged planks */
  background:
    linear-gradient(180deg, #c79a5e 0 10px, transparent 10px),
    repeating-linear-gradient(90deg, #dcb274 0 34px, #d3a967 34px 68px);
  border-top: 4px solid #a87f4a;
}
/* pixel mat / shadow — sits directly under the cat's feet */
body.petgame-mode .petroom-rug {
  position: absolute;
  left: 50%; bottom: 38%;
  transform: translate(-50%, 50%);
  width: min(46%, 280px); height: 46px;
  background: rgba(150, 96, 56, 0.18);
  border-radius: 50%;
}
body.petgame-mode .petroom-window {
  position: absolute;
  top: 11%; left: 9%;
  width: min(24%, 210px); height: 28%;
  background: #fff;
  border: 5px solid #b98c52;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(120, 80, 50, 0.18);
}
body.petgame-mode .petroom-sky {
  position: absolute; inset: 0;
  /* stepped 8-bit sky bands */
  background: linear-gradient(180deg, #bfe3f2 0 34%, #d4ecf6 34% 67%, #e9f6fb 67% 100%);
}
body.petgame-mode .petroom-window::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px;
  transform: translateX(-50%); background: #c9a574;
}
body.petgame-mode .petroom-window::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  transform: translateY(-50%); background: #c9a574;
}
body.petgame-mode .petroom-orb {
  position: absolute; top: 16%; right: 16%;
  width: 26px; height: 26px; border-radius: 6px;
  background: #ffd45e;
  box-shadow: 0 0 0 4px #ffe9a8;
}
body.petgame-mode .petroom-shelf {
  position: absolute;
  top: 31%; right: 11%;
  width: min(20%, 150px); height: 8px;
  background: #b98c52;
  border-radius: 0;
  box-shadow: 0 4px 0 rgba(120, 80, 50, 0.16);
}
body.petgame-mode .petroom-plant {
  position: absolute;
  top: calc(31% - 30px); right: 15%;
  width: 24px; height: 30px;
  background:
    radial-gradient(circle at 50% 32%, #8bbf6a 0 42%, transparent 43%),
    radial-gradient(circle at 28% 50%, #7cb35c 0 30%, transparent 31%),
    radial-gradient(circle at 72% 50%, #7cb35c 0 30%, transparent 31%);
  background-repeat: no-repeat;
}
body.petgame-mode .petroom-plant::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 13px; background: #c98a5a; border-radius: 0;
}
/* evening / night recolours */
body.petgame-mode .petcat-stage.evening .petroom-sky { background: linear-gradient(180deg, #ffd9a8, #ffb27a); }
body.petgame-mode .petcat-stage.night .petroom-floor { background: linear-gradient(180deg, #3e2d24, #2a1d18); border-top-color: rgba(255, 222, 186, 0.09); }
body.petgame-mode .petcat-stage.night .petroom-sky { background: linear-gradient(180deg, #2b2338, #3b3450); }
body.petgame-mode .petcat-stage.night .petroom-orb { background: radial-gradient(circle, #f4e7a4, #d8c25e); box-shadow: 0 0 24px rgba(242, 224, 138, 0.75); }

/* props (food bowl, yarn) sit right by the cat in fullscreen */
body.petgame-mode .petcat-prop.bowl { bottom: 33% !important; }
body.petgame-mode .petcat-prop.yarn { bottom: 34% !important; }

/* gentle sleeping breath */
.petcat-bobber.sleeping { animation: petcat-sleep 3.8s ease-in-out infinite !important; }
@keyframes petcat-sleep {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(3px) scale(1.04, 0.95); }
}

/* low-mood droop: slower, heavier bob + slightly dimmed */
.petcat-bobber.mopey { animation: petcat-mope 4.6s ease-in-out infinite !important; filter: saturate(0.82) brightness(0.95); }
@keyframes petcat-mope {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(5px); }
}

/* ---- nap: starry night scene ---- */
body.petgame-mode .petcat-stage.napping {
  background: linear-gradient(180deg, #2c2542 0 52%, #241d36 52% 100%) !important;
  filter: none;
}
@keyframes petcatNapFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Night recolour that FADES IN on the sky & floor (which sit behind the cat),
   so the room dims gradually while the cat stays fully visible sleeping. */
body.petgame-mode .petcat-stage.napping .petroom-sky::after,
body.petgame-mode .petcat-stage.napping .petroom-floor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; animation: petcatNapFade 1.4s ease forwards;
}
body.petgame-mode .petcat-stage.napping .petroom-sky::after {
  background:
    radial-gradient(2px 2px at 14% 22%, rgba(255,255,255,0.95) 99%, transparent),
    radial-gradient(2px 2px at 72% 16%, rgba(255,255,255,0.9) 99%, transparent),
    radial-gradient(1.5px 1.5px at 52% 30%, rgba(255,255,255,0.85) 99%, transparent),
    radial-gradient(1.5px 1.5px at 33% 38%, rgba(255,255,255,0.7) 99%, transparent),
    radial-gradient(2px 2px at 88% 26%, rgba(255,255,255,0.85) 99%, transparent),
    radial-gradient(1.5px 1.5px at 24% 48%, rgba(255,255,255,0.6) 99%, transparent),
    linear-gradient(180deg, #241d36, #2c2542);
}
body.petgame-mode .petcat-stage.napping .petroom-floor::after {
  background: linear-gradient(180deg, #3e2d24, #2a1d18);
}
body.petgame-mode .petcat-stage.napping .petroom-orb {
  background: #f2e7b0;
  box-shadow: 0 0 0 4px rgba(242, 231, 176, 0.32);
  transition: background 1.4s ease, box-shadow 1.4s ease;
}

/* ---- game chrome (exit + tools) ---- */
body.petgame-mode .petcat-gamechrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 18px;
  z-index: 7;
}
.petcat-exit {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--ink, #5b4636);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(176, 102, 54, 0.22);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}
.petcat-exit:hover { transform: translateX(-2px); background: #fff; }
.petcat-exit-arrow { font-size: 15px; }
.petcat-tools { display: flex; gap: 8px; }
.petcat-tool {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(176, 102, 54, 0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.petcat-tool:hover { transform: translateY(-2px); background: #fff; }
.petcat-tool.active { background: rgba(216, 82, 63, 0.14); border-color: var(--clay, #d8523f); }

/* ---- HUD: name, stats, bond, message overlaid on the room ---- */
body.petgame-mode .petcat-namebar {
  position: absolute;
  top: 62px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 999px;
  padding: 4px 18px;
  text-shadow: 0 1px 6px rgba(255,250,244,0.9);
}
body.petgame-mode .petcat-bond {
  position: absolute;
  top: 104px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  background: rgba(255, 250, 244, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 18px rgba(40, 28, 20, 0.14);
  border-radius: 999px;
  padding: 3px 14px;
}
body.petgame-mode .petcat-stats {
  position: absolute;
  top: 144px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 12px;
  grid-template-columns: none;
  background: rgba(255, 250, 244, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 26px rgba(40, 28, 20, 0.16);
  border-radius: 16px;
  padding: 10px 18px;
  max-width: 92vw;
}
body.petgame-mode .petstat {
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 56px;
}
/* playtest: อ่านสถานะไม่ออก — โชว์ชื่อสถานะ (อิ่ม/สุขใจ/สะอาด/พลัง) ตัวเล็กใต้ไอคอน สีเข้มชัด */
body.petgame-mode .petstat-name {
  display: block;
  font-size: 10px; font-weight: 600;
  color: #4a3b2e; text-align: center;
  margin: 0; line-height: 1.2;
}
body.petgame-mode .petstat-meta { width: 100%; display: flex; flex-direction: column; gap: 3px; }
body.petgame-mode .petcat-msg {
  position: absolute;
  left: 50%; bottom: 150px; transform: translateX(-50%);
  z-index: 5;
  width: min(90%, 520px);
  margin: 0;
  text-align: center;
  background: rgba(255, 250, 244, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 26px rgba(40, 28, 20, 0.16);
  border-radius: 16px;
  padding: 12px 18px;
}

/* ---- action dock ---- */
body.petgame-mode .petcat-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 22px 14px 18px;
  background: linear-gradient(180deg, rgba(255, 247, 238, 0) 0%, rgba(255, 247, 238, 0.92) 46%);
}
/* On the warm night / sleep scene, blend the dock into the dark instead of a hard light band */
body.petgame-mode .petcat:has(.petcat-stage.night) .petcat-actions,
body.petgame-mode .petcat:has(.petcat-stage.dim) .petcat-actions {
  background: linear-gradient(180deg, rgba(28,19,15,0) 0%, rgba(28,19,15,0.55) 44%, rgba(28,19,15,0.78) 100%);
}

/* ---- wardrobe / moments as bottom sheets ---- */
body.petgame-mode .petcat-tray {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 112%);
  z-index: 9;
  width: min(94%, 560px);
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.2);
  padding: 22px 22px 28px;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 64vh;
  overflow-y: auto;
}
body.petgame-mode .petcat-tray::before {
  content: "";
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 4px; border-radius: 999px;
  background: rgba(176, 102, 54, 0.3);
}
body.petgame-mode .petcat-tray.sheet-open { transform: translate(-50%, 0); }
body.petgame-mode .petcat-sheet-backdrop {
  position: absolute; inset: 0; z-index: 8;
  background: rgba(40, 28, 20, 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
body.petgame-mode .petcat-sheet-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
  body.petgame-mode .petcat-stats { gap: 8px; padding: 8px 12px; }
  body.petgame-mode .petstat { width: 46px; }
  body.petgame-mode .petcat-actions .cat-action { font-size: 12px; padding: 8px 11px; }
}

/* ============================================================
   Pet game — polished HUD: stat ring, speech bubble, dock
   (only in fullscreen petgame-mode)
   ============================================================ */
.petring { display: none; }
body.petgame-mode .petring {
  display: none; /* playtest: ใช้หลอดแนวนอนแทน — ซ่อนวงแหวนสถานะที่ซ้ำ */
  position: absolute;
  top: 47%;
  left: 50%;
  width: min(86vw, 384px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
body.petgame-mode .petring svg { width: 100%; height: 100%; overflow: visible; }
.petring svg circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}
/* quadrant rotations — 72° arcs centred NE / SE / SW / NW with even gaps */
.petring .a-ne { transform: rotate(-81deg); }
.petring .a-se { transform: rotate(9deg); }
.petring .a-sw { transform: rotate(99deg); }
.petring .a-nw { transform: rotate(189deg); }
.petring-track { stroke-dasharray: 20 80; stroke: rgba(255,255,255,0.55); }
.petring-fill  { stroke-dasharray: 0 100; transition: stroke-dasharray 0.6s cubic-bezier(0.22,1,0.36,1); }
.petring-fill.s-happy  { stroke: #9ec48a; stroke-dasharray: calc(var(--happy,60)  * 0.2) 100; }
.petring-fill.s-hunger { stroke: #ecc89a; stroke-dasharray: calc(var(--hunger,60) * 0.2) 100; }
.petring-fill.s-energy { stroke: #9ec6e0; stroke-dasharray: calc(var(--energy,60) * 0.2) 100; }
.petring-fill.s-clean  { stroke: #e6a9b4; stroke-dasharray: calc(var(--clean,60)  * 0.2) 100; }
/* corner labels */
.petring-lbl {
  position: absolute;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(91,70,54,0.82);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(255,250,244,0.85);
}
.petring-lbl.lbl-ne { top: 12%;  right: -6%;  }
.petring-lbl.lbl-se { bottom: 12%; right: -6%; }
.petring-lbl.lbl-sw { bottom: 12%; left: -6%;  }
.petring-lbl.lbl-nw { top: 12%;  left: -6%;   }

/* playtest: fullscreen ใช้หลอดสถานะแนวนอน (แบบ The Sims) แทนวงแหวน — ไม่โชว์สถานะซ้ำสองแบบ */
body.petgame-mode .petcat-bond { display: none; }

/* speech bubble — move greeting to the top above the pet */
body.petgame-mode .petcat-msg {
  top: 112px;
  bottom: auto;
  width: min(86%, 440px);
  border-radius: 22px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 20px;
}
body.petgame-mode .petcat-msg::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: inherit;
  border-right: 1px solid rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.55);
}

/* ---- action dock as a rounded card ---- */
body.petgame-mode .petcat-actions {
  left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: none;
  width: auto;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 18px 10px 14px;
  border-radius: 24px;
  background: rgba(255, 252, 248, 0.55) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(176, 102, 54, 0.12);
  box-shadow: 0 8px 30px rgba(40, 28, 20, 0.12);
  overflow-x: auto;
}
body.petgame-mode .petcat-actions::-webkit-scrollbar { display: none; }
body.petgame-mode .petcat-actions::before { display: none; }
body.petgame-mode .petcat-actions .cat-action {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 70px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}
body.petgame-mode .petcat-actions .cat-action:hover { background: transparent; transform: none; }
body.petgame-mode .cat-action .cat-ico {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.06), 0 3px 8px rgba(40,28,20,0.10);
  transition: transform 0.14s ease;
}
body.petgame-mode .cat-action:hover .cat-ico { transform: translateY(-3px); }
body.petgame-mode .cat-action:active .cat-ico { transform: scale(0.92); }
body.petgame-mode .cat-action .cat-lbl {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--ink, #5b4636);
  font-weight: 500;
}
/* pastel icon backgrounds per action */
body.petgame-mode .cat-action[data-pet-action="feed"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="feed"] .cat-ico { background: #d7e7c9; }
body.petgame-mode .cat-action[data-pet-action="pet"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="pet"] .cat-ico { background: #f4d4c4; }
body.petgame-mode .cat-action[data-pet-action="play"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="play"] .cat-ico { background: #cfe3ee; }
body.petgame-mode .cat-action[data-pet-action="bath"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="bath"] .cat-ico { background: #d8ecf4; }
body.petgame-mode .cat-action[data-pet-action="sleep"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="sleep"] .cat-ico { background: #e7ddf0; }
body.petgame-mode .cat-action[data-pet-action="talk"] .cat-ico,
body.petgame-mode .cat-action[data-dog-action="talk"] .cat-ico { background: #f6e7c8; }

/* keep dock light even on night/dim scenes */
body.petgame-mode .petcat:has(.petcat-stage.night) .petcat-actions,
body.petgame-mode .petcat:has(.petcat-stage.dim) .petcat-actions {
  background: rgba(255, 252, 248, 0.55) !important;
}

@media (max-width: 480px) {
  body.petgame-mode .petcat-actions { gap: 0; padding: 22px 6px 14px; }
  body.petgame-mode .petcat-actions .cat-action { width: 60px; font-size: 11px; }
  body.petgame-mode .cat-action .cat-ico { width: 46px; height: 46px; font-size: 21px; }
  body.petgame-mode .petring { width: 84vw; }
}

/* ============================================================
   Pins — pin-to-home buttons + home shortcuts
   ============================================================ */
.pin-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto;
  margin-left: 10px; vertical-align: middle;
  padding: 4px; border-radius: 0;
  border: none; background: none;
  color: var(--slate); font-family: inherit; font-size: 12px;
  cursor: pointer; transition: color var(--transition), transform var(--transition);
}
/* playtest: ปุ่ม fav = ดาวเปล่าๆ (เอาวงกลม/พื้นหลังออก) · ไม่ใหญ่เกินไป */
.pin-toggle:hover { color: var(--gold); transform: scale(1.1); }
.pin-toggle.pinned { color: var(--gold); background: none; }
.pin-toggle svg { flex-shrink: 0; width: 18px; height: 18px; }
.pin-toggle-diary { margin: 0 0 16px; }

/* Floating launcher dock (every page) */
.pin-dock {
  position: fixed; z-index: 1400;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 7px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 26px rgba(60, 48, 38, 0.14);
  touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
  transition: gap 0.45s cubic-bezier(0.34, 1.4, 0.5, 1), padding 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.pin-dock.grabbing { cursor: grabbing; box-shadow: 0 14px 34px rgba(60, 48, 38, 0.24); }
.pin-dock[hidden] { display: none; }

/* collapse toggle */
.pin-dock-toggle {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--clay); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(193, 141, 107, 0.4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-dock-toggle:hover { transform: scale(1.08); }
.pin-dock-toggle .pdt-star,
.pin-dock-toggle .pdt-chev {
  position: absolute; transition: opacity 0.3s var(--ease), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-dock-toggle .pdt-star { font-size: 17px; opacity: 0; transform: scale(0.5) rotate(-90deg); }
.pin-dock-toggle .pdt-chev { font-size: 20px; line-height: 1; transform: translateY(-2px) rotate(180deg); }
.pin-dock.collapsed .pin-dock-toggle .pdt-star { opacity: 1; transform: scale(1) rotate(0); }
.pin-dock.collapsed .pin-dock-toggle .pdt-chev { opacity: 0; transform: translateY(-2px) rotate(0); }

/* icon stack — springs open/closed */
.pin-dock-icons {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  overflow: visible; max-height: 70vh;
  transition: max-height 0.5s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.35s var(--ease), margin 0.45s var(--ease);
}
.pin-dock.collapsed .pin-dock-icons {
  max-height: 0 !important; opacity: 0; margin: 0; pointer-events: none;
}
.pin-dock-icon {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 235, 224, 0.92); text-decoration: none;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s var(--ease), background 0.18s var(--ease);
}
.pin-dock.collapsed .pin-dock-icon { transform: scale(0); opacity: 0; }
.pin-dock-icon:hover { transform: scale(1.08); background: #fff; }
.pdi-emoji { font-size: 24px; line-height: 1; pointer-events: none; }
.pdi-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12.5px; color: #fff;
  background: rgba(50, 40, 32, 0.92); padding: 5px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease);
}
.pin-dock-icon:hover .pdi-tip { opacity: 1; }
/* Edit mode — long-press an icon to reveal ✕ remove badges (home stays un-removable) */
.pin-dock-x {
  position: absolute; top: -5px; right: -5px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #fff; background: #d8523f; color: #fff;
  font-size: 9px; line-height: 1; padding: 0; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35); z-index: 4;
}
.pin-dock.editing .pin-dock-icon:not(.pin-dock-home) .pin-dock-x { display: flex; }
.pin-dock.editing .pin-dock-icon:not(.pin-dock-home) { animation: pinJiggle 0.32s ease-in-out infinite; }
@keyframes pinJiggle { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.pin-dock-icon.reordering { z-index: 5; opacity: 0.92; box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.pin-dock.editing .pin-dock-icon.reordering { animation: none; transform: scale(1.14); }

/* Restore-all button — only appears while editing the dock */
.pin-dock-reset {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  border: 1.5px dashed var(--gold, #c79a3a); background: #fdf8ec;
  color: var(--gold, #c79a3a); cursor: pointer; margin-top: 2px;
  transition: transform 0.2s var(--ease), background 0.18s var(--ease);
}
.pin-dock.editing .pin-dock-reset { display: flex; }
.pin-dock.collapsed .pin-dock-reset { display: none; }
.pin-dock-reset:hover { transform: scale(1.08); background: #fbf0d8; }
.pin-dock-reset .pdi-emoji { font-size: 22px; }
.pin-dock-reset:hover .pdi-tip { opacity: 1; }
.petcat-tool.pin-tool.pinned { color: var(--gold, #c79a3a); }
.petcat-tool.pin-tool svg { width: 18px; height: 18px; }

/* ---- Long-press hint tooltip (mobile hover-replacement) ---- */
.hint-pop {
  position: fixed;
  z-index: 100050;
  max-width: 220px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(43, 32, 24, 0.96);
  color: #fff;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .2px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(30, 20, 12, 0.32);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: center bottom;
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.hint-pop.show { opacity: 1; transform: translateY(0) scale(1); }
.hint-pop::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(43, 32, 24, 0.96);
}
.hint-pop.below { transform-origin: center top; }
.hint-pop.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(43, 32, 24, 0.96);
}

/* Keep the whole floating dock on-screen on phones — shrink icons so every
   pinned room stays visible instead of overflowing off the top/bottom edge. */
@media (max-width: 640px) {
  .pin-dock { padding: 6px; gap: 6px; }
  .pin-dock-toggle { width: 38px; height: 38px; }
  .pin-dock-icon,
  .pin-dock-reset { width: 40px; height: 40px; }
  .pdi-emoji { font-size: 20px; }
  .pin-dock-icons { gap: 6px; max-height: 82vh; }
}
@media (max-width: 640px) and (max-height: 620px) {
  .pin-dock-icon,
  .pin-dock-reset { width: 36px; height: 36px; }
  .pdi-emoji { font-size: 18px; }
  .pin-dock-icons { gap: 5px; }
}
/* ============================================================
   Diary — 3-level journal (Year → Month → Day) · clean white
   ============================================================ */
#apane-letter { padding-top: 0; }
.diary {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  --d-ink: #2e2a26;
  --d-soft: #9b948c;
  --d-line: #ece8e2;
  color: var(--d-ink);
}
.diary-view { display: none; animation: diaryFade 0.34s var(--ease, ease); }
.diary-view.active { display: block; }
@keyframes diaryFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Year view ---------- */
.diary-year-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 22px;
  position: relative;
}
.diary-info-btn {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; color: var(--d-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition);
}
.diary-info-btn:hover { color: var(--clay); background: #f3efe9; }

/* First-visit instruction overlay */
.diary-intro {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: diaryFade 0.3s var(--ease);
}
.diary-intro[hidden] { display: none; }
.diary-intro-card {
  background: #fff; border: 1px solid var(--d-line);
  border-radius: 20px; padding: 32px 26px 26px;
  max-width: 380px; width: 100%;
  box-shadow: 0 18px 50px rgba(60, 48, 38, 0.18);
  text-align: center;
}
.dip-pages { position: relative; min-height: 220px; }
.dip-page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
}
.dip-page.active { opacity: 1; visibility: visible; }
.dip-line {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.dip-line.show { opacity: 1; transform: translateY(0); }
.dip-mark { font-size: 44px; margin-bottom: 16px; }
.dip-title {
  font-family: 'IBM Plex Serif', serif; font-weight: 600;
  font-size: 22px; line-height: 1.4; color: var(--d-ink); margin: 0 0 18px;
}
.dip-text { font-size: 14.5px; line-height: 1.85; color: #4a443e; margin: 0 0 14px; }
.dip-soft { color: var(--d-soft); }
.dip-ok { width: 100%; margin-top: 10px; }
.dip-sample-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--d-line); background: transparent;
  color: var(--d-soft); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; font-family: inherit;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.dip-sample-btn:hover { color: var(--clay); border-color: var(--clay); background: #fbf3ea; }

/* Sample/example entries — badges so seeded demo entries never look like real saved ones */
.diary-sample-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 999px;
  color: var(--clay); background: #fbf3ea;
  border: 1px dashed color-mix(in srgb, var(--clay) 55%, transparent);
}
.diary-mcard-sample {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  color: #fff; background: rgba(46,42,38,0.55); backdrop-filter: blur(2px);
}
.diary-yr-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--d-soft); font-size: 20px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition);
}
.diary-yr-arrow:hover { color: var(--d-ink); }
.diary-yr-label {
  font-size: 22px; font-weight: 500; color: var(--d-ink);
  letter-spacing: 0.06em; min-width: 86px; text-align: center;
}

/* horizontal month-card carousel */
.diary-carousel {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 16px;
  margin: 0 -4px;
  scrollbar-width: none;
}
.diary-carousel::-webkit-scrollbar { display: none; }
.diary-mcard {
  flex: 0 0 56%;
  scroll-snap-align: none;
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 12px;
  transition: flex-basis 0.55s var(--ease), opacity 0.45s var(--ease);
}
.diary-mcard.squeezed { flex-basis: 30px; opacity: 0.9; }
.diary-mcard.focused { flex-basis: 56%; opacity: 1; }
/* squeezed = folded to a thin spine: hide all text so nothing reflows/flickers */
.diary-mcard.squeezed .diary-mcard-top,
.diary-mcard.squeezed .diary-mcard-foot { opacity: 0; transition: opacity 0.2s var(--ease); }
.diary-mcard.squeezed .diary-mcard-cover { padding: 0; }
.diary-mcard:first-child { margin-left: 12%; }
.diary-mcard:last-child { margin-right: 12%; }
.diary-mcard-cover {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  height: 360px;
  border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #f3efe9;
  box-shadow: 0 10px 26px rgba(60, 48, 38, 0.14);
  transition: transform 0.25s var(--ease);
  padding: 16px;
}
.diary-mcard:hover .diary-mcard-cover { transform: translateY(-4px); }
.diary-mcard.future { opacity: 0.45; }
.diary-mcard.now .diary-mcard-cover { box-shadow: 0 10px 26px rgba(60,48,38,0.14), 0 0 0 2px var(--clay); }
.diary-mcard-top { display: flex; flex-direction: column; line-height: 1.05; }
/* vertical spine label — only visible once the card folds thin */
.diary-mcard-spine {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  font-size: 13px; letter-spacing: 0.22em; font-weight: 400;
  color: var(--d-soft);
  opacity: 0; transition: opacity 0.25s var(--ease);
  pointer-events: none; white-space: nowrap;
}
.diary-mcard-spine.on-photo { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.diary-mcard.squeezed .diary-mcard-spine { opacity: 1; transition-delay: 0.15s; }
.diary-mcard-abbr {
  font-size: 30px; font-weight: 300; letter-spacing: 0.04em; color: var(--d-ink);
  white-space: nowrap;
}
.diary-mcard-yr { font-size: 12px; letter-spacing: 0.14em; color: var(--d-soft); margin-top: 4px; }
.diary-mcard-foot { font-size: 11px; letter-spacing: 0.06em; color: var(--d-soft); }
.diary-mcard-top.on-photo .diary-mcard-abbr,
.diary-mcard-top.on-photo .diary-mcard-yr,
.diary-mcard-foot.on-photo {
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.diary-year-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 4px;
}
.diary-today-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: #faf7f2; border: 1px solid var(--d-line);
}
.diary-pill-ico { font-size: 18px; }
.diary-pill-text { display: flex; flex-direction: column; line-height: 1.25; }
.diary-pill-today { font-size: 9px; letter-spacing: 0.16em; color: var(--d-soft); }
.diary-pill-date { font-size: 12px; color: var(--d-ink); letter-spacing: 0.03em; }
.diary-fabs { display: flex; gap: 10px; }
.diary-cfab {
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: #2e2a26; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(46, 42, 38, 0.32);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}
.diary-cfab:hover { transform: translateY(-2px); background: #46403a; }
.diary-cfab:active { transform: scale(0.95); }

/* ---------- Month view ---------- */
.diary-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.diary-back {
  width: 34px; height: 34px; flex-shrink: 0;
  border: none; background: transparent; color: var(--d-ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background var(--transition);
}
.diary-back:hover { background: #f3efe9; }
.diary-head-title {
  flex: 1; text-align: center;
  font-size: 14px; letter-spacing: 0.18em; color: var(--d-ink); font-weight: 500;
}
.diary-head-spacer { width: 34px; flex-shrink: 0; }

.diary-days { display: flex; flex-direction: column; }

/* ===== Mood-overview calendar ===== */
.diary-cal { margin-bottom: 22px; }
.diary-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 2px;
}
.diary-cal-wd {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0.03em;
  padding-bottom: 8px;
}
.diary-cal-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: inherit;
}
.diary-cal-cell.empty { cursor: default; }
.diary-cal-num { font-size: 11px; color: var(--ink-soft); }
.diary-cal-cell.today .diary-cal-num {
  color: #fff; background: var(--clay); border-radius: 999px;
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
  font-weight: 600;
}
.diary-cal-face {
  width: 100%; aspect-ratio: 1/1; max-width: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 18%; color: #3b2f26;
  transition: transform 0.18s var(--ease);
}
.diary-cal-face svg { width: 100%; height: 100%; display: block; }
.diary-cal-face.blank {
  background: rgba(120,104,88,0.07);
  border: 1.5px dashed rgba(120,104,88,0.18);
}
.diary-cal-cell.future .diary-cal-face.blank { opacity: 0.45; }
.diary-cal-cell.has:hover .diary-cal-face { transform: scale(1.12); }


.diary-drow {
  display: flex; align-items: stretch; gap: 16px;
  background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit;
  padding: 16px 2px;
  border-bottom: 1px solid var(--d-line);
  transition: opacity 0.18s var(--ease);
}
.diary-drow:hover { opacity: 0.72; }
.diary-drow-date {
  flex-shrink: 0; width: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.diary-drow-num { font-size: 26px; font-weight: 300; line-height: 1; color: var(--mood, var(--d-ink)); }
.diary-drow-wd { font-size: 9px; letter-spacing: 0.12em; color: var(--d-soft); }
.diary-drow-weather { font-size: 13px; margin-top: 3px; opacity: 0.9; }
.diary-drow-media { position: relative; flex: 1; min-width: 0; display: flex; }
.diary-drow-sample {
  position: absolute; top: 6px; right: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  color: #fff; background: rgba(46,42,38,0.55); backdrop-filter: blur(2px);
}
.diary-drow-photo {
  flex: 1; min-height: 86px; border-radius: 8px;
  background-size: cover; background-position: center; background-color: #f3efe9;
}
.diary-drow-textcard {
  position: relative; flex-direction: column; justify-content: center;
  padding: 4px 2px;
}
.diary-quote {
  font-family: 'IBM Plex Serif', serif; font-size: 26px; line-height: 0.6;
  color: var(--d-line); height: 14px;
}
.diary-quote.end { align-self: flex-end; transform: translateY(4px); }
.diary-drow-title { font-size: 15px; font-weight: 500; color: var(--d-ink); margin: 4px 0 3px; }
.diary-drow-snippet { font-size: 13px; color: var(--d-soft); line-height: 1.6; }

.diary-month-empty { text-align: center; padding: 50px 20px; color: var(--d-soft); }
.diary-empty-mark { font-size: 32px; color: var(--d-line); margin-bottom: 12px; }
.diary-month-empty p { font-size: 13px; line-height: 1.7; max-width: 280px; margin: 0 auto; }

.diary-month-fabs {
  position: sticky; bottom: 18px;
  justify-content: flex-end;
  margin-top: 20px; padding-right: 2px;
}

/* ---------- Day view ---------- */
.diary-dv-hero {
  position: relative; margin: 0 -4px 0;
  border-radius: 0 0 18px 18px; overflow: hidden;
}
.diary-dv-hero img { width: 100%; display: block; max-height: 420px; object-fit: cover; }
.diary-hero-btn, .diary-band-btn {
  position: absolute; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.diary-hero-btn {
  background: rgba(255,255,255,0.86); color: #2e2a26;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); backdrop-filter: blur(4px);
}
.diary-hero-btn.left { left: 14px; }
.diary-hero-btn.right { right: 14px; }
.diary-dv-band { position: relative; height: 44px; margin-bottom: 4px; }
.diary-band-btn { background: #f3efe9; color: #2e2a26; }
.diary-band-btn.left { left: -2px; }
.diary-band-btn.right { right: -2px; }
.diary-dv-inner { padding: 22px 6px 10px; text-align: center; }
.diary-dv-date { font-size: 11px; letter-spacing: 0.16em; color: var(--d-soft); margin-bottom: 12px; }
.diary-dv-title {
  font-family: 'IBM Plex Serif', serif; font-weight: 600;
  font-size: 24px; color: var(--d-ink); margin: 0 0 14px; line-height: 1.32;
}
.diary-dv-tags { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.diary-dv-mood {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--d-ink);
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--mood) 16%, transparent);
}
.diary-dv-weather { font-size: 12.5px; color: var(--d-soft); }
.diary-dv-body {
  text-align: left; font-size: 15px; line-height: 2.0; color: #4a443e;
  max-width: 400px; margin: 0 auto;
}

/* ---------- Editor ---------- */
.diary-editor-scroll { display: flex; flex-direction: column; }
.diary-field-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-soft); font-weight: 500; margin: 22px 0 10px;
}
.diary-field-label:first-child { margin-top: 0; }
.diary-moods { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.diary-mood-track {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(155,126,222,0.14), rgba(226,136,74,0.14), rgba(201,163,107,0.14),
    rgba(224,184,74,0.14), rgba(123,160,90,0.14));
  touch-action: none;
}
.diary-mood-face {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; padding: 8px;
  background: transparent; color: #c4bdb2;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.diary-mood-face svg { width: 100%; height: 100%; display: block; }
.diary-mood-face.active {
  background: var(--mood); color: #3b2f26;
  transform: scale(1.26);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mood) 55%, transparent);
}
.diary-mood-name {
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; min-height: 18px;
}
.diary-face-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; padding: 3.5px;
  color: #3b2f26; vertical-align: middle; flex-shrink: 0;
}
.diary-face-mini svg { width: 100%; height: 100%; display: block; }

.diary-weathers { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.diary-weather-track {
  display: flex; align-items: center; justify-content: space-around; gap: 6px;
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(224,184,74,0.13), rgba(155,178,200,0.13), rgba(120,140,170,0.13), rgba(70,64,90,0.10));
  touch-action: none;
}
.diary-weather-face {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(0.9) opacity(0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), filter 0.2s var(--ease);
}
.diary-weather-face .dw-emoji { font-size: 22px; line-height: 1; }
.diary-weather-face.active {
  filter: none; transform: scale(1.24);
  background: #fff; box-shadow: 0 5px 14px rgba(60,48,38,0.18);
}
.diary-weather-name { font-size: 13px; font-weight: 500; min-height: 17px; color: var(--d-ink); }
.diary-weather-name.muted { color: var(--d-soft); font-weight: 400; }

.diary-field-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 22px 0 10px;
}
.diary-field-row .diary-field-label { margin: 0; }
.diary-photo-add {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--d-line); background: #fff;
  cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--d-soft);
  transition: all var(--transition); flex-shrink: 0;
}
.diary-photo-add:hover { border-color: var(--clay); color: var(--clay); }
.diary-photo-ico { font-size: 16px; line-height: 1; font-weight: 300; }
.diary-photo-prev { position: relative; margin-top: 14px; border-radius: 14px; overflow: hidden; align-self: flex-start; max-width: 260px; }
.diary-photo-prev img { width: 100%; display: block; max-height: 220px; object-fit: cover; }
.diary-photo-remove {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(40,30,24,0.62); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.diary-title-input, .diary-body-input {
  width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1px solid var(--d-line);
  background: transparent; color: var(--d-ink);
  font-family: inherit; padding: 12px 2px;
  transition: border-color var(--transition);
}
.diary-title-input { margin-top: 24px; font-family: 'IBM Plex Serif', serif; font-weight: 600; font-size: 20px; }
.diary-title-input.diary-title-first { margin-top: 0; }
.diary-title-input::placeholder { font-weight: 400; color: var(--d-soft); }
.diary-body-input { margin-top: 8px; min-height: 170px; font-size: 15px; line-height: 1.9; resize: vertical; }
.diary-title-input:focus, .diary-body-input:focus { outline: none; border-bottom-color: var(--clay); }

.diary-editor-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
/* Delete = danger action → red by default so it reads clearly (playtest feedback) */
.diary-del-btn {
  border: 1px solid #e4b4af; background: #fdf3f2;
  border-radius: 999px; padding: 11px 18px;
  font-family: inherit; font-size: 13px; color: #b5524a;
  cursor: pointer; transition: all var(--transition);
}
.diary-del-btn:hover { border-color: #c0524a; background: #fbe7e4; color: #a3443c; }
.diary-editor-actions .nav-btn { margin-left: auto; }

/* Character counter under the diary textarea (playtest: show the length limit) */
.diary-count { text-align: right; font-size: 12px; color: var(--d-soft); margin-top: 6px; opacity: .65; letter-spacing: .3px; }
.diary-count.near { color: #c0524a; opacity: 1; font-weight: 600; }

/* "Days skipped" marker between non-consecutive entries (playtest feedback) */
.diary-gap { display: flex; align-items: center; gap: 10px; margin: 6px 4px; }
.diary-gap-line { flex: 1; height: 1px; background: var(--d-line, #e3d5ca); opacity: .8; }
.diary-gap-txt { font-size: 11.5px; color: var(--d-soft); opacity: .8; white-space: nowrap; }

@media (max-width: 430px) {
  .diary-mcard { flex-basis: 70%; }
  .diary-mood-face { width: 40px; height: 40px; padding: 7px; }
}

/* ============================================================
   Meditation — Cover-Flow chooser + glass breathing player
   ============================================================ */
.med-pane { padding: 0 !important; position: relative; }
.med-select, .med-play, .med-done { display: none; }
.med-select.active-screen { display: flex; animation: medSelectIn 0.34s ease both; }
@keyframes medSelectIn { from { opacity: 0; } to { opacity: 1; } }
.med-play.active-screen { display: flex; }
.med-play.closing { position: absolute; top: 0; left: 0; right: 0; z-index: 6; animation: medDetailOut 0.34s ease both; pointer-events: none; }
.med-done.active-screen { display: flex; animation: medSelectIn 0.34s ease both; }

/* ----- Detail / setup screen ----- */
.med-detail { display: none; }
.med-detail.active-screen { display: flex; animation: medDetailIn 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.med-detail.measuring { animation: none !important; }
/* Surrounding content fades while the symbol itself flies between screens (see flyGhost). */
/* While closing, the detail overlays the chooser (absolute) and fades out on top,
   so the two cross-fade — the chooser is never revealed by a hard pop. */
.med-detail.closing { position: absolute; top: 0; left: 0; right: 0; z-index: 6; animation: medDetailOut 0.34s ease both; pointer-events: none; }
@keyframes medDetailOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.985); } }
@keyframes medDetailIn { from { opacity: 0; transform: scale(0.975); } to { opacity: 1; transform: none; } }
/* The travelling symbol clone */
.med-flow-ghost { will-change: transform; }
.med-flow-ghost .med-card-cover {
  width: 100%; height: 100%; border-radius: 50%; margin: 0;
  box-shadow: inset 0 -12px 30px rgba(0,0,0,0.25);
}

/* Apple-style staggered entrance for text + buttons (gentle rise + fade) */
@keyframes medItemIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.med-detail.active-screen .med-detail-title    { animation: medItemIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.08s backwards; }
.med-detail.active-screen .med-detail-desc     { animation: medItemIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.15s backwards; }
.med-detail.active-screen .med-detail-duration { animation: medItemIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.22s backwards; }
.med-detail.active-screen .med-detail-start    { animation: medItemIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.29s backwards; }
.med-play.active-screen .med-chip      { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.10s backwards; }
.med-play.active-screen .med-title     { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.17s backwards; }
.med-play.active-screen .med-count     { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.23s backwards; }
.med-play.active-screen #medVol        { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.29s backwards; }
.med-play.active-screen #medThemeSlider{ animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.35s backwards; }
.med-play.active-screen .med-controls  { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.41s backwards; }
.med-play.active-screen .med-exit      { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.48s backwards; }
.med-done.active-screen .med-done-mark  { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.06s backwards; }
.med-done.active-screen .med-done-title { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.16s backwards; }
.med-done.active-screen #medAgain       { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.26s backwards; }
.med-select.active-screen .med-brand  { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.08s backwards; }
.med-select.active-screen .med-flow   { animation: medItemIn 0.62s cubic-bezier(0.22,1,0.36,1) 0.16s backwards; }
.med-select.active-screen .med-credit { animation: medItemIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.28s backwards; }
@keyframes medIconPop { 0% { opacity: 0; transform: scale(0.55); } 100% { opacity: 1; transform: scale(1); } }
@keyframes medRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.med-detail {
  position: relative;
  flex-direction: column;
  width: 100%;
  min-height: 600px;
  padding: 16px 22px 30px;
  color: #fff;
  background: radial-gradient(130% 80% at 50% 10%, #5d4d42, #322822 58%, #1d1714 100%);
  border-radius: 24px;
  overflow-y: auto;
}
.med-detail-bar { display: flex; align-items: center; }
.med-detail-back {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.12); color: #fff;
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease);
}
.med-detail-back:hover { background: rgba(255,255,255,0.22); }
.med-detail-hero { text-align: center; padding: 26px 6px 0; }
.med-detail-icon {
  width: 132px; height: 132px; margin: 6px auto 26px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.med-detail-icon::before {
  content: ''; position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(255,210,150,0.55)), transparent 68%);
  animation: mcPulse 6s ease-in-out infinite;
}
.med-detail-icon .med-card-cover {
  width: 132px; height: 132px; border-radius: 50%;
  margin: 0; box-shadow: inset 0 -10px 26px rgba(0,0,0,0.25);
  position: relative; z-index: 1;
}
.med-detail-title {
  font-family: 'IBM Plex Serif', serif; font-size: 28px; font-weight: 500;
  margin: 0 0 14px;
}
.med-detail-desc {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72);
  max-width: 430px; margin: 0 auto;
}
.med-detail-section { margin-top: 28px; }
.med-detail-duration { margin-top: auto; padding-top: 22px; text-align: center; }
.med-detail-duration .med-detail-label { text-align: center; }
.med-detail-label { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 13px; }
.med-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.med-method {
  text-align: left; padding: 16px 16px; border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer; transition: all 0.25s var(--ease);
}
.med-method:hover { background: rgba(255,255,255,0.1); }
.med-method.active { border-color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.13); }
.med-method-ico { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 12px; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.2); }
.med-method-name { font-family: 'IBM Plex Serif', serif; font-size: 16px; font-weight: 500; }
.med-method-sub { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.med-dur-big { text-align: center; font-size: 40px; font-weight: 600; margin: 4px 0 16px; font-feature-settings: 'tnum'; }
.med-dur-big span:not(#medDurBig) { font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.6); }
.med-dur-rule { position: relative; padding: 6px 0 2px; }
.med-dur-ticks { display: flex; justify-content: space-between; align-items: flex-end; height: 16px; pointer-events: none; margin-top: 8px; }
.med-dur-ticks span { width: 1.5px; background: rgba(255,255,255,0.3); }
.med-dur-ticks span.major { background: rgba(255,255,255,0.7); }
.med-dur-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.25); outline: none; cursor: pointer;
}
.med-dur-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: grab;
}
.med-dur-range::-moz-range-thumb {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: grab;
}
.med-detail-start {
  margin-top: 30px; width: 100%; padding: 18px;
  border-radius: 999px; border: none;
  background: #fff; color: #2a221c;
  font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.med-detail-start:hover { transform: translateY(-2px); }


/* ----- Selection screen ----- */
.med-select {
  flex-direction: column; align-items: center;
  padding: 8px 0 4px;
  min-height: 520px;
}
.med-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Serif', serif; font-size: 17px;
  color: var(--ink-soft); letter-spacing: 0.04em;
  margin: 6px 0 30px;
}
.med-brand-mark { font-size: 19px; }
.med-flow {
  position: relative;
  width: 100%; height: 320px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
  touch-action: pan-y;
  cursor: grab;
}
.med-flow:active { cursor: grabbing; }
.med-card {
  position: absolute;
  width: 220px; height: 290px;
  border-radius: 30px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 18px 44px rgba(60,48,38,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.62s cubic-bezier(0.22,1,0.36,1), opacity 0.55s cubic-bezier(0.22,1,0.36,1), box-shadow 0.55s cubic-bezier(0.22,1,0.36,1);
  transform-style: preserve-3d; will-change: transform;
  user-select: none;
}
.med-card-cover {
  width: 100%; aspect-ratio: 1/1; border-radius: 24px;
  background: var(--cv, linear-gradient(165deg,#f0a877,#9c4f2f));
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,0.22);
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.med-card-cover > span { position: absolute; pointer-events: none; }

/* Sunrise */
.med-cover-sun .mc-sun {
  top: 30%; left: 50%; width: 50%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #fff7e6, #ffd89b 52%, rgba(255,200,120,0) 72%);
  box-shadow: 0 0 46px rgba(255,224,160,0.7);
  animation: mcFloat 7s ease-in-out infinite;
}
.med-cover-sun .mc-haze {
  left: -10%; right: -10%; bottom: 0; height: 46%; border-radius: 0;
  background: linear-gradient(to top, rgba(255,236,200,0.55), rgba(255,236,200,0));
}

/* Moon + stars */
.med-cover-moon .mc-moon {
  top: 28%; left: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #f6f2ff, #d3c4f2 64%, #b6a3e0 100%);
  box-shadow: 0 0 38px rgba(206,189,240,0.6), inset -10px -10px 22px rgba(120,98,170,0.35);
  animation: mcFloat 8s ease-in-out infinite;
}
.med-cover-moon .mc-star {
  width: 5px; height: 5px; border-radius: 50%; background: #fffdf5;
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  animation: mcTwinkle 3.4s ease-in-out infinite;
}
.med-cover-moon .s1 { top: 22%; left: 22%; }
.med-cover-moon .s2 { top: 64%; left: 30%; animation-delay: 0.8s; }
.med-cover-moon .s3 { top: 70%; left: 72%; animation-delay: 1.6s; }
.med-cover-moon .s4 { top: 38%; left: 80%; width: 4px; height: 4px; animation-delay: 2.3s; }

/* Box — concentric squares */
.med-cover-box .mc-sq {
  top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);
  border: 1.6px solid rgba(255,255,255,0.55); border-radius: 16px;
}
.med-cover-box .q1 { width: 60%; aspect-ratio: 1; }
.med-cover-box .q2 { width: 42%; aspect-ratio: 1; border-color: rgba(255,255,255,0.7); }
.med-cover-box .q3 { width: 24%; aspect-ratio: 1; border-color: rgba(255,255,255,0.85); }
.med-cover-box .mc-core {
  top: 50%; left: 50%; width: 14%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, rgba(255,255,255,0));
  animation: mcPulse 5s ease-in-out infinite;
}

/* Heart-coherence — soft blooms */
.med-cover-bloom .mc-bloom {
  border-radius: 50%; mix-blend-mode: screen;
  animation: mcPulse 6s ease-in-out infinite;
}
.med-cover-bloom .mc-bloom:first-child {
  top: 32%; left: 38%; width: 52%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,225,235,0.85), rgba(255,225,235,0) 70%);
}
.med-cover-bloom .b2 {
  top: 52%; left: 64%; width: 46%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,210,225,0.7), rgba(255,210,225,0) 70%);
  animation-delay: 1.5s;
}
.med-cover-bloom .b3 {
  top: 60%; left: 40%; width: 38%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,245,235,0.6), rgba(255,245,235,0) 70%);
  animation-delay: 3s;
}
@keyframes mcFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -7px; } }
@keyframes mcTwinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
/* Rainy-window cover art (work desk) */
.wk-cover-rain .wk-cloud {
  position: absolute; top: 24%; left: 50%; transform: translate(-50%,-50%);
  width: 60%; height: 32%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #eef3f7, #c4d2dd 70%, rgba(196,210,221,0) 100%);
  box-shadow: 0 0 30px rgba(220,232,240,0.5);
}
.wk-cover-rain .wk-rain {
  position: absolute; width: 2px; height: 16%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  border-radius: 2px;
  animation: wkRain 1.1s linear infinite;
}
.wk-cover-rain .r1 { left: 30%; top: 46%; animation-delay: 0s; }
.wk-cover-rain .r2 { left: 44%; top: 50%; animation-delay: 0.35s; }
.wk-cover-rain .r3 { left: 56%; top: 46%; animation-delay: 0.6s; }
.wk-cover-rain .r4 { left: 68%; top: 50%; animation-delay: 0.15s; }
.wk-cover-rain .r5 { left: 38%; top: 54%; animation-delay: 0.8s; }
@keyframes wkRain { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
@keyframes mcPulse { 0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }

.med-card-emoji { font-size: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.med-card-name {
  font-family: 'IBM Plex Serif', serif; font-weight: 500; font-size: 19px;
  color: var(--ink); text-align: center;
}
.med-card-sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; text-align: center; }
.med-card.active { box-shadow: 0 30px 70px rgba(60,48,38,0.34), 0 4px 16px rgba(60,48,38,0.16); background: rgba(255,255,255,0.78); }

/* Make card the positioning context for the duration overlay */
.med-card { position: absolute; }

/* Duration overlay — revealed on the active card via hover (desktop) or tap (mobile) */
.med-card-durs {
  position: absolute;
  inset: 16px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  opacity: 0; visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 5;
}
/* Only the centred card reveals durations, and only on hover (desktop) or .revealed (tap) */
.med-card.active.revealed .med-card-durs,
.med-card.active:hover .med-card-durs {
  opacity: 1; visibility: visible; transform: scale(1);
}
.med-card-durs-hint {
  font-size: 12px; color: var(--ink-soft); text-align: center; max-width: 80%;
  line-height: 1.4;
}
.med-card-durs-row { display: flex; gap: 8px; }
.med-card-dur {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--beige); background: var(--bg);
  font-family: 'IBM Plex Serif', serif; font-size: 17px; color: var(--ink);
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.med-card-dur:hover { background: var(--clay); color: #fff; border-color: var(--clay); transform: translateY(-2px); }
.med-card-durs-unit { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }

.med-credit {
  font-size: 12px; color: var(--ink-soft); margin-top: 18px; text-align: center;
  line-height: 1.6;
}

/* ----- Practice / glass player ----- */
.med-play {
  position: relative;
  flex-direction: column; align-items: center; justify-content: center;
  min-height: 520px; border-radius: 24px; overflow: hidden;
  padding: 28px 22px;
}
.med-play[data-theme="bright"] { background: radial-gradient(120% 90% at 60% 18%, #ffb27a 0%, #d9663b 40%, #7e3320 100%); }
.med-play[data-theme="calm"]   { background: radial-gradient(120% 90% at 55% 22%, #e8a6a0 0%, #b9667a 42%, #5e3550 100%); }
.med-play[data-theme="dark"]   { background: radial-gradient(120% 95% at 55% 20%, #6a4a52 0%, #3a2630 45%, #1a1118 100%); }
.med-glow {
  position: absolute; top: 22%; left: 50%;
  width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,220,0.5), rgba(255,200,150,0.12) 55%, transparent 72%);
  transform: scale(1); opacity: 0.7; pointer-events: none;
  filter: blur(6px);
}
/* Breathing symbol — the chosen practice's emblem, sits inside the glow and
   expands on the inhale / contracts on the exhale. Injected per-pattern in startSit(). */
.med-symbol {
  position: relative;
  width: 208px; height: 208px; margin: 6px auto 22px;
  transform: scale(0.9);
  z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 0.85s ease, transform 0.7s ease;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,0.34));
}
.med-symbol.in { opacity: 1; }
.med-symbol .med-card-cover {
  width: 100%; height: 100%; border-radius: 50%; margin: 0;
  box-shadow: inset 0 -14px 32px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.55), 0 0 0 6px rgba(255,255,255,0.16);
}
.med-rail {
  position: absolute; top: 84px; right: 22px; bottom: 40px;
  width: 60px; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; pointer-events: none;
}
.med-rail-line { position: absolute; right: 2px; top: 28px; bottom: 28px; width: 1.5px; background: rgba(255,255,255,0.35); }
/* playtest: เส้นรางเติมสีตามเวลาที่ผ่านไป (--medprog 0→1 จาก alone.js) */
.med-rail-line::after {
  content: "";
  position: absolute; left: -1px; top: 0;
  width: 3.5px; border-radius: 3px;
  height: calc(var(--medprog, 0) * 100%);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transition: height 0.9s linear;
}
.med-time-top, .med-time-bot { font-size: 13px; color: rgba(255,255,255,0.85); font-feature-settings: 'tnum'; }
.med-glass {
  position: relative; z-index: 2; width: 100%; max-width: 380px;
}
.med-chip {
  display: inline-block; font-size: 13px; color: #fff;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28);
  padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(4px);
  margin-bottom: 16px;
}
.med-title {
  font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 400;
  font-size: 34px; line-height: 1.15; color: #fff; margin: 0 0 8px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.med-count { font-size: 15px; color: rgba(255,255,255,0.6); letter-spacing: 0.12em; margin-bottom: 26px; font-feature-settings: 'tnum'; }

.med-slider {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 18px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  margin-bottom: 12px;
}
.med-slider-label { font-size: 15px; color: #fff; flex-shrink: 0; min-width: 52px; }
.med-slider-theme .med-slider-label { color: rgba(255,255,255,0.7); }
.med-slider-track {
  position: relative; flex: 1; height: 22px; cursor: pointer;
  display: flex; align-items: center;
  background-image: radial-gradient(rgba(255,255,255,0.4) 1.2px, transparent 1.3px);
  background-size: 16px 100%; background-position: center;
  background-repeat: repeat-x; touch-action: none;
}
.med-slider-fill { position: absolute; left: 0; top: 50%; height: 0; }
.med-slider-knob { display: none; }
.med-slider-track::after {
  content: ''; position: absolute; top: 1px; bottom: 1px; width: 3px; border-radius: 2px;
  left: var(--knob, 40%); background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: left 0.1s linear;
}
.med-slider-val { font-size: 15px; color: #fff; flex-shrink: 0; min-width: 40px; text-align: right; }

.med-controls { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 30px; }
.med-ctl {
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform 0.2s var(--ease);
}
.med-ctl-side {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; backdrop-filter: blur(6px);
}
.med-ctl-side:first-child { margin-right: -10px; }
.med-ctl-side:last-child { margin-left: -10px; }
.med-ctl-side .med-ctl-num { font-size: 12px; font-weight: 600; position: absolute; }
.med-ctl-side .med-ctl-arc { font-size: 30px; opacity: 0.85; }
.med-ctl-main {
  width: 74px; height: 74px; border-radius: 50%;
  background: #fff; color: #2a2018; font-size: 22px; z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.med-ctl-main:hover { transform: scale(1.06); }
.med-ctl-side:hover { transform: scale(1.05); background: rgba(255,255,255,0.22); }
.med-exit {
  position: relative; z-index: 2; margin-top: 30px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; padding: 9px 22px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; transition: all 0.2s var(--ease);
}
.med-exit:hover { background: rgba(255,255,255,0.26); }

/* ----- Done ----- */
.med-done {
  flex-direction: column; align-items: center; justify-content: center;
  min-height: 420px; text-align: center; gap: 14px;
}
.med-done-mark { font-size: 52px; }
.med-done-title { font-family: 'IBM Plex Serif', serif; font-size: 20px; color: var(--ink); }

@media (max-width: 560px) {
  .med-card { width: 180px; height: 250px; }
  .med-card-emoji { font-size: 52px; }
  .med-title { font-size: 28px; }
  .med-rail { right: 10px; }
}

/* ============ Sub-room first-visit intro (every little room) ============ */
.sri-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  opacity: 1;
}
.sri-overlay.sri-out { opacity: 0; transition: opacity 0.3s var(--ease); }
.sri-backdrop {
  position: absolute; inset: 0;
  background: rgba(245, 235, 224, 0.82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sri-card {
  position: relative;
  background: var(--bg); border: 1px solid var(--beige);
  border-radius: 22px; padding: 36px 28px 26px;
  max-width: 380px; width: 100%;
  box-shadow: 0 22px 60px rgba(92, 74, 60, 0.22);
  text-align: center;
  animation: sriCardIn 0.42s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
@keyframes sriCardIn {
  from { transform: translateY(16px) scale(0.97); }
  to   { transform: translateY(0) scale(1); }
}
.sri-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 16px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sri-x:hover { background: var(--cream); color: var(--ink); }
.sri-icon { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.sri-title {
  font-family: 'IBM Plex Serif', serif; font-weight: 600;
  font-size: 22px; line-height: 1.4; color: var(--ink); margin: 0 0 14px;
}
.sri-body {
  font-size: 15px; line-height: 1.85; color: var(--ink-soft);
  margin: 0 0 22px; text-wrap: pretty;
}
.sri-check {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
  margin-bottom: 18px; user-select: none;
}
.sri-check input {
  width: 17px; height: 17px; accent-color: var(--clay);
  cursor: pointer; flex: 0 0 auto;
}
.sri-ok { width: 100%; }
/* Floating reopen button — present in every sub-room, tap anytime */
.sri-help {
  position: fixed; left: 16px; bottom: 16px; z-index: 1390;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--beige);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(92, 74, 60, 0.16);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.3s var(--ease),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s var(--ease);
}
.sri-help.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.sri-help:hover { color: var(--ink); transform: scale(1.08); }
@media (max-width: 480px) {
  .sri-help { left: 12px; bottom: 12px; width: 38px; height: 38px; }
}

/* ============================================================
   REWARDS — diary year-panel + shared celebration popup
   + inventory count badge + owner-only rewards backend (F3/F4)
   ============================================================ */

/* Inventory: stacked-count badge on a slot */
.inv-count {
  position: absolute; top: 8px; right: 8px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--clay); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(92,74,60,.3);
  z-index: 3;
}

/* Year-view rewards strip */
.diary-rewards {
  margin: 2px 0 20px;
  background: #faf8f4;
  border: 1px solid var(--d-line);
  border-radius: 16px;
  padding: 14px 15px;
}
.drw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.drw-streak { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--d-ink); }
.drw-streak strong { font-size: 15px; color: var(--clay); font-weight: 600; }
.drw-streak-zero { color: var(--d-soft); font-size: 12.5px; }
.drw-flame { font-size: 15px; line-height: 1; }
.drw-coins {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--d-ink);
  background: #fff; border: 1px solid var(--d-line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.drw-coins:hover { border-color: var(--clay); color: var(--clay); }
.drw-bar { height: 7px; border-radius: 999px; background: #efeae2; overflow: hidden; }
.drw-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #dcb24d, #c1935f); transition: width .6s var(--ease); }
.drw-next { margin-top: 8px; font-size: 12px; color: var(--d-soft); line-height: 1.5; }
.drw-next strong { color: var(--clay); font-weight: 600; }
.drw-medals { display: flex; gap: 8px; margin-top: 13px; }
.drw-medal {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 12px;
  background: #fff; border: 1px solid var(--d-line);
}
.drw-medal-emo { font-size: 21px; filter: grayscale(1); opacity: .34; transition: filter .3s, opacity .3s; }
.drw-medal.on { border-color: color-mix(in srgb, var(--clay) 32%, var(--d-line)); background: #fffdf8; cursor: pointer; }
.drw-medal.on .drw-medal-emo { filter: none; opacity: 1; }
.drw-medal-day { font-size: 10px; letter-spacing: .04em; color: var(--d-soft); }
.drw-medal.on .drw-medal-day { color: var(--clay); }

/* Shared celebration popup */
.diary-reward-pop {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(46,42,38,.44);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.diary-reward-pop.show { opacity: 1; }
.diary-reward-pop[hidden] { display: none !important; }
.drp-card {
  --hue: 44;
  position: relative; overflow: hidden;
  width: min(360px, 100%);
  background: #fff; border-radius: 24px;
  padding: 34px 28px 24px; text-align: center;
  box-shadow: 0 30px 70px rgba(40,30,20,.32);
  transform: translateY(16px) scale(.96); transition: transform .42s var(--ease);
}
.diary-reward-pop.show .drp-card { transform: none; }
.drp-rays {
  position: absolute; top: -60px; left: 50%; width: 300px; height: 300px;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, transparent 0 12deg, hsla(var(--hue),70%,60%,.14) 12deg 18deg, transparent 18deg 30deg);
  animation: drpSpin 20s linear infinite;
  pointer-events: none;
}
@keyframes drpSpin { to { transform: translateX(-50%) rotate(360deg); } }
.drp-badge {
  position: relative; z-index: 1;
  width: 108px; height: 108px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 50px;
  background: radial-gradient(circle at 38% 32%, #fff, hsl(var(--hue),68%,88%) 78%);
  box-shadow: 0 12px 30px hsla(var(--hue),55%,55%,.36), inset 0 0 0 3px rgba(255,255,255,.7);
  animation: drpPop .6s cubic-bezier(.3,1.5,.5,1);
}
@keyframes drpPop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.drp-kicker { position: relative; z-index: 1; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--hue),42%,42%); font-weight: 600; }
.drp-title { position: relative; z-index: 1; font-family: 'IBM Plex Serif', serif; font-size: 23px; color: #2e2a26; margin: 6px 0; }
.drp-sub { position: relative; z-index: 1; font-size: 13.5px; color: #9b948c; line-height: 1.6; margin: 0; }
.drp-extra { position: relative; z-index: 1; }
.drp-coinchip { display: inline-block; margin-top: 14px; padding: 5px 13px; border-radius: 999px; background: #fdf4e2; color: #a9762f; font-size: 12.5px; font-weight: 600; }
.drp-next { position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ece8e2; font-size: 12.5px; color: #9b948c; line-height: 1.55; }
.drp-next strong { color: hsl(var(--hue),42%,44%); font-weight: 600; }
.drp-ok {
  position: relative; z-index: 1; margin-top: 18px;
  border: none; cursor: pointer;
  padding: 12px 30px; border-radius: 999px;
  background: #2e2a26; color: #fff; font-family: inherit; font-size: 14px; font-weight: 500;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.drp-ok:hover { transform: translateY(-2px); background: #46403a; }
.drp-ok:active { transform: scale(.96); }

/* Owner-only rewards backend (F3 / F4) — deliberately un-branded, reads as a dev tool */
.hr-admin { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .26s ease; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.hr-admin.show { opacity: 1; }
.hr-admin[hidden] { display: none !important; }
.hr-admin-scrim { position: absolute; inset: 0; background: rgba(12,10,16,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hr-admin-panel {
  position: relative; width: min(760px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  background: #14131a; color: #e7e3ef;
  border: 1px solid #2c2a38; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
}
.hr-admin-bar { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #26242f; background: #191822; }
.hr-admin-titlewrap { display: flex; flex-direction: column; }
.hr-admin-title { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.hr-admin-note { font-size: 10.5px; color: #7d7890; }
.hr-admin-tally { margin-left: auto; font-size: 11.5px; color: #b9b3cc; }
.hr-admin-reset { background: #2a2836; color: #e7e3ef; border: 1px solid #3a3850; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 11.5px; cursor: pointer; }
.hr-admin-reset:hover { background: #7a2f38; border-color: #a3434e; }
.hr-admin-close { background: none; border: none; color: #b9b3cc; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.hr-admin-body { overflow-y: auto; padding: 8px 12px 14px; }
.hr-group { margin-top: 12px; }
.hr-group-head { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #8f8aa6; padding: 6px; border-bottom: 1px solid #24222e; margin-bottom: 4px; }
.hr-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-bottom: 1px solid #1e1c27; }
.hr-emo { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
.hr-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hr-name { font-size: 12.5px; color: #efecf6; }
.hr-trig { font-size: 10.5px; color: #8b86a0; }
.hr-trig code { color: #c7a3f0; }
.hr-pill { font-size: 10px; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.hr-pill.on { background: #1f3a2a; color: #7fdca0; }
.hr-pill.off { background: #2a2836; color: #8f8aa6; }
.hr-pill.coin { background: #3a3320; color: #e6c477; }
.hr-btns { display: flex; gap: 6px; flex-shrink: 0; }
.hr-mini { background: #2a2836; color: #d8d4e6; border: 1px solid #3a3850; border-radius: 7px; padding: 5px 9px; font: inherit; font-size: 10.5px; cursor: pointer; }
.hr-mini:hover { background: #35334a; }
.hr-mini.danger:hover { background: #7a2f38; border-color: #a3434e; }
/* collectible-deck grids inside the backend */
.hr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; padding: 8px 2px 2px; }
.hr-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px; border-radius: 8px;
  background: #1c1a26; border: 1px solid #262433;
  opacity: .45; transition: opacity .2s, border-color .2s;
}
.hr-card.on { opacity: 1; border-color: #4a4166; background: #241f34; cursor: pointer; }
.hr-card.on:hover { border-color: #6b5aa0; }
.hr-card-n { font-size: 10px; color: #b39cf0; font-weight: 700; letter-spacing: .04em; }
.hr-card.on .hr-card-n { color: #d6c4ff; }
.hr-card-t { font-size: 11px; color: #cfcadd; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hr-card-btn { margin-top: 3px; align-self: flex-start; background: #2a2836; color: #d8d4e6; border: 1px solid #3a3850; border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 9.5px; cursor: pointer; }
.hr-card-btn:hover { background: #35334a; }
.hr-card-btn.danger { color: #e6a0ab; border-color: #5a2f38; }
.hr-card-btn.danger:hover { background: #7a2f38; border-color: #a3434e; color: #fff; }

/* Ephemeral fortune-card expiry: countdown pill on the grid slot + note in the 3D viewer */
.inv-expire {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(176,122,101,.16); color: var(--clay);
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  z-index: 3;
}
.inv-expire-note {
  margin-top: 12px; font-size: 12px; color: var(--clay);
  line-height: 1.5; opacity: .92;
}

/* Reward icons: no coin disc — the icon itself, metal-coated per tier and shimmering */
.inv-slot.is-medal .inv-emblem {
  background: none; border: none; box-shadow: none; border-radius: 0;
  width: auto; height: auto; margin: 10px auto 8px; padding: 0;
  font-size: 40px; line-height: 1;
}
.inv-slot.is-medal .inv-emblem::after { content: none; }

/* 3D viewer: the reward icon large, metal-coated, with a gently pulsing tier glow */
.inv-viewer.showing-medal .inv-card-flip { aspect-ratio: .76; }
.inv-viewer.showing-medal .inv-face.front { background: radial-gradient(circle at 50% 32%, #fffdf7, #f2ece0 72%); border-color: #e7ddc7; }
.inv-viewer.showing-medal .inv-paper { justify-content: flex-start; padding-top: 34px; }
.inv-viewer.showing-medal .inv-medallion {
  background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible;
  width: auto; height: auto; margin: 8px auto 24px;
  display: flex; align-items: center; justify-content: center;
}
.inv-viewer.showing-medal .inv-medallion-emo { font-size: 98px; line-height: 1; }
.inv-viewer.showing-medal .inv-medallion::after { content: none; }
.inv-viewer.showing-medal .inv-card-eyebrow { font-family: 'IBM Plex Serif', serif; font-size: 19px; color: var(--clay); letter-spacing: .2px; }
.inv-viewer.showing-medal .inv-card-text { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; max-width: 260px; }

/* Per-tier metal coat + shimmer (shared by grid icon and viewer medallion) */
.inv-slot.medal-copper .inv-emblem,  .inv-viewer.medal-copper .inv-medallion  { animation: mdCopper 2.8s ease-in-out infinite; }
.inv-slot.medal-silver .inv-emblem,  .inv-viewer.medal-silver .inv-medallion  { animation: mdSilver 2.8s ease-in-out infinite; }
.inv-slot.medal-gold .inv-emblem,    .inv-viewer.medal-gold .inv-medallion    { animation: mdGold 2.8s ease-in-out infinite; }
.inv-slot.medal-rainbow .inv-emblem, .inv-viewer.medal-rainbow .inv-medallion { animation: mdRainbow 4.2s linear infinite; }
.inv-slot.medal-platinum .inv-emblem,.inv-viewer.medal-platinum .inv-medallion{ animation: mdPlatinum 4.4s linear infinite; }
@keyframes mdCopper {
  0%,100% { filter: sepia(1) saturate(2.6) hue-rotate(-28deg) brightness(1) drop-shadow(0 0 8px rgba(196,124,60,.5)); }
  50%     { filter: sepia(1) saturate(2.9) hue-rotate(-28deg) brightness(1.1) drop-shadow(0 0 19px rgba(214,132,62,.95)); }
}
@keyframes mdSilver {
  0%,100% { filter: grayscale(1) brightness(1.16) contrast(.92) drop-shadow(0 0 8px rgba(198,208,222,.55)); }
  50%     { filter: grayscale(1) brightness(1.32) contrast(.9) drop-shadow(0 0 20px rgba(222,232,246,.95)); }
}
@keyframes mdGold {
  0%,100% { filter: sepia(1) saturate(2.7) hue-rotate(-12deg) brightness(1.06) drop-shadow(0 0 9px rgba(240,200,110,.55)); }
  50%     { filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.16) drop-shadow(0 0 22px rgba(250,215,130,.98)); }
}
@keyframes mdRainbow {
  0%   { filter: sepia(1) saturate(3.2) hue-rotate(0deg) brightness(1.12) drop-shadow(0 0 16px rgba(255,180,90,.9)); }
  33%  { filter: sepia(1) saturate(3.2) hue-rotate(130deg) brightness(1.16) drop-shadow(0 0 22px rgba(120,230,160,.9)); }
  66%  { filter: sepia(1) saturate(3.2) hue-rotate(260deg) brightness(1.16) drop-shadow(0 0 22px rgba(170,160,255,.9)); }
  100% { filter: sepia(1) saturate(3.2) hue-rotate(360deg) brightness(1.12) drop-shadow(0 0 16px rgba(255,180,90,.9)); }
}
@keyframes mdPlatinum {
  0%   { filter: grayscale(.55) saturate(1.9) hue-rotate(0deg) brightness(1.24) drop-shadow(0 0 16px rgba(226,231,240,.92)); }
  50%  { filter: grayscale(.45) saturate(2.1) hue-rotate(200deg) brightness(1.32) drop-shadow(0 0 27px rgba(190,220,255,.98)); }
  100% { filter: grayscale(.55) saturate(1.9) hue-rotate(360deg) brightness(1.24) drop-shadow(0 0 16px rgba(226,231,240,.92)); }
}
/* Per-tier aura around the viewer card so the whole medal glows in its colour */
.inv-viewer.medal-copper .inv-card-flip   { box-shadow: 0 0 34px rgba(196,124,60,.42); }
.inv-viewer.medal-silver .inv-card-flip   { box-shadow: 0 0 34px rgba(200,210,225,.5); }
.inv-viewer.medal-gold .inv-card-flip     { box-shadow: 0 0 36px rgba(240,200,110,.5); }
.inv-viewer.medal-rainbow .inv-card-flip  { box-shadow: 0 0 40px rgba(255,180,120,.55), 0 0 60px rgba(150,180,255,.35); }
.inv-viewer.medal-platinum .inv-card-flip { box-shadow: 0 0 44px rgba(220,230,245,.6), 0 0 70px rgba(180,210,255,.4); }

/* Celebration popup — coat the badge icon per tier (no gold disc) */
.drp-medal .drp-badge { background: none; box-shadow: none; }
.drp-medal .drp-badge-emo { font-size: 66px; line-height: 1; }
.drp-copper .drp-badge-emo   { animation: mdCopper 2.8s ease-in-out infinite; }
.drp-silver .drp-badge-emo   { animation: mdSilver 2.8s ease-in-out infinite; }
.drp-gold .drp-badge-emo     { animation: mdGold 2.8s ease-in-out infinite; }
.drp-rainbow .drp-badge-emo  { animation: mdRainbow 4.2s linear infinite; }
.drp-platinum .drp-badge-emo { animation: mdPlatinum 4.4s linear infinite; }

/* "Next reward" hint line inside the medal viewer */
.inv-next-hint {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6dcc7;
  font-size: 12px; color: var(--clay); line-height: 1.5;
}

/* Collection drawer tabs (Collection / Medals) */
.bm-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.bm-tab {
  flex: 1; padding: 8px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--beige); background: var(--bg);
  color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 500;
  transition: all var(--transition);
}
.bm-tab.active { background: var(--clay); border-color: var(--clay); color: #fff; }

/* Medal cabinet — a trophy case grouped by room */
.medal-cabinet[hidden] { display: none; }
.mcab-summary { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 0 0 16px; }
.mcab-group { margin-bottom: 18px; }
.mcab-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 2px 9px; }
.mcab-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; }
.mcab-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px 9px; border-radius: 14px;
  background: #faf7f2; border: 1px solid var(--beige);
  cursor: default;
}
.mcab-slot.locked { border-style: dashed; background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(176,122,101,.05) 7px 8px); }
.mcab-emo { font-size: 34px; line-height: 1; }
.mcab-slot.locked .mcab-emo { filter: grayscale(1); opacity: .26; }
.mcab-slot.locked::before {
  content: '🔒'; position: absolute; top: 8px; right: 9px; font-size: 12px; opacity: .5;
}
.mcab-name { font-size: 11.5px; color: var(--ink); text-align: center; line-height: 1.25; }
.mcab-slot.locked .mcab-name { color: var(--ink-soft); }
.mcab-tierlab { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.mcab-slot.earned .mcab-tierlab { color: var(--clay); }
.mcab-count {
  position: absolute; top: 7px; left: 8px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--clay);
  border-radius: 999px; padding: 1px 6px;
}
/* hover tooltip: how to earn */
.mcab-slot:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 190px;
  background: var(--ink); color: #fff; font-size: 11px; line-height: 1.4;
  padding: 8px 11px; border-radius: 10px; text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.22); z-index: 6; pointer-events: none;
}
.mcab-slot:hover { border-color: var(--clay); z-index: 5; }

/* earned cabinet medals shimmer in their tier metal (reuse the tier keyframes) */
.mcab-slot.medal-copper .mcab-emo   { animation: mdCopper 2.8s ease-in-out infinite; }
.mcab-slot.medal-silver .mcab-emo   { animation: mdSilver 2.8s ease-in-out infinite; }
.mcab-slot.medal-gold .mcab-emo     { animation: mdGold 2.8s ease-in-out infinite; }
.mcab-slot.medal-rainbow .mcab-emo  { animation: mdRainbow 4.2s linear infinite; }
.mcab-slot.medal-platinum .mcab-emo { animation: mdPlatinum 4.4s linear infinite; }

/* earned cabinet medals are tappable to expand in the 3D viewer */
.mcab-slot { transition: transform .16s var(--ease), border-color var(--transition); }
.mcab-slot.earned { cursor: pointer; }
.mcab-slot.earned:hover { transform: translateY(-3px); }

/* Ultimate tier — full-spectrum holographic, the crown of every category */
.inv-slot.medal-ultimate .inv-emblem,
.inv-viewer.medal-ultimate .inv-medallion,
.mcab-slot.medal-ultimate .mcab-emo,
.drp-ultimate .drp-badge-emo { animation: mdUltimate 3.6s linear infinite; }
@keyframes mdUltimate {
  0%   { filter: saturate(3.4) hue-rotate(0deg) brightness(1.2) drop-shadow(0 0 18px rgba(255,120,180,.9)); transform: scale(1); }
  25%  { filter: saturate(3.4) hue-rotate(90deg) brightness(1.3) drop-shadow(0 0 24px rgba(120,200,255,.9)); }
  50%  { filter: saturate(3.4) hue-rotate(180deg) brightness(1.36) drop-shadow(0 0 30px rgba(120,255,180,.95)); transform: scale(1.06); }
  75%  { filter: saturate(3.4) hue-rotate(270deg) brightness(1.3) drop-shadow(0 0 24px rgba(255,220,120,.9)); }
  100% { filter: saturate(3.4) hue-rotate(360deg) brightness(1.2) drop-shadow(0 0 18px rgba(255,120,180,.9)); transform: scale(1); }
}
.inv-viewer.medal-ultimate .inv-card-flip { box-shadow: 0 0 48px rgba(255,140,190,.5), 0 0 82px rgba(140,200,255,.42); }
@media (max-width: 560px) {
  .hr-trig { display: none; }
  .hr-admin-note { display: none; }
  .hr-cards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ============================================================
   UNIFIED APP BAR  +  ☰ MENU  (assets/js/appbar.js)
   One sticky navigation bar, identical on every page. Folds in the
   old floating pin-dock, the floating room-tour button, and the
   per-room ✕ "back to map". Navigation now lives in the ☰ menu.
   ============================================================ */

/* Same solid, sticky bar on ALL pages (override the room "transparent strip") */
header {
  justify-content: space-between !important;
  align-items: center;
  gap: 8px;
  padding: 11px 18px !important;
  background: rgba(254, 252, 249, 0.9) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  border-bottom: 1px solid rgba(30, 20, 10, 0.07) !important;
  pointer-events: auto !important;
}
header .brand { display: inline-flex !important; align-items: center; gap: 7px; }
body:not([data-page="home"]) header .header-actions { pointer-events: auto; }
/* the room "floating icon" background bump is no longer needed — bar is solid */
body:not([data-page="home"]) .music-toggle,
body:not([data-page="home"]) .lang-toggle { box-shadow: none; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ‹ back — one button, steps back a single level and stops at the room entrance */
.appbar-back {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  margin-right: 2px;
}
.appbar-back:hover { background: var(--cream); border-color: var(--clay); }
.appbar-back:active { transform: scale(0.92); }

/* ☰ menu button — matches the other round icon controls */
.appbar-menu-btn {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: var(--clay);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--transition), transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.appbar-menu-btn:hover { background: var(--ink); }
.appbar-menu-btn:active { transform: scale(0.92); }

/* --- hide the old floating chrome that the bar/menu replaces --- */
#pinDock { display: none !important; }
#roomTourBtn { display: none !important; }
header .close-btn { display: none !important; }
a.close-btn[href="index.html"], a.close-btn[href="/"], a.close-btn[href="./"] { display: none !important; }
/* leftover in-room "กลับแผนที่ / back to map" links (e.g. sacred step 6) —
   map is reached from the ☰ menu now (the in-flow step-back buttons stay) */
a.nav-btn.map[href="index.html"], a.nav-btn.map[href="/"], a.nav-btn.map[href="./"] { display: none !important; }
.island-back-top { display: none !important; }
body:not([data-page="home"]) #tourOpen { display: none !important; }
#tourOpen { display: none !important; }

/* ============ ☰ slide-in menu ============ */
#appMenuWrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 3200; pointer-events: none; }
#appMenuWrap.open { pointer-events: auto; }
.app-menu-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30, 20, 10, 0.34);
  opacity: 0; transition: opacity 0.28s var(--ease);
}
#appMenuWrap.open .app-menu-backdrop { opacity: 1; }
.app-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--cream, #FEFCF9);
  box-shadow: -14px 0 44px rgba(30, 20, 10, 0.2);
  padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
  display: flex; flex-direction: column; gap: 8px;
}
/* ★ ต้นตอจริงของ "ขอบปุ่มทับตัวหนังสือ" (user แจ้ง 19 ก.ค.):
   .app-menu เป็น flex column → พอเนื้อหายาวเกินจอ ลูกทุกตัวโดน flex-shrink บีบ
   ปุ่มพาทัวร์/กล่องรับเรื่อง/QR มี overflow:hidden เลยกลายเป็นตัดตัวหนังสือทิ้ง
   ล็อกไม่ให้ลูกตัวไหนถูกบีบ — ให้ panel เลื่อน (overflow-y:auto) แทน */
.app-menu > * { flex: 0 0 auto; }
#appMenuWrap.open .app-menu { transform: translateX(0); }
.app-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.app-menu-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 20px; color: var(--ink); letter-spacing: 0.3px;
}
.app-menu-close {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--beige); background: transparent; color: var(--ink-soft);
  cursor: pointer; transition: all var(--transition);
}
.app-menu-close:hover { background: var(--beige); color: var(--ink); }

.app-menu-tour {
  display: flex; align-items: center; gap: 13px;
  width: 100%; max-width: 100%; overflow: hidden; text-align: left;
  /* playtest 19 ก.ค.: user เห็นบนมือถือจริง — กรอบยังทับตัวหนังสือ
     → ถอดกรอบออกตามที่ user สั่ง ("สัดส่วนจะได้ไม่แปลก") + เพิ่มระยะหายใจอีก */
  padding: 18px 20px; margin: 6px 0 8px;
  border-radius: 18px; cursor: pointer;
  border: none;
  background: linear-gradient(180deg, rgba(216, 82, 63, 0.1), rgba(216, 82, 63, 0.05));
  transition: transform 0.12s ease, background var(--transition);
}
.app-menu-tour:hover { background: rgba(216, 82, 63, 0.14); }
.app-menu-tour:active { transform: scale(0.98); }
.app-menu-tour .amt-ic {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--clay); color: var(--cream);
}
.app-menu-tour .amt-tx { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.app-menu-tour .amt-tx b, .app-menu-tour .amt-tx small { display: block; white-space: normal; overflow-wrap: anywhere; }
.app-menu-tour .amt-tx b { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.app-menu-tour .amt-tx small { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* จุดโดเนทท้ายเมนู (playtest: ขาดจุดโดเนท) — ลิงก์ตั้งที่ config.js */
.app-menu-donate {
  display: flex; align-items: center; gap: 13px;
  width: 100%; max-width: 100%; overflow: hidden; text-align: left;
  padding: 18px 20px; margin: 10px 0 4px;
  border-radius: 18px; cursor: pointer;
  border: none;
  background: linear-gradient(180deg, rgba(199, 154, 58, 0.12), rgba(199, 154, 58, 0.05));
  transition: transform 0.12s ease, background var(--transition);
  font-family: inherit;
}
.app-menu-donate:hover { background: rgba(199, 154, 58, 0.18); }
.app-menu-donate:active { transform: scale(0.98); }
.app-menu-donate .amd-ic {
  width: 40px; height: 40px; flex: 0 0 auto; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(199, 154, 58, 0.16);
}
.app-menu-donate .amd-tx { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.app-menu-donate .amd-tx b, .app-menu-donate .amd-tx small { display: block; white-space: normal; overflow-wrap: anywhere; }
.app-menu-donate .amd-tx b { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.app-menu-donate .amd-tx small { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* ============ กล่องรับเรื่อง — ปุ่ม 📮 ท้ายเมนู ☰ (ทุกหน้า) ============ */
.app-menu-feedback {
  display: flex; align-items: center; gap: 13px;
  width: 100%; max-width: 100%; overflow: hidden; text-align: left;
  padding: 18px 20px; margin: 14px 0 4px;
  border-radius: 18px; cursor: pointer; border: none;
  background: linear-gradient(180deg, rgba(139, 115, 85, 0.12), rgba(139, 115, 85, 0.05));
  transition: transform 0.12s ease, background var(--transition);
  font-family: inherit;
}
.app-menu-feedback:hover { background: rgba(139, 115, 85, 0.17); }
.app-menu-feedback:active { transform: scale(0.98); }
.app-menu-feedback .amf-ic {
  width: 40px; height: 40px; flex: 0 0 auto; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(139, 115, 85, 0.16);
}
.app-menu-feedback .amf-tx { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.app-menu-feedback .amf-tx b, .app-menu-feedback .amf-tx small { display: block; white-space: normal; overflow-wrap: anywhere; }
.app-menu-feedback .amf-tx b { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.app-menu-feedback .amf-tx small { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* ---- แผ่นเขียนข้อความ (ใช้โครง .donate-sheet/.donate-card ร่วมกัน) ---- */
.feedback-card { width: min(400px, 90vw); }
.fb-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; justify-content: center; }
.fb-topic {
  font-family: inherit; font-size: 12.5px; color: var(--ink-soft);
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--beige); background: rgba(255, 255, 255, 0.6);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.fb-topic.on { background: var(--clay); border-color: var(--clay); color: #fff; font-weight: 600; }
.fb-text, .fb-contact {
  width: 100%; font-family: inherit; color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--beige); border-radius: 14px;
  padding: 13px 14px; transition: border-color var(--transition);
}
.fb-text { font-size: 14.5px; line-height: 1.7; resize: vertical; min-height: 118px; }
.fb-contact { font-size: 14px; margin-top: 10px; }
.fb-text:focus, .fb-contact:focus { outline: none; border-color: var(--clay); }
.fb-text.shake { animation: fbShake 0.4s ease; border-color: #C4695A; }
@keyframes fbShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.fb-count { font-size: 11px; color: var(--ink-soft); opacity: 0.7; text-align: right; margin-top: 5px; }
.fb-note { font-size: 11.5px; color: var(--ink-soft); opacity: 0.85; line-height: 1.6; margin: 7px 2px 2px; }
.fb-done {
  display: none; text-align: center; font-size: 14px; font-weight: 600;
  color: var(--clay); line-height: 1.7; margin-top: 14px;
}
.fb-done.show { display: block; }
/* ส่งสำเร็จ → ซ่อนฟอร์ม เหลือคำขอบคุณ */
.feedback-card.sent .fb-topics,
.feedback-card.sent .fb-text,
.feedback-card.sent .fb-count,
.feedback-card.sent .fb-contact,
.feedback-card.sent .fb-note,
.feedback-card.sent .donate-ok { display: none; }

/* ============ แผ่นสนับสนุน (QR) — เปิดจากปุ่ม 💝 ในเมนู ☰ ============ */
.donate-sheet {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.donate-sheet.open { opacity: 1; pointer-events: auto; }
.donate-backdrop { position: absolute; inset: 0; background: rgba(40, 30, 20, 0.55); backdrop-filter: blur(3px); }
.donate-card {
  position: relative;
  width: min(360px, 88vw);
  max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #FFFDF8, #F7EEDF);
  border-radius: 24px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 26px 60px rgba(60, 40, 20, 0.32);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.donate-sheet.open .donate-card { transform: translateY(0) scale(1); }
.donate-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--beige); background: rgba(255,255,255,0.8);
  color: var(--ink-soft); font-size: 13px; cursor: pointer;
}
.donate-emoji { font-size: 34px; margin-bottom: 6px; }
.donate-card h3 { font-family: 'IBM Plex Serif', serif; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.donate-sub { font-size: 13px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; }
.donate-qr {
  width: 210px; height: 210px; margin: 0 auto 12px;
  background: #fff; border-radius: 16px; padding: 10px;
  border: 1px solid var(--beige);
  box-shadow: 0 8px 22px rgba(92, 74, 60, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.donate-qr canvas, .donate-qr img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; }
.donate-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.donate-note { font-size: 11.5px; color: var(--ink-soft); opacity: 0.85; margin-top: 5px; }
.donate-ok {
  margin-top: 16px; width: 100%;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #C68A72, #B07A65 60%, #9A6450);
  border: none; border-radius: 14px; padding: 13px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(176, 122, 101, 0.36);
}

.app-menu-sec {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.75;
  margin: 12px 4px 4px;
}
.app-menu-list { display: flex; flex-direction: column; gap: 3px; }
.app-menu-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 13px;
  color: var(--ink); text-decoration: none;
  transition: background var(--transition), transform 0.12s ease;
}
.app-menu-item:hover { background: var(--beige); }
.app-menu-item:active { transform: scale(0.98); }
.app-menu-item .ami-ic { font-size: 22px; width: 30px; text-align: center; flex: 0 0 auto; }
.app-menu-item .ami-tx { font-size: 15px; }
.app-menu-item.current { background: rgba(216, 82, 63, 0.1); font-weight: 600; }

.app-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.app-menu-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid var(--beige); background: rgba(255, 255, 255, 0.5);
  color: var(--ink); text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform 0.12s ease;
}
.app-menu-chip:hover { background: var(--cream); border-color: var(--clay); }
.app-menu-chip:active { transform: scale(0.97); }
.app-menu-chip .amc-ic { font-size: 18px; flex: 0 0 auto; }
.app-menu-chip .amc-tx { font-size: 13px; line-height: 1.2; }

body.app-menu-lock { overflow: hidden; }

/* ============ "เร็วๆ นี้" card — ห้องที่ยังไม่เปิด (เช่น บทความในคาเฟ่) ============ */
.coming-soon-card {
  margin: 22px auto 8px;
  max-width: 480px;
  text-align: center;
  padding: 34px 26px 30px;
  border: 1.5px dashed rgba(176, 125, 98, 0.45);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.72);
}
.coming-soon-card .coming-soon-icon { font-size: 40px; margin-bottom: 10px; }
.coming-soon-card h4 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.coming-soon-card p {
  font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
}

/* ห้องที่ปิดชั่วคราว — โชว์เฉพาะการ์ด "เร็วๆ นี้" ซ่อนของเดิมไว้ทั้งหมด */
.alone-pane.is-closed > *:not(.coming-soon-card) { display: none !important; }
.alone-pane.is-closed { display: none; }
.alone-content.subroom-active .alone-pane.is-closed.active { display: flex !important; align-items: center; justify-content: center; }

/* ปุ่มไอคอนแถวล่างของห้องระบายสี */
.color-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.color-actions .color-icon-btn { width: 44px; height: 44px; font-size: 17px; }
.color-actions .color-icon-btn.primary {
  background: linear-gradient(180deg, #C08A6B, var(--clay));
  color: #fff; border-color: transparent;
}

/* playtest #2: ชื่อแบบทดสอบตัดกลางคำ ("ดวงใ/จ" ตัว จ หล่นบรรทัดเดียว) — เปลี่ยนมาตัดตรง
   ขอบเขตคำ (มี ZWSP คั่นคำในข้อความ) + ลดขนาดฟอนต์นิดให้พอดีกรอบ ไม่หล่นตัวเดียว */
.quiz-menu-card { min-width: 0; }
.quiz-menu-name, .quiz-menu-desc {
  display: block; width: 100%;
  white-space: normal; overflow-wrap: break-word; word-break: normal;
  line-height: 1.3;
}
.quiz-menu-name { font-size: 15.5px; }

/* โลโก้ในหัว: หน้าที่ไม่ใช่ห้องหลัก แตะแล้วกลับแผนที่ → ทำให้ดูกดได้ */
body:not([data-page="home"]) header .brand { cursor: pointer; }

/* ============================================================
   Round close/✕ buttons — keep them perfectly circular on mobile.
   playtest (iPhone): inside flex rows a fixed-width button can still be
   squeezed narrower than its height → border-radius:50% renders an oval.
   Lock the box: no shrink, square aspect, content centered.
   ============================================================ */
.close-btn,
.bookmark-close,
.privacy-close,
.sri-x,
.donate-close,
.submit-card .close-btn,
.hs-close {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0 !important;
  min-width: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn > svg,
.bookmark-close > svg,
.privacy-close > svg,
.donate-close > svg { width: 45%; height: 45%; }

/* ============================================================
   พิพิธภัณฑ์ มุมกว้างบนมือถือ — คุมขนาดการ์ดไม่ให้รูปทับกัน/ทับปุ่ม
   (playtest 16 ก.ค.: รูป Display ล้น + ข้อความทับรูป + ปุ่มล่างทับ)
   ============================================================ */
@media (max-width: 700px) {
  /* มุมกว้าง = ตาราง 2×3 · JS ขยายแต่ละการ์ดให้เต็มช่อง (contain)
     ป้ายข้อความบางที่สุด → การ์ดเตี้ยลง รูปจึงโตเต็มความกว้างช่อง (playtest: รูปเล็กไป) */
  .mg-room.overview-mode .frame img { max-height: 34vh; }
  .mg-room.overview-mode .plaque {
    margin-top: 5px;
    padding: 4px 10px;
    max-width: 92%;
    box-shadow: 0 3px 10px rgba(92, 74, 60, 0.10);
  }
  .mg-room.overview-mode .plaque-title { font-size: 11.5px; line-height: 1.25; }
  /* ซ่อนบรรทัดชื่อ/ปี ในมุมกว้าง — เห็นตอนกดเข้าไปดูใกล้ๆ (ทำให้การ์ดเตี้ย รูปโต) */
  .mg-room.overview-mode .plaque-meta  { display: none; }
  /* ป้ายคำ (โน้ต) ก็คุมความกว้างไม่ให้ล้น */
  .mg-room.overview-mode .note { max-width: 82vw; }
}