/* Foobow Storybook Sanctuary
   A shared visual language for every ritual: place, guide, object, and response. */

.quiet-hub {
  color: #263e3a;
  background:
    linear-gradient(180deg, rgba(255, 252, 241, .92), rgba(246, 238, 215, .94)),
    url("../assets/foobow/backgrounds/tab-blessings-light.png") center / cover;
  border-color: rgba(132, 96, 40, .24);
  box-shadow: 0 24px 70px rgba(51, 63, 48, .18);
}

.quiet-hub-kicker,
.quiet-grid-heading,
.quiet-feature-copy small { color: #9c572f; }
.quiet-hub-intro > p:last-of-type { color: #53645d; }
.quiet-grid-heading span:last-child { color: #65746d; }
.quiet-mood { color: #31554e; border-color: rgba(59, 100, 89, .24); background: rgba(255, 255, 255, .7); }
.quiet-mood.active,
.quiet-mood:hover { color: #fffdf4; background: #317565; border-color: #317565; }

.quiet-feature {
  color: #253d38;
  grid-template-columns: minmax(280px, 48%) 1fr;
  background: rgba(255, 253, 245, .9);
  border-color: rgba(135, 91, 37, .28);
  box-shadow: 0 16px 40px rgba(48, 64, 52, .18);
}
.quiet-feature-copy { padding-left: clamp(22px, 4vw, 48px); }
.quiet-feature-copy > span:not(.quiet-feature-action) { color: #5e6b66; }
.quiet-feature-action { color: #9a522d; border-color: #b5663c; }

.quiet-game {
  min-height: 286px;
  padding: 12px 12px 19px;
  color: #263b37;
  border-color: rgba(84, 103, 84, .22);
  background: rgba(255, 253, 246, .88);
  box-shadow: 0 10px 25px rgba(55, 69, 58, .11);
  overflow: hidden;
}
.quiet-game:nth-child(2),
.quiet-game:nth-child(5) { background: rgba(255, 249, 232, .94); }
.quiet-game:hover { border-color: #b96d43; background: #fffdf6; box-shadow: 0 18px 34px rgba(55, 69, 58, .18); }
.quiet-game strong { margin: 14px 8px 0; font-size: 1.55rem; }
.quiet-game small { margin: 5px 8px 0; color: #66736d; }
.quiet-game-arrow { color: #a9542d; }

.ritual-story-scene {
  position: relative;
  display: block;
  width: 100%;
  height: 154px;
  overflow: hidden;
  border: 1px solid rgba(78, 102, 83, .2);
  border-radius: 15px;
  background: linear-gradient(#bfe2e5 0 48%, #a7cfb0 48% 70%, #71a39a 70%);
  isolation: isolate;
}
.scene-feature { height: 100%; min-height: 272px; border: 0; border-radius: 0; }
.story-sky { position: absolute; inset: 0 0 34%; background: linear-gradient(180deg, #a9d8e9, #f9dfaf); }
.story-sun { position: absolute; top: 15px; right: 20px; width: 34px; height: 34px; border-radius: 50%; background: #ffd878; box-shadow: 0 0 0 8px rgba(255, 226, 151, .24); }
.story-hill { position: absolute; bottom: 34%; width: 78%; height: 47%; border-radius: 52% 52% 0 0; transform: rotate(-4deg); }
.story-hill-far { left: -16%; background: #91b99d; opacity: .9; }
.story-hill-near { right: -27%; bottom: 25%; background: #5e9079; transform: rotate(7deg); }
.story-water { position: absolute; inset: 68% 0 0; background: linear-gradient(180deg, #76b7b5, #43888c); }
.story-water::before { content: ""; position: absolute; inset: 10px 8%; border-top: 2px solid rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
.story-path { position: absolute; left: 22%; bottom: -18%; width: 54%; height: 56%; border-radius: 50% 50% 0 0; background: #e0bf84; transform: perspective(80px) rotateX(52deg); }
.story-character { position: absolute; left: 19%; bottom: 25px; width: 27px; height: 43px; border-radius: 48% 48% 36% 36%; background: #d86f50; filter: drop-shadow(0 3px 2px rgba(35,55,42,.2)); z-index: 4; }
.story-character::before { content: ""; position: absolute; left: 5px; top: -17px; width: 18px; height: 20px; border-radius: 48% 48% 44% 44%; background: #f3c79e; box-shadow: inset 0 5px #4d4038; }
.story-character::after { content: ""; position: absolute; left: -6px; top: 7px; width: 38px; height: 13px; border-top: 4px solid #f3c79e; border-radius: 50%; transform: rotate(-8deg); }
.story-place,
.story-prop,
.story-effect { position: absolute; z-index: 3; }
.story-effect { width: 8px; height: 8px; border-radius: 50%; background: #fff1a5; box-shadow: 0 0 12px #fff2a2; animation: storybookFloat 2.8s ease-in-out infinite; }
.story-effect-one { left: 55%; top: 31%; }
.story-effect-two { left: 65%; top: 22%; animation-delay: -.9s; }

/* Temple veranda and wooden fish. */
.scene-muyu .story-place { left: 5%; right: 5%; bottom: 26px; height: 45px; border-top: 11px solid #6f3b2b; border-radius: 50% 50% 0 0; box-shadow: inset 12px 0 #9e603e, inset -12px 0 #9e603e; }
.scene-muyu .story-character { left: 28%; bottom: 27px; }
.scene-muyu .story-prop { right: 24%; bottom: 28px; width: 48px; height: 28px; border-radius: 52% 46% 44% 54%; background: #8b4d2e; box-shadow: inset -8px -6px #60331f, 0 5px 0 #4d3926; }
.scene-muyu .story-prop::before { content: ""; position: absolute; right: 8px; top: -10px; width: 9px; height: 28px; border-radius: 5px; background: #ddb66d; transform: rotate(-33deg); transform-origin: bottom; }

/* Home window and a lamp held close. */
.scene-lamp .story-sky { background: linear-gradient(#725f87, #e79b79 72%, #f6ca8a); }
.scene-lamp .story-sun { width: 25px; height: 25px; background: #fff0c2; }
.scene-lamp .story-place { right: 6%; bottom: 20px; width: 66%; height: 92px; background: #ead3a7; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 6px #765040; }
.scene-lamp .story-place::before { content: ""; position: absolute; inset: 15px 20px 25px; background: linear-gradient(90deg, transparent 47%, #6e4939 48% 52%, transparent 53%), linear-gradient(transparent 47%, #6e4939 48% 52%, transparent 53%), #ffd67e; box-shadow: 0 0 18px #ffd278; }
.scene-lamp .story-character { left: 22%; }
.scene-lamp .story-prop { left: 42%; bottom: 47px; width: 27px; height: 34px; border: 3px solid #b55f34; border-radius: 8px 8px 13px 13px; background: #ffd363; box-shadow: 0 0 18px #ffcf5f; }

/* Courtyard altar and visible incense smoke. */
.scene-incense .story-place { left: 7%; right: 7%; bottom: 31px; height: 56px; border: 7px solid #7d4934; border-bottom: 0; border-radius: 50% 50% 0 0; }
.scene-incense .story-character { left: 21%; }
.scene-incense .story-prop { right: 26%; bottom: 29px; width: 49px; height: 24px; border-radius: 7px 7px 16px 16px; background: #86613b; border-top: 5px solid #dbad63; }
.scene-incense .story-prop::before,
.scene-incense .story-prop::after { content: ""; position: absolute; bottom: 20px; width: 3px; height: 38px; border-radius: 50%; background: linear-gradient(#edf7e9, rgba(255,255,255,0)); transform: rotate(8deg); animation: storybookSmoke 3s ease-in-out infinite; }
.scene-incense .story-prop::before { left: 17px; }
.scene-incense .story-prop::after { right: 15px; animation-delay: -1.3s; }

/* Mountain pass and prayer wheel. */
.scene-wheel .story-sky { background: linear-gradient(#94c8e1, #f0d2a5); }
.scene-wheel .story-hill-far { height: 66%; background: #839c96; clip-path: polygon(0 100%, 42% 5%, 100% 100%); border-radius: 0; }
.scene-wheel .story-place { right: 16%; bottom: 25px; width: 12px; height: 78px; background: #7a452f; border-radius: 5px; }
.scene-wheel .story-place::before { content: ""; position: absolute; left: -22px; top: 10px; width: 56px; height: 46px; border-radius: 8px; background: linear-gradient(90deg, #6a241e, #c65c3e, #6a241e); border: 5px solid #e1ad54; box-sizing: border-box; }
.scene-wheel .story-character { left: 25%; }
.scene-wheel .story-effect { width: 28px; height: 4px; border-radius: 50%; background: transparent; border-top: 2px solid #fff1bb; box-shadow: none; }

/* Dawn breathing pond. */
.scene-breathe .story-sky { background: linear-gradient(#8fcddd, #f8d59e 75%); }
.scene-breathe .story-character { left: 48%; bottom: 28px; width: 34px; height: 30px; border-radius: 50% 50% 30% 30%; background: #587568; }
.scene-breathe .story-character::after { left: -13px; top: 14px; width: 60px; border-color: #587568; border-width: 6px; }
.scene-breathe .story-prop { left: calc(50% - 19px); bottom: 18px; width: 44px; height: 17px; border-radius: 50%; background: #f1b6b6; box-shadow: 13px -2px #f4d2b5, -13px -2px #f4d2b5; animation: storybookBreathe 5s ease-in-out infinite; }
.scene-feature .story-character { transform: scale(1.5); transform-origin: bottom; }
.scene-feature .story-prop { transform: scale(1.5); transform-origin: center bottom; }

/* Garden stepping stones. */
.scene-gratitudeGarden .story-place { left: 20%; bottom: 26px; width: 64%; height: 56px; border-bottom: 7px solid #936640; border-radius: 50%; }
.scene-gratitudeGarden .story-prop { left: 37%; bottom: 24px; width: 27px; height: 13px; border-radius: 50%; background: #ead8af; box-shadow: 35px -8px #d4c093, 67px -1px #ead8af; }
.scene-gratitudeGarden .story-character { left: 19%; }
.scene-gratitudeGarden .story-effect { background: #ffc867; box-shadow: 0 0 12px #ffbf55; }

/* Kyoto river lanterns. */
.scene-lantern .story-sky { background: linear-gradient(#283b68, #835f7d 62%, #dd8e6c); }
.scene-lantern .story-sun { background: #fff0c3; box-shadow: 0 0 17px #fff0c3; }
.scene-lantern .story-place { right: 12%; bottom: 28px; width: 61px; height: 59px; border: solid #49322d; border-width: 7px 4px 0; }
.scene-lantern .story-place::before { content: ""; position: absolute; left: -13px; right: -13px; top: -13px; height: 9px; border-radius: 50%; background: #a54d3d; }
.scene-lantern .story-character { left: 21%; }
.scene-lantern .story-prop,
.scene-lantern .story-effect { width: 22px; height: 27px; border: 2px solid #b55936; border-radius: 5px; background: #ffd16e; box-shadow: 0 0 13px #ffcc64; }
.scene-lantern .story-prop { left: 43%; bottom: 34px; animation: storybookFloat 3s ease-in-out infinite; }
.scene-lantern .story-effect-one { left: 57%; top: 32%; }
.scene-lantern .story-effect-two { left: 72%; top: 16%; }

/* Illustrated ritual cards: recognizable objects in a place, rather than diagram shapes. */
.ritual-story-scene {
  background:
    linear-gradient(180deg, rgba(255, 252, 235, .06), rgba(24, 73, 67, .28)),
    url("../assets/foobow/backgrounds/ritual-lake.png") center / cover;
  box-shadow: inset 0 -35px 48px rgba(20, 61, 55, .2);
}
.ritual-story-scene.scene-lamp,
.ritual-story-scene.scene-lantern {
  background-image:
    linear-gradient(180deg, rgba(25, 31, 57, .06), rgba(28, 32, 52, .3)),
    url("../assets/foobow/backgrounds/mountain-moon.png");
}
.ritual-story-scene.scene-muyu,
.ritual-story-scene.scene-incense,
.ritual-story-scene.scene-breathe,
.ritual-story-scene.scene-gratitudeGarden {
  background-image:
    linear-gradient(180deg, rgba(255, 252, 235, .08), rgba(24, 73, 67, .24)),
    url("../assets/foobow/backgrounds/tab-blessings-light.png");
}
.ritual-story-scene .story-sky,
.ritual-story-scene .story-sun,
.ritual-story-scene .story-hill,
.ritual-story-scene .story-water,
.ritual-story-scene .story-path,
.ritual-story-scene .story-place,
.ritual-story-scene .story-character { display: none; }
.ritual-story-scene .story-prop {
  left: 50%;
  right: auto;
  bottom: 5%;
  width: 72%;
  height: 88%;
  border: 0;
  border-radius: 0;
  background: center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 9px rgba(20, 44, 38, .32));
  transform: translateX(-50%);
  transform-origin: center bottom;
}
.ritual-story-scene .story-prop::before,
.ritual-story-scene .story-prop::after { content: none; }
.scene-muyu .story-prop { background-image: url("../assets/foobow/sprites/storybook/ritual-muyu.webp"); }
.scene-lamp .story-prop { width: 56%; background-image: url("../assets/foobow/sprites/storybook/ritual-wish-lamp.webp"); filter: drop-shadow(0 0 16px rgba(255, 193, 83, .58)); }
.scene-incense .story-prop { width: 60%; background-image: url("../assets/foobow/sprites/storybook/ritual-incense.webp"); }
.scene-wheel .story-prop { width: 55%; background-image: url("../assets/foobow/sprites/storybook/ritual-prayer-wheel.webp"); }
.scene-breathe .story-prop { width: 72%; background-image: url("../assets/foobow/sprites/storybook/ritual-breath-lotus.webp"); animation: storybookBreathe 6s ease-in-out infinite; }
.scene-gratitudeGarden .story-prop { width: 65%; background-image: url("../assets/foobow/sprites/storybook/ritual-pebbles.webp"); }
.scene-lantern .story-prop { width: 48%; background-image: url("../assets/foobow/sprites/storybook/kyoto-lantern.webp"); filter: drop-shadow(0 0 16px rgba(255, 188, 73, .58)); animation: storybookFloat 3.6s ease-in-out infinite; }
.ritual-story-scene .story-effect { z-index: 5; }
.scene-feature .story-prop { width: min(76%, 330px); height: 82%; bottom: 4%; transform: translateX(-50%); }
.scene-feature .story-effect-one { left: 25%; top: 30%; }
.scene-feature .story-effect-two { left: 72%; top: 22%; }

.quiet-game:hover .story-prop,
.quiet-game:focus-visible .story-prop { transform: translateX(-50%) translateY(-4px) scale(1.035); }
.quiet-game .story-prop { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }

.scene-quick { height: 72px; border-radius: 13px; }
.scene-quick .story-prop { width: 48%; height: 92%; bottom: 1%; transform: translateX(-50%); }
.quick-ritual-card .ritual-story-scene { grid-column: 1 / -1; }

/* Focus play happens inside the same painted world instead of a generic dark void. */
.ritual-focus-dialog[data-ritual] {
  color: #263d39;
  background:
    linear-gradient(180deg, rgba(255, 252, 241, .68), rgba(239, 230, 202, .92)),
    url("../assets/foobow/backgrounds/ritual-lake.png") center / cover;
  border: 7px solid rgba(247, 229, 183, .95);
  box-shadow: 0 32px 110px rgba(20, 43, 37, .46), inset 0 0 0 1px #9a6a3c;
}
.ritual-focus-dialog[data-ritual="lamp"] { background-image: linear-gradient(180deg, rgba(28, 39, 63, .32), rgba(73, 48, 52, .66)), url("../assets/foobow/backgrounds/mountain-moon.png"); color: #fff6df; }
.ritual-focus-dialog::backdrop { background: rgba(31, 50, 45, .58); backdrop-filter: blur(8px) saturate(.7); }
.ritual-focus-dialog[data-ritual] .ritual-focus-shell { background: linear-gradient(90deg, rgba(255,255,255,.12), transparent 22% 78%, rgba(255,255,255,.12)); }
.ritual-focus-dialog[data-ritual] .ritual-focus-brand,
.ritual-focus-dialog[data-ritual] .ritual-focus-heading p { color: #92502e; }
.ritual-focus-dialog[data-ritual] .ritual-focus-close { color: #294b44; background: rgba(255, 253, 244, .88); border-color: rgba(77, 95, 73, .34); }
.ritual-focus-dialog[data-ritual] .ritual-focus-stage > section {
  border-color: rgba(111, 84, 45, .22);
  background-color: rgba(255, 253, 244, .88);
  box-shadow: 0 18px 54px rgba(51, 62, 50, .2);
  backdrop-filter: blur(8px);
}
.ritual-focus-dialog[data-ritual] .ritual-focus-footer { color: #435d56; }

.ritual-focus-dialog[data-ritual="muyu"] .muyu-stage,
.ritual-focus-dialog[data-ritual="incense"] .incense-stage,
.ritual-focus-dialog[data-ritual="wheel"] .wheel-stage,
.ritual-focus-dialog[data-ritual="lamp"] .lamp-stage,
.ritual-focus-dialog[data-ritual="breathe"] .breath-orb-container {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(87, 79, 52, .3);
  border-radius: 24px;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -55px 70px rgba(20, 54, 47, .16);
}
.ritual-focus-dialog[data-ritual="muyu"] .muyu-stage,
.ritual-focus-dialog[data-ritual="incense"] .incense-stage,
.ritual-focus-dialog[data-ritual="breathe"] .breath-orb-container {
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(32,78,68,.2)), url("../assets/foobow/backgrounds/tab-blessings-light.png");
}
.ritual-focus-dialog[data-ritual="wheel"] .wheel-stage {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(33,69,63,.25)), url("../assets/foobow/backgrounds/ritual-lake.png");
}
.ritual-focus-dialog[data-ritual="lamp"] .lamp-stage {
  background-image: linear-gradient(180deg, rgba(23,30,52,.08), rgba(16,29,43,.38)), url("../assets/foobow/backgrounds/mountain-moon.png");
}
.ritual-focus-dialog[data-ritual="muyu"] .muyu-stage::before,
.ritual-focus-dialog[data-ritual="incense"] .incense-stage::before,
.ritual-focus-dialog[data-ritual="wheel"] .wheel-stage::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -34px;
  height: 88px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(235,203,137,.82), rgba(103,76,47,.92));
  box-shadow: inset 0 8px rgba(255,244,206,.28);
}
.ritual-focus-dialog[data-ritual="muyu"] .muyu-rebound-wrapper,
.ritual-focus-dialog[data-ritual="incense"] .incense-censer-wrap,
.ritual-focus-dialog[data-ritual="wheel"] .wheel-container { z-index: 2; }

.ritual-focus-dialog[data-ritual="muyu"] .muyu-btn {
  width: 190px;
  height: 150px;
  background: url("../assets/foobow/sprites/storybook/ritual-muyu.webp") center / contain no-repeat;
  filter: drop-shadow(0 14px 18px rgba(58, 30, 17, .3));
}
.ritual-focus-dialog[data-ritual="muyu"] .muyu-icon { opacity: 0; }
.ritual-focus-dialog[data-ritual="muyu"] .muyu-mallet { right: calc(50% - 102px); }

.ritual-focus-dialog[data-ritual="lamp"] .lamp-body-wrap {
  width: 180px;
  height: 190px;
  background: url("../assets/foobow/sprites/storybook/ritual-wish-lamp.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(255, 183, 64, .52));
}
.ritual-focus-dialog[data-ritual="lamp"] .lamp-flame { opacity: .01; }
.ritual-focus-dialog[data-ritual="lamp"] .lamp-glow { width: 150px; height: 150px; opacity: .5; }

.ritual-focus-dialog[data-ritual="incense"] .incense-censer-wrap {
  width: 210px;
  height: 180px;
  background: url("../assets/foobow/sprites/storybook/ritual-incense.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 12px 18px rgba(48, 35, 20, .3));
}
.ritual-focus-dialog[data-ritual="incense"] .incense-censer-svg,
.ritual-focus-dialog[data-ritual="incense"] .incense-sticks { opacity: 0; }

.ritual-focus-dialog[data-ritual="incense"] .incense-intentions {
  gap: 10px;
}
.ritual-focus-dialog[data-ritual="incense"] .choice-pill {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid rgba(117, 83, 44, .24);
  border-radius: 999px;
  color: #405650;
  background: rgba(255, 253, 246, .72);
  box-shadow: 0 4px 14px rgba(67, 65, 47, .06);
  font: 600 .86rem/1.1 var(--font-sans);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ritual-focus-dialog[data-ritual="incense"] .choice-pill:hover,
.ritual-focus-dialog[data-ritual="incense"] .choice-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(171, 104, 42, .6);
  box-shadow: 0 8px 20px rgba(108, 71, 34, .12);
}
.ritual-focus-dialog[data-ritual="incense"] .choice-pill.active {
  color: #fffaf0;
  border-color: #9c4f2c;
  background: linear-gradient(135deg, #b86035, #873d26);
  box-shadow: 0 8px 22px rgba(134, 60, 37, .22);
}
.ritual-focus-dialog[data-ritual="incense"] .breath-trace-wrap {
  min-height: 92px;
  justify-content: center;
  border: 1px solid rgba(163, 111, 48, .18);
  background:
    radial-gradient(circle at 50% 62%, rgba(240, 190, 100, .17), transparent 30%),
    linear-gradient(135deg, rgba(255, 251, 238, .72), rgba(239, 224, 188, .28));
}
.ritual-focus-dialog[data-ritual="incense"] .trace-hint {
  color: #6f665a;
  letter-spacing: .02em;
}

.ritual-focus-dialog[data-ritual="wheel"] .wheel-drum {
  width: 190px;
  height: 225px;
  background: url("../assets/foobow/sprites/storybook/ritual-prayer-wheel.webp") center / contain no-repeat;
  filter: drop-shadow(0 14px 20px rgba(54, 31, 17, .3));
}
.ritual-focus-dialog[data-ritual="wheel"] .wheel-svg,
.ritual-focus-dialog[data-ritual="wheel"] .wheel-pendulum { opacity: 0; }

/* Gratitude is now a recognizable lakeside garden with a guide and three destinations. */
.gratitude-pond {
  min-height: 310px;
  border-radius: 26px;
  border-color: rgba(86, 91, 61, .32);
  background:
    linear-gradient(180deg, rgba(144, 201, 218, .18), rgba(33, 100, 95, .44)),
    url("../assets/foobow/backgrounds/ritual-lake.png") center / cover;
}
.gratitude-garden-card {
  color: #29413c;
  background: linear-gradient(145deg, rgba(255, 253, 244, .97), rgba(238, 225, 193, .96));
  border-color: rgba(112, 82, 43, .28);
  box-shadow: 0 20px 50px rgba(55, 67, 52, .2);
}
.gratitude-garden-kicker,
.gratitude-form label,
.gratitude-status { color: #8f4d2d; }
.gratitude-garden-copy > p:not(.gratitude-garden-kicker),
.gratitude-privacy { color: #5a6b64; }
.gratitude-session-count { color: #365d54; border-color: rgba(54, 93, 84, .28); background: rgba(255,255,255,.62); }
.gratitude-form input { color: #263d38; border-color: rgba(67, 98, 88, .3); background: rgba(255,255,255,.78); }
.gratitude-form input::placeholder { color: #75857e; }
.gratitude-again { color: #315b52; border-color: rgba(49, 91, 82, .42); background: rgba(255,255,255,.64); }
.gratitude-pond::before { inset: auto 0 0; height: 42%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(80, 145, 139, .18), rgba(34, 100, 99, .72)); }
.gratitude-moon { width: 48px; height: 48px; top: 18px; right: 24px; background: #ffe9a4; box-shadow: 0 0 28px #ffe4a0; }
.gratitude-lotus { color: #fff1b3; }
.storybook-garden-bank { position: absolute; left: -5%; right: -5%; bottom: -16px; height: 88px; z-index: 2; border-radius: 50% 50% 0 0; background: linear-gradient(#7aa174, #315f50); box-shadow: inset 0 13px rgba(255, 225, 142, .12); }
.storybook-garden-guide { position: absolute; left: 8%; bottom: 52px; width: 52px; height: 75px; z-index: 4; filter: drop-shadow(0 6px 5px rgba(22,50,41,.28)); transition: transform .7s ease; }
.guide-head { position: absolute; left: 12px; top: 0; width: 30px; height: 32px; border-radius: 48%; background: #f1c59a; box-shadow: inset 0 8px #413a34; }
.guide-body { position: absolute; left: 5px; top: 28px; width: 43px; height: 47px; border-radius: 17px 17px 9px 9px; background: #d9684d; }
.guide-arm { position: absolute; left: 34px; top: 39px; width: 31px; height: 8px; border-radius: 8px; background: #f1c59a; transform: rotate(-18deg); transform-origin: left; }
.storybook-memory-path { position: absolute; left: 24%; right: 8%; bottom: 28px; z-index: 5; display: flex; justify-content: space-around; align-items: flex-end; }
.storybook-memory-stone { position: relative; width: 55px; height: 24px; border-radius: 50%; background: #d7c79d; border: 2px solid rgba(255,245,211,.7); box-shadow: 0 7px 11px rgba(17,54,51,.35); transition: transform .55s ease, background .55s ease; }
.storybook-memory-stone:nth-child(2) { transform: translateY(-17px); }
.storybook-memory-stone:nth-child(3) { transform: translateY(-3px); }
.memory-flower { position: absolute; left: 19px; top: -22px; width: 16px; height: 16px; border-radius: 50%; opacity: 0; transform: scale(.2); background: #ffd46b; box-shadow: 0 -9px #f5a8a8, 0 9px #f5a8a8, 9px 0 #f5a8a8, -9px 0 #f5a8a8; transition: opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.storybook-memory-stone.filled { background: #f1ddb0; transform: translateY(-7px) scale(1.07); }
.storybook-memory-stone:nth-child(2).filled { transform: translateY(-24px) scale(1.07); }
.storybook-memory-stone.filled .memory-flower { opacity: 1; transform: scale(.85); }
.gratitude-pond.garden-complete .storybook-garden-guide { transform: translateX(10px) rotate(-3deg); }
.gratitude-pond.garden-complete .guide-arm { animation: storybookWave 1.2s ease-in-out 2; }
.gratitude-pebble { z-index: 6; max-width: 118px; color: #263d38; background: linear-gradient(145deg, #fff1ca, #cfb57d); }

/* The world-game frame now belongs to the same sanctuary instead of a black arcade shell. */
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] {
  padding: 10px;
  border: 1px solid rgba(111, 78, 38, .7);
  border-radius: 34px;
  background: #f3e7c7;
  box-shadow: 0 32px 100px rgba(32, 46, 39, .38);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"]::backdrop { background: rgba(231, 225, 205, .72); backdrop-filter: blur(8px) saturate(.65); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .sanctuary-3d-stage-wrapper,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .sanctuary-3d-viewport { border-radius: 26px; overflow: hidden; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-top-bar,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-panel,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-badge { background: rgba(252, 247, 230, .9); color: #263e39; border-color: rgba(104, 82, 46, .3); box-shadow: 0 8px 26px rgba(35, 48, 40, .18); backdrop-filter: blur(12px); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-coords { color: #245b70; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-title { color: #203b36; text-shadow: none; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-goal-counter { color: #744114; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-goal-bar-wrap { background: rgba(54, 79, 70, .16); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tab { color: #dbe8e4; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tab:hover { color: #fffaf0; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tab.active { color: #ffe7ad; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-species-picker,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-wish-picker { background: rgba(76, 104, 94, .08); border-color: rgba(76, 104, 94, .16); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-secondary-btn,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-btn-sm,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .species-btn,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .wish-btn { color: #38534b; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-secondary-btn,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-btn-sm { border-color: rgba(56, 83, 75, .22); background: rgba(255, 255, 255, .38); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-secondary-btn:disabled,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-btn-sm:disabled { color: #667b74; opacity: .72; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .species-btn.active,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .wish-btn.active { color: #6f4a0e; }

/* Living diorama HUD: one calm visual language across every world deed. */
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-top-bar {
  top: 16px;
  left: 18px;
  right: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tabs,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-tod-picker,
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-top-close-btn {
  background: rgba(19, 42, 42, .86);
  border-color: rgba(255, 248, 226, .24);
  box-shadow: 0 12px 32px rgba(17, 35, 31, .26);
  backdrop-filter: blur(18px) saturate(1.12);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tabs { padding: 5px; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tab {
  min-height: 34px;
  padding: 7px 14px;
  font-size: .8rem;
  letter-spacing: .01em;
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-scenario-tab.active {
  background: linear-gradient(145deg, #f5d67e, #c69239);
  color: #183b36;
  border-color: rgba(255, 247, 211, .76);
  box-shadow: 0 5px 16px rgba(89, 59, 20, .28), inset 0 1px rgba(255,255,255,.62);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-badge {
  top: 70px;
  left: 18px;
  max-width: 390px;
  padding: 15px 17px 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 252, 240, .94), rgba(245, 235, 207, .88));
  border: 1px solid rgba(113, 82, 43, .28);
  box-shadow: 0 16px 40px rgba(28, 45, 38, .18), inset 0 1px rgba(255,255,255,.76);
}
.game-quest-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-coords {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.game-chapter-pill {
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  color: #734820;
  background: rgba(233, 202, 126, .28);
  border: 1px solid rgba(154, 109, 45, .2);
  font: 700 .62rem/1 system-ui, sans-serif;
  letter-spacing: .04em;
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-title {
  margin-bottom: 4px;
  font-size: 1.12rem;
}
.game-quest-story {
  max-width: 35ch;
  margin: 0 0 10px;
  color: #536b63;
  font-size: .78rem;
  line-height: 1.45;
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-goal-counter { font-size: .76rem; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-goal-bar-wrap { height: 7px; }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-goal-bar-fill {
  background: linear-gradient(90deg, #3c8b73, #e7bd5f);
  box-shadow: 0 0 14px rgba(65, 151, 121, .38);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-hud-panel {
  bottom: 16px;
  left: 18px;
  right: 18px;
  min-height: 62px;
  padding: 9px 14px;
  border-radius: 24px;
  background: rgba(255, 251, 235, .91);
  box-shadow: 0 18px 44px rgba(31, 46, 38, .24), inset 0 1px rgba(255,255,255,.72);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] #gamePrimaryActionBtn {
  min-height: 43px;
  padding-inline: 24px;
  background: linear-gradient(135deg, #e86c33, #c93430);
  box-shadow: 0 8px 20px rgba(180, 63, 40, .28), inset 0 1px rgba(255,255,255,.35);
}
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"][data-scenario="toronto-crosswalk"] #gamePrimaryActionBtn { background: linear-gradient(135deg, #2d8f75, #176758); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"][data-scenario="amazon-grove"] #gamePrimaryActionBtn { background: linear-gradient(135deg, #5a9b46, #2f7049); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"][data-scenario="night-corridor"] #gamePrimaryActionBtn { background: linear-gradient(135deg, #e39a45, #b84d42); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"][data-scenario="reading-room"] #gamePrimaryActionBtn { background: linear-gradient(135deg, #b98239, #72502f); }
.sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-3d-overlay-hint {
  bottom: 90px;
  padding: 7px 14px;
  color: #fff8e9;
  background: rgba(21, 45, 42, .82);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 8px 24px rgba(17, 35, 31, .24);
}

@media (max-width: 700px) {
  .sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] .game-quest-badge { left: 12px; right: 12px; max-width: none; }
  .game-quest-story { display: none; }
  .game-chapter-pill { display: none; }
}

@keyframes storybookFloat { 50% { transform: translateY(-8px); } }
@keyframes storybookSmoke { 0% { opacity: 0; transform: translateY(4px) rotate(4deg) scaleX(.7); } 45% { opacity: .8; } 100% { opacity: 0; transform: translate(-8px, -28px) rotate(-9deg) scaleX(1.2); } }
@keyframes storybookBreathe { 50% { transform: scale(1.16); filter: brightness(1.12); } }
@keyframes storybookWave { 50% { transform: rotate(-42deg); } }

body.dark .quiet-hub { color: #f7edda; background: linear-gradient(180deg, rgba(9, 37, 39, .86), rgba(10, 29, 32, .94)), url("../assets/foobow/backgrounds/tab-blessings-dark.png") center / cover; }
body.dark .quiet-game { color: #f8efdd; background: rgba(12, 42, 43, .88); }
body.dark .quiet-game small,
body.dark .quiet-hub-intro > p:last-of-type { color: #cad8d0; }
body.dark .quiet-feature { color: #fff5de; background: rgba(10, 42, 42, .9); }
body.dark .gratitude-garden-card { color: #f7f0de; background: linear-gradient(145deg, rgba(8, 45, 47, .96), rgba(12, 34, 37, .97)); }
body.dark .gratitude-garden-kicker,
body.dark .gratitude-form label,
body.dark .gratitude-status { color: #e2c17e; }
body.dark .gratitude-garden-copy > p:not(.gratitude-garden-kicker),
body.dark .gratitude-privacy { color: #bfd0c7; }
body.dark .gratitude-form input { color: #fff8e7; background: rgba(255,255,255,.075); }

@media (max-width: 700px) {
  .quiet-feature { grid-template-columns: 1fr; }
  .scene-feature { min-height: 215px; }
  .quiet-game { min-height: 245px; }
  .gratitude-pond { min-height: 250px; }
  .storybook-garden-guide { transform: scale(.82); transform-origin: bottom left; }
  .storybook-memory-path { left: 22%; right: 3%; }
  .sanctuary-3d-dialog[data-visual-style="storybook-sanctuary"] { padding: 4px; border-radius: 20px; }
}

@media (max-width: 420px) {
  .quiet-game { min-height: 225px; padding: 8px 8px 17px; }
  .ritual-story-scene { height: 122px; }
  .scene-feature { height: 200px; }
  .quiet-game strong { font-size: 1.2rem; }
  .gratitude-pond { min-height: 230px; }
  .storybook-memory-stone { width: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-effect,
  .scene-incense .story-prop::before,
  .scene-incense .story-prop::after,
  .scene-breathe .story-prop,
  .gratitude-pond.garden-complete .guide-arm { animation: none; }
  .storybook-memory-stone,
  .memory-flower,
  .storybook-garden-guide { transition: none; }
}