.cn3dh-root,
.cn3dh-root * {
  box-sizing: border-box;
}
.cn3dh-root {
  --cn3dh-h: var(--cn3dh-desktop-height, 720px);
  --cn3dh-bg: #24170f;
  --cn3dh-card: rgba(255, 249, 239, .94);
  --cn3dh-text: #37261b;
  --cn3dh-muted: #795f4c;
  --cn3dh-accent: #bb7750;
  --cn3dh-soft: rgba(255, 245, 229, .7);
  --cn3dh-calm: #55836a;
  --cn3dh-attention: #c9833f;
  --cn3dh-critical: #bb4d3d;
  position: relative;
  width: 100%;
  min-height: var(--cn3dh-h);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 231, 190, .18), transparent 45%),
    linear-gradient(135deg, #2a180f, #5a3420 42%, #2a180f);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cn3dh-text);
  box-shadow: 0 28px 70px rgba(38, 23, 14, .25);
  isolation: isolate;
}
.cn3dh-root.cn3dh-mode-fullscreen,
.cn3dh-root.cn3dh-start-fullscreen-layout {
  min-height: min(860px, 92vh);
}
.cn3dh-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  z-index: 50;
  color: #fff5e8;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 211, 153, .28), transparent 34%),
    linear-gradient(135deg, #25160e, #5b3620);
  transition: opacity .45s ease, visibility .45s ease;
}
.cn3dh-root.cn3dh-ready .cn3dh-loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cn3dh-loading-orb {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 32%, #fff6cf, #e3a15e 45%, #7c4328 70%);
  box-shadow: 0 0 34px rgba(255, 194, 104, .55);
  animation: cn3dhPulse 1.6s ease-in-out infinite;
  margin: 0 auto;
}
@keyframes cn3dhPulse {
  0%, 100% { transform: scale(.95); opacity: .82; }
  50% { transform: scale(1.06); opacity: 1; }
}
.cn3dh-stage {
  position: relative;
  min-height: var(--cn3dh-h);
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 245, 229, .06), rgba(35, 22, 13, .02)),
    #2c1a10;
}
.cn3dh-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 224, 174, .32), transparent 22%),
    radial-gradient(circle at 30% 82%, rgba(255, 180, 106, .15), transparent 28%),
    linear-gradient(180deg, rgba(31, 18, 10, 0), rgba(31, 18, 10, .24));
  z-index: 3;
  pointer-events: none;
}
.cn3dh-hero-panel {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  pointer-events: none;
}
.cn3dh-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 242, 222, .78);
  color: #71462e;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(36, 22, 12, .12);
  backdrop-filter: blur(12px);
}
.cn3dh-title {
  margin: 10px 0 2px;
  color: #fff7eb;
  text-shadow: 0 3px 24px rgba(0,0,0,.35);
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.03;
}
.cn3dh-dependent {
  margin: 0;
  color: rgba(255, 245, 229, .88);
  font-size: 17px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.cn3dh-status-pill {
  max-width: min(46vw, 420px);
  padding: 13px 16px;
  border-radius: 20px;
  background: rgba(255, 248, 238, .84);
  color: #3d2a1d;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(35, 20, 10, .18);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.cn3dh-care-meter {
  position: absolute;
  left: 22px;
  top: 156px;
  z-index: 12;
  width: min(340px, calc(100% - 44px));
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 248, 238, .84);
  box-shadow: 0 14px 30px rgba(35, 20, 10, .16);
  backdrop-filter: blur(14px);
}
.cn3dh-care-meter span {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 850;
  color: #4b3222;
}
.cn3dh-care-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 62, 42, .16);
}
.cn3dh-care-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #769978, #d3a25f);
  transition: width .42s ease;
}
.cn3dh-scene-shell {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1280px;
  overflow: hidden;
  touch-action: pan-y;
}
.cn3dh-room {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: min(1200px, 112vw);
  height: min(710px, 78vh);
  min-height: 560px;
  transform: translateX(-50%) rotateX(0deg) rotateY(var(--cn3dh-tilt, 0deg));
  transform-style: preserve-3d;
  transition: transform .45s ease;
  will-change: transform;
}
.cn3dh-room-bg,
.cn3dh-room-bg * {
  position: absolute;
}
.cn3dh-wall-back {
  left: 7%;
  top: 6%;
  width: 86%;
  height: 54%;
  border-radius: 34px 34px 8px 8px;
  background:
    radial-gradient(circle at 72% 28%, rgba(255, 220, 170, .35), transparent 28%),
    linear-gradient(90deg, rgba(104, 70, 45, .25) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #9b7457, #725039 55%, #5c3c29);
  background-size: auto, 42px 42px, auto;
  box-shadow: inset 0 -50px 70px rgba(55, 33, 18, .38), inset 0 0 80px rgba(255, 233, 203, .1);
}
.cn3dh-wall-left {
  left: -5%;
  top: 12%;
  width: 26%;
  height: 52%;
  transform: skewY(-8deg);
  border-radius: 30px;
  background: linear-gradient(110deg, #68452e, #8b6041 60%, #6c4932);
  opacity: .92;
  filter: brightness(.88);
}
.cn3dh-wall-right {
  right: -5%;
  top: 12%;
  width: 26%;
  height: 52%;
  transform: skewY(8deg);
  border-radius: 30px;
  background: linear-gradient(250deg, #6b4730, #a0724e 60%, #6c4932);
  opacity: .95;
}
.cn3dh-floor {
  left: 4%;
  bottom: 2%;
  width: 92%;
  height: 43%;
  transform: rotateX(62deg) translateY(18%);
  transform-origin: 50% 100%;
  border-radius: 20px 20px 70px 70px;
  background:
    linear-gradient(90deg, rgba(255, 224, 180, .06), transparent 20%, rgba(0,0,0,.06) 55%, transparent),
    repeating-linear-gradient(90deg, rgba(64, 38, 22, .2) 0 2px, transparent 2px 80px),
    linear-gradient(180deg, #8a5b36, #5b371f 76%, #3d2415);
  box-shadow: inset 0 35px 90px rgba(255, 202, 130, .16), 0 -40px 80px rgba(28, 17, 11, .2);
}
.cn3dh-rug {
  left: 30%;
  bottom: 5%;
  width: 42%;
  height: 22%;
  transform: rotateX(65deg) translateY(4%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 222, 174, .22), transparent 60%),
    repeating-radial-gradient(ellipse at center, rgba(93, 51, 35, .32) 0 8px, rgba(163, 91, 61, .25) 9px 18px),
    #8a4736;
  box-shadow: 0 24px 38px rgba(20, 10, 5, .24);
}
.cn3dh-window {
  right: 17%;
  top: 12%;
  width: 21%;
  height: 24%;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffe8bd, #c6e0e5 46%, #7ba5ad);
  box-shadow: 0 0 0 10px rgba(86, 47, 28, .38), 0 20px 38px rgba(28, 16, 8, .22), inset 0 0 60px rgba(255, 255, 255, .5);
  overflow: hidden;
}
.cn3dh-window span,
.cn3dh-window i {
  background: rgba(79, 45, 28, .56);
  border-radius: 999px;
}
.cn3dh-window span { left: 48%; top: 0; width: 5px; height: 100%; }
.cn3dh-window i { left: 0; top: 48%; width: 100%; height: 5px; }
.cn3dh-curtain {
  top: 9%;
  height: 31%;
  width: 7%;
  background: linear-gradient(90deg, #7f3d34, #b66d54 40%, #74362f);
  box-shadow: inset 10px 0 22px rgba(255, 226, 203, .15), inset -10px 0 18px rgba(0,0,0,.2);
  opacity: .92;
}
.cn3dh-curtain-left { right: 37%; border-radius: 50% 15px 40px 50%; }
.cn3dh-curtain-right { right: 11%; border-radius: 15px 50% 50% 40px; }
.cn3dh-light-beam {
  right: 20%;
  top: 22%;
  width: 38%;
  height: 58%;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 224, 165, .34), transparent 64%);
  transform: rotate(-9deg);
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.cn3dh-sofa {
  position: absolute;
  left: 13%;
  bottom: 19%;
  width: 34%;
  height: 30%;
  filter: drop-shadow(0 28px 30px rgba(15, 8, 4, .36));
}
.cn3dh-sofa span { position: absolute; display: block; }
.cn3dh-sofa-back {
  left: 4%; top: 4%; width: 92%; height: 48%;
  border-radius: 38px 42px 18px 18px;
  background:
    radial-gradient(circle at 26% 28%, rgba(255, 240, 220, .18), transparent 30%),
    linear-gradient(115deg, #7b604f, #b7937b 52%, #6b4e3d);
  box-shadow: inset 0 -18px 28px rgba(31, 17, 8, .24), inset 0 12px 18px rgba(255,255,255,.1);
}
.cn3dh-sofa-seat {
  left: 0; bottom: 14%; width: 100%; height: 42%;
  border-radius: 30px 34px 42px 42px;
  background: linear-gradient(180deg, #c6a58e, #80604d 78%);
  box-shadow: inset 0 12px 18px rgba(255,255,255,.14), inset 0 -22px 34px rgba(32, 17, 8, .32);
}
.cn3dh-pillow {
  width: 22%; height: 32%; bottom: 30%; border-radius: 30% 35% 28% 32%;
  background: linear-gradient(135deg, #d7b071, #986e43);
  transform: rotate(-5deg);
  box-shadow: 0 12px 20px rgba(35, 20, 10, .22), inset 0 8px 14px rgba(255,255,255,.16);
}
.cn3dh-pillow-a { left: 18%; }
.cn3dh-pillow-b { left: 45%; background: linear-gradient(135deg, #9f5d4d, #6f3c35); transform: rotate(7deg); }
.cn3dh-blanket {
  right: 6%; bottom: 8%; width: 28%; height: 62%; border-radius: 30px 14px 35px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 5px, transparent 5px 20px),
    linear-gradient(140deg, #b9715f, #744036);
  transform: rotate(8deg);
  opacity: .95;
}
.cn3dh-table {
  position: absolute;
  left: 38%;
  bottom: 18%;
  width: 30%;
  height: 24%;
  filter: drop-shadow(0 28px 26px rgba(18, 9, 4, .38));
}
.cn3dh-table span { position: absolute; display: block; }
.cn3dh-table-top {
  left: 0; top: 12%; width: 100%; height: 40%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 25%, rgba(255, 220, 160, .23), transparent 22%),
    repeating-linear-gradient(102deg, rgba(67, 34, 14, .12) 0 5px, transparent 5px 22px),
    linear-gradient(135deg, #b77942, #6e3e1f 72%);
  transform: rotateX(55deg);
  box-shadow: inset 0 -14px 25px rgba(38, 18, 6, .35), 0 12px 12px rgba(0,0,0,.12);
}
.cn3dh-table-leg {
  top: 40%; width: 8%; height: 44%; border-radius: 999px;
  background: linear-gradient(90deg, #5e3218, #9b5a2a 45%, #4a2612);
}
.cn3dh-leg-1 { left: 24%; }
.cn3dh-leg-2 { right: 24%; }
.cn3dh-table-shadow {
  left: 5%; bottom: 2%; width: 90%; height: 24%; border-radius: 50%;
  background: rgba(18, 8, 3, .3);
  filter: blur(12px);
}
.cn3dh-object {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transform-origin: center;
  z-index: 7;
  transition: transform .28s ease, filter .28s ease;
  outline: none;
}
.cn3dh-object em {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 247, 235, .88);
  color: #503522;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  box-shadow: 0 10px 24px rgba(30, 17, 8, .16);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.cn3dh-object:hover,
.cn3dh-object:focus-visible {
  transform: translateY(-4px) scale(1.035);
  filter: brightness(1.06) drop-shadow(0 0 18px rgba(255, 224, 171, .33));
}
.cn3dh-object:hover em,
.cn3dh-object:focus-visible em,
.cn3dh-object.cn3dh-focused em {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.cn3dh-object.cn3dh-focused::after,
.cn3dh-object.cn3dh-alert::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(255, 225, 172, .72);
  box-shadow: 0 0 30px rgba(255, 191, 101, .38);
  animation: cn3dhRing 1.8s ease-in-out infinite;
  pointer-events: none;
}
.cn3dh-object.cn3dh-alert::after {
  border-color: rgba(255, 148, 108, .9);
  box-shadow: 0 0 34px rgba(222, 93, 64, .52);
}
@keyframes cn3dhRing {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.08); }
}
.cn3dh-photo {
  left: 22%; top: 22%; width: 120px; height: 92px;
}
.cn3dh-photo-frame {
  display: block;
  width: 100%; height: 100%;
  border-radius: 12px;
  background: linear-gradient(135deg, #6f411f, #d2a15a 48%, #5d3519);
  padding: 9px;
  box-shadow: 0 18px 24px rgba(27, 13, 5, .28), inset 0 0 0 2px rgba(255,255,255,.18);
}
.cn3dh-photo-frame i {
  display: block;
  width: 100%; height: 100%;
  border-radius: 7px;
  background:
    radial-gradient(circle at 33% 42%, #7e4a37 0 9%, transparent 10%),
    radial-gradient(circle at 60% 42%, #9b6046 0 9%, transparent 10%),
    linear-gradient(180deg, #f2d8b0 0 48%, #7c9b7f 49%);
}
.cn3dh-board {
  left: 43%; top: 17%; width: 170px; height: 116px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 24px 22px, rgba(92, 52, 30, .22) 0 2px, transparent 3px),
    linear-gradient(135deg, #c39463, #8d5b34 74%);
  box-shadow: 0 16px 28px rgba(28, 13, 5, .26), inset 0 0 0 8px rgba(88, 49, 25, .35);
}
.cn3dh-board-paper {
  position: absolute;
  display: block;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff3cf, #e6c99c);
  box-shadow: 0 4px 6px rgba(46, 23, 9, .18);
}
.cn3dh-note-1 { left: 23px; top: 26px; width: 48px; height: 36px; transform: rotate(-4deg); }
.cn3dh-note-2 { left: 82px; top: 22px; width: 54px; height: 42px; transform: rotate(5deg); background: linear-gradient(180deg, #f8d9c6, #d79579); }
.cn3dh-note-3 { left: 58px; top: 70px; width: 66px; height: 28px; transform: rotate(-2deg); background: linear-gradient(180deg, #d8ead0, #a7c49a); }
.cn3dh-calendar {
  right: 26%; top: 34%; width: 102px; height: 112px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff3df 0 26%, #f7e5cc 27% 100%);
  box-shadow: 0 18px 28px rgba(27, 13, 5, .25), inset 0 0 0 1px rgba(80, 45, 25, .12);
  overflow: visible;
}
.cn3dh-calendar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #a24f3e, #c97953);
}
.cn3dh-calendar strong,
.cn3dh-calendar span {
  position: absolute; left: 0; right: 0; text-align: center;
}
.cn3dh-calendar strong { top: 37%; color: #593926; font-size: 14px; }
.cn3dh-calendar span { top: 56%; color: #6c8c5a; font-size: 28px; font-weight: 900; }
.cn3dh-phone {
  left: 46%; bottom: 38%; width: 74px; height: 108px;
  transform: rotate(-9deg);
}
.cn3dh-phone-body {
  display: block;
  width: 100%; height: 100%;
  border-radius: 18px;
  background: linear-gradient(135deg, #171616, #3b3732 52%, #121111);
  box-shadow: 0 14px 24px rgba(18, 8, 4, .34), inset 0 0 0 4px rgba(255,255,255,.08);
  padding: 8px;
}
.cn3dh-phone-body i {
  display: block;
  width: 100%; height: 100%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 78%, rgba(112, 185, 138, .9) 0 8%, transparent 9%),
    linear-gradient(180deg, #c7e1d7, #345f54 70%, #16251f);
}
.cn3dh-map {
  left: 54%; bottom: 39%; width: 124px; height: 92px;
  transform: rotate(8deg);
}
.cn3dh-map-paper {
  display: block; width: 100%; height: 100%; border-radius: 8px;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(106, 148, 112, .2) 29% 32%, transparent 33% 100%),
    radial-gradient(circle at 62% 44%, #d5654d 0 5px, transparent 6px),
    linear-gradient(135deg, #f7e7c8, #d7c099);
  box-shadow: 0 15px 22px rgba(18, 8, 4, .28), inset 0 0 0 1px rgba(91, 54, 30, .12);
}
.cn3dh-map-paper i,
.cn3dh-map-paper b {
  position: absolute; display: block; border-radius: 999px;
  background: rgba(86, 129, 91, .45);
}
.cn3dh-map-paper i { left: 18%; top: 28%; width: 58%; height: 4px; transform: rotate(-18deg); }
.cn3dh-map-paper b { left: 30%; top: 57%; width: 48%; height: 4px; transform: rotate(13deg); }
.cn3dh-sos {
  left: 64%; bottom: 39%; width: 68px; height: 68px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffb69b, #b44e3b 54%, #6c251e);
  box-shadow: 0 14px 24px rgba(38, 12, 8, .34), inset 0 7px 12px rgba(255,255,255,.2);
}
.cn3dh-sos span {
  position: absolute;
  inset: 12px;
  display: grid;
  place-content: center;
  border-radius: 999px;
  background: rgba(255, 241, 232, .92);
  color: #9a3d30;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .03em;
}
.cn3dh-lamp {
  position: absolute;
  right: 21%; bottom: 27%; width: 112px; height: 220px;
  z-index: 6;
}
.cn3dh-lamp span { position: absolute; display: block; }
.cn3dh-lamp-shade {
  left: 20%; top: 0; width: 64%; height: 28%;
  border-radius: 44% 44% 20% 20%;
  background: linear-gradient(135deg, #f5c075, #b2763e 58%, #734321);
  box-shadow: inset 0 10px 16px rgba(255,255,255,.18), 0 0 35px rgba(255, 179, 86, .45);
}
.cn3dh-lamp-stand {
  left: 48%; top: 25%; width: 8%; height: 58%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5a3320, #c79055, #4c2918);
}
.cn3dh-lamp-glow {
  left: -44%; top: -12%; width: 190%; height: 75%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 190, 94, .28), transparent 68%);
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: cn3dhLamp 3.4s ease-in-out infinite;
}
@keyframes cn3dhLamp {
  0%, 100% { opacity: .6; }
  50% { opacity: .92; }
}
.cn3dh-details { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.cn3dh-details span { position: absolute; display: block; }
.cn3dh-cup {
  left: 42%; bottom: 43%; width: 32px; height: 38px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(90deg, #efe0c9, #b08b6b);
  box-shadow: 0 10px 16px rgba(20, 10, 5, .23);
}
.cn3dh-cup::after {
  content:""; position:absolute; right:-10px; top:9px; width:16px; height:14px; border:4px solid #b08b6b; border-left:0; border-radius:0 999px 999px 0;
}
.cn3dh-book {
  left: 59%; bottom: 36%; width: 76px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7b3e34, #4e221c);
  box-shadow: 0 9px 14px rgba(20, 10, 5, .24);
}
.cn3dh-glasses {
  left: 52%; bottom: 43%; width: 58px; height: 18px;
  background:
    radial-gradient(ellipse at 22% 50%, transparent 0 38%, rgba(44,31,22,.8) 40% 48%, transparent 50%),
    radial-gradient(ellipse at 78% 50%, transparent 0 38%, rgba(44,31,22,.8) 40% 48%, transparent 50%),
    linear-gradient(90deg, transparent 0 44%, rgba(44,31,22,.8) 45% 55%, transparent 56% 100%);
}
.cn3dh-plant {
  right: 12%; bottom: 20%; width: 80px; height: 122px;
}
.cn3dh-plant::after {
  content:""; position:absolute; left:23%; bottom:0; width:54%; height:36%; border-radius:8px 8px 18px 18px;
  background: linear-gradient(135deg, #9b5f3a, #63351f);
  box-shadow: 0 15px 20px rgba(20, 10, 5, .25);
}
.cn3dh-plant i,
.cn3dh-plant b,
.cn3dh-plant::before {
  content:""; position:absolute; display:block; border-radius: 60% 20% 60% 20%;
  background: linear-gradient(135deg, #6d9a62, #2f5e3c);
  transform-origin: 50% 100%;
}
.cn3dh-plant i { left: 4%; top: 8%; width: 42%; height: 58%; transform: rotate(-28deg); }
.cn3dh-plant b { right: 4%; top: 15%; width: 42%; height: 55%; transform: rotate(24deg); }
.cn3dh-plant::before { left: 30%; top: 0; width: 42%; height: 62%; transform: rotate(5deg); }
.cn3dh-bottom-panel {
  backdrop-filter: blur(10px);
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  pointer-events: none;
}
.cn3dh-scenarios,
.cn3dh-actions {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cn3dh-scenarios {
  max-width: 650px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 248, 238, .82);
  box-shadow: 0 16px 38px rgba(35, 20, 10, .18);
  backdrop-filter: blur(14px);
}
.cn3dh-scenarios button,
.cn3dh-actions button,
.cn3dh-primary-action {
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  background: rgba(91, 58, 36, .1);
  color: #503522;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cn3dh-scenarios button:hover,
.cn3dh-actions button:hover,
.cn3dh-primary-action:hover {
  transform: translateY(-1px);
  background: rgba(187, 119, 80, .18);
}
.cn3dh-scenarios button.cn3dh-active {
  background: #5f3c29;
  color: #fff5e8;
  box-shadow: 0 8px 18px rgba(75, 43, 24, .22);
}
.cn3dh-actions button {
  background: rgba(255, 248, 238, .88);
  box-shadow: 0 16px 38px rgba(35, 20, 10, .18);
  backdrop-filter: blur(14px);
}
.cn3dh-card {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: min(390px, calc(100% - 48px));
  padding: 24px;
  border-radius: 24px;
  background: var(--cn3dh-card);
  box-shadow: 0 26px 68px rgba(26, 13, 5, .32);
  backdrop-filter: blur(16px);
  color: var(--cn3dh-text);
  animation: cn3dhCardIn .28s ease both;
}
@keyframes cn3dhCardIn {
  from { opacity: 0; transform: translateY(calc(-50% + 14px)); }
  to { opacity: 1; transform: translateY(-50%); }
}
.cn3dh-card-close {
  position: absolute;
  right: 13px;
  top: 11px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(84, 55, 36, .1);
  color: #503522;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.cn3dh-card-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(187, 119, 80, .15);
  color: #8a5135;
  font-size: 12px;
  font-weight: 900;
}
.cn3dh-card h3 {
  margin: 0 0 10px;
  color: #332116;
  font-size: 25px;
  line-height: 1.12;
}
.cn3dh-card p {
  margin: 0 0 18px;
  color: #725a49;
  font-size: 16px;
  line-height: 1.48;
}
.cn3dh-primary-action {
  background: linear-gradient(135deg, #7c4d33, #bb7750);
  color: #fff6ec;
  box-shadow: 0 12px 28px rgba(112, 64, 34, .26);
}
.cn3dh-toast {
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(51, 88, 63, .96);
  color: #fff7eb;
  font-weight: 850;
  box-shadow: 0 14px 34px rgba(13, 32, 18, .28);
}
.cn3dh-root.cn3dh-state-attention .cn3dh-stage::before,
.cn3dh-root.cn3dh-state-no_answer .cn3dh-stage::before,
.cn3dh-root.cn3dh-state-last_signal .cn3dh-stage::before {
  background:
    radial-gradient(circle at 70% 32%, rgba(255, 190, 104, .28), transparent 24%),
    radial-gradient(circle at 40% 84%, rgba(211, 132, 67, .16), transparent 28%),
    linear-gradient(180deg, rgba(31, 18, 10, 0), rgba(31, 18, 10, .26));
}
.cn3dh-root.cn3dh-state-sos .cn3dh-stage::before {
  background:
    radial-gradient(circle at 65% 55%, rgba(224, 87, 63, .24), transparent 22%),
    radial-gradient(circle at 77% 22%, rgba(255, 191, 120, .24), transparent 24%),
    linear-gradient(180deg, rgba(31, 18, 10, 0), rgba(45, 14, 9, .33));
}
.cn3dh-root.cn3dh-style-daylight .cn3dh-stage {
  background: linear-gradient(180deg, #6d96a1, #3f2a19);
}
.cn3dh-root.cn3dh-style-daylight .cn3dh-wall-back {
  background: linear-gradient(180deg, #b38e70, #805b40 62%, #62412c);
}
.cn3dh-root.cn3dh-style-evening .cn3dh-stage {
  background: linear-gradient(180deg, #1d1820, #2e190f);
}
.cn3dh-root.cn3dh-style-evening .cn3dh-window {
  background: linear-gradient(180deg, #332650, #111827 62%, #06080e);
}
.cn3dh-root.cn3dh-is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  --cn3dh-h: 100vh;
}
.cn3dh-disabled,
.cn3dh-noscript {
  padding: 18px;
  border-radius: 16px;
  background: #fff4e5;
  color: #4f3321;
}
@media (max-width: 880px) {
  .cn3dh-root { --cn3dh-h: var(--cn3dh-mobile-height, 620px); border-radius: 22px; }
  .cn3dh-stage { min-height: var(--cn3dh-h); }
  .cn3dh-hero-panel { top: 14px; left: 14px; right: 14px; display: grid; }
  .cn3dh-status-pill { max-width: 100%; padding: 10px 13px; font-size: 14px; }
  .cn3dh-title { font-size: 30px; }
  .cn3dh-dependent { font-size: 15px; }
  .cn3dh-care-meter { top: 134px; left: 14px; width: calc(100% - 28px); padding: 11px; }
  .cn3dh-room { width: 1060px; height: 610px; bottom: 3%; left: 50%; transform: translateX(-50%) scale(.72) rotateY(var(--cn3dh-tilt, 0deg)); }
  .cn3dh-bottom-panel {
  backdrop-filter: blur(10px); left: 14px; right: 14px; bottom: 14px; display: grid; }
  .cn3dh-scenarios { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 8px; }
  .cn3dh-scenarios button { white-space: nowrap; padding: 9px 11px; font-size: 13px; }
  .cn3dh-actions { justify-content: flex-end; }
  .cn3dh-card { left: 12px; right: 12px; top: auto; bottom: 82px; width: auto; transform: none; padding: 20px; border-radius: 22px; }
  @keyframes cn3dhCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .cn3dh-card h3 { font-size: 22px; }
  .cn3dh-card p { font-size: 15px; }
  .cn3dh-toast { bottom: 70px; width: calc(100% - 28px); text-align: center; border-radius: 16px; }
}
@media (max-width: 520px) {
  .cn3dh-room { transform: translateX(-50%) scale(.58) rotateY(var(--cn3dh-tilt, 0deg)); bottom: 1%; }
  .cn3dh-photo { left: 21%; }
  .cn3dh-board { left: 41%; }
  .cn3dh-calendar { right: 23%; }
  .cn3dh-hero-panel { gap: 8px; }
  .cn3dh-title { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn3dh-root *, .cn3dh-root *::before, .cn3dh-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Stage 1.1 WebGL realism rework */
.cn3dh-root {
  --cn3dh-h: var(--cn3dh-desktop-height, 720px);
  background: #1e150f !important;
  box-shadow: 0 32px 90px rgba(22, 12, 7, .34) !important;
}
.cn3dh-stage {
  background: radial-gradient(circle at 72% 22%, rgba(255,220,170,.18), transparent 30%), #1f140d !important;
}
.cn3dh-stage::before {
  z-index: 4;
  background:
    radial-gradient(circle at 74% 24%, rgba(255,220,160,.18), transparent 24%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(12,7,4,.42) 100%),
    linear-gradient(180deg, rgba(21,12,6,.05), rgba(21,12,6,.28));
}
.cn3dh-hero-panel,
.cn3dh-care-meter,
.cn3dh-bottom-panel,
.cn3dh-card,
.cn3dh-toast { z-index: 20 !important; }
.cn3dh-root .cn3dh-title {
  color: #fff4e4 !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 4px 24px rgba(0,0,0,.55), 0 1px 1px rgba(0,0,0,.3) !important;
}
.cn3dh-root .cn3dh-dependent {
  color: rgba(255,244,228,.92) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.55) !important;
}
.cn3dh-eyebrow,
.cn3dh-status-pill,
.cn3dh-care-meter,
.cn3dh-bottom-panel,
.cn3dh-card {
  border: 1px solid rgba(255,246,230,.38);
  backdrop-filter: blur(18px) saturate(1.08);
}
.cn3dh-status-pill { background: rgba(255,248,238,.9) !important; }
.cn3dh-care-meter {
  top: 142px !important;
  background: rgba(255,248,238,.82) !important;
  width: min(320px, calc(100% - 44px)) !important;
}
.cn3dh-scene-shell {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  perspective: none !important;
  touch-action: none;
}
.cn3dh-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1e140d;
}
.cn3dh-webgl canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}
.cn3dh-webgl-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #fff5e7;
  background: linear-gradient(135deg, #21150e, #4b2d1b);
  z-index: 10;
}
.cn3dh-webgl-fallback[hidden] { display: none; }
.cn3dh-no-webgl .cn3dh-webgl-fallback { display: grid !important; }
.cn3dh-no-webgl .cn3dh-webgl { display: none; }
.cn3dh-bottom-panel {
  backdrop-filter: blur(10px);
  background: rgba(255,248,238,.74) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 45px rgba(25,14,8,.22) !important;
}
.cn3dh-scenarios button,
.cn3dh-actions button,
.cn3dh-primary-action {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cn3dh-scenarios button:hover,
.cn3dh-actions button:hover,
.cn3dh-primary-action:hover { transform: translateY(-1px); }
.cn3dh-scenarios button.cn3dh-active {
  background: #6d432d !important;
  color: #fff5e8 !important;
  box-shadow: 0 8px 18px rgba(65,37,22,.24);
}
.cn3dh-card {
  background: rgba(255,248,238,.94) !important;
  box-shadow: 0 24px 70px rgba(20, 12, 8, .35) !important;
}
.cn3dh-root.cn3dh-state-sos .cn3dh-status-pill {
  background: rgba(255,238,226,.94) !important;
  color: #7b2f22 !important;
}
.cn3dh-root.cn3dh-state-attention .cn3dh-status-pill,
.cn3dh-root.cn3dh-state-no_answer .cn3dh-status-pill,
.cn3dh-root.cn3dh-state-last_signal .cn3dh-status-pill,
.cn3dh-root.cn3dh-state-operator_message .cn3dh-status-pill {
  background: rgba(255,244,225,.94) !important;
  color: #75451e !important;
}
.cn3dh-is-fullscreen {
  position: fixed !important;
  z-index: 999999 !important;
  inset: 12px !important;
  width: auto !important;
  min-height: auto !important;
  height: calc(100vh - 24px) !important;
  border-radius: 24px !important;
}
.cn3dh-is-fullscreen .cn3dh-stage { min-height: 100% !important; height: 100% !important; }
@media (max-width: 720px) {
  .cn3dh-root { min-height: var(--cn3dh-mobile-height, 620px) !important; border-radius: 22px !important; }
  .cn3dh-stage { min-height: var(--cn3dh-mobile-height, 620px) !important; }
  .cn3dh-hero-panel { top: 14px !important; left: 14px !important; right: 14px !important; }
  .cn3dh-status-pill { max-width: 48vw !important; padding: 10px 12px !important; font-size: 13px !important; }
  .cn3dh-care-meter { top: 118px !important; left: 14px !important; width: calc(100% - 28px) !important; max-width: 300px !important; }
  .cn3dh-bottom-panel {
  backdrop-filter: blur(10px); left: 12px !important; right: 12px !important; bottom: 12px !important; }
}

/* Stage 2 — Game Scenario Core */
.cn3dh-game-panel {
  position: absolute;
  top: 104px;
  right: 22px;
  z-index: 14;
  width: min(360px, calc(100% - 44px));
  max-height: calc(var(--cn3dh-h) - 230px);
  overflow: auto;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 248, 238, .91);
  color: #3d2a1d;
  box-shadow: 0 18px 44px rgba(30, 17, 9, .22);
  backdrop-filter: blur(16px);
}
.cn3dh-game-season {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(111, 74, 47, .12);
  color: #71462e;
  font-size: 12px;
  font-weight: 850;
}
.cn3dh-game-panel h3 {
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.15;
  color: #2f2017;
}
.cn3dh-game-panel p {
  margin: 0 0 12px;
  color: #6e5645;
  line-height: 1.35;
  font-size: 14px;
}
.cn3dh-game-progress {
  position: relative;
  height: 28px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 62, 42, .14);
}
.cn3dh-game-progress span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  color: #4b3222;
}
.cn3dh-game-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(118,153,120,.52), rgba(211,162,95,.52));
  transition: width .35s ease;
}
.cn3dh-mission-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn3dh-mission-list li {
  position: relative;
  padding: 10px 10px 10px 36px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 0 0 1px rgba(80, 49, 30, .07);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.cn3dh-mission-list li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 13px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(91, 62, 42, .16);
  box-shadow: inset 0 0 0 2px rgba(91, 62, 42, .15);
}
.cn3dh-mission-list li.cn3dh-current {
  background: rgba(255, 245, 220, .82);
  box-shadow: inset 0 0 0 1px rgba(187, 119, 80, .2), 0 8px 22px rgba(80, 45, 24, .08);
  transform: translateY(-1px);
}
.cn3dh-mission-list li.cn3dh-current::before {
  background: #d3a25f;
  box-shadow: 0 0 0 4px rgba(211, 162, 95, .2);
}
.cn3dh-mission-list li.cn3dh-done {
  background: rgba(238, 247, 232, .76);
}
.cn3dh-mission-list li.cn3dh-done::before {
  content: "✓";
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: #6f9a69;
  box-shadow: none;
}
.cn3dh-mission-title {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #3f2b1f;
}
.cn3dh-mission-text {
  display: block;
  margin-top: 3px;
  color: #735b49;
  font-size: 12px;
  line-height: 1.3;
}
.cn3dh-game-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cn3dh-game-panel-actions button,
.cn3dh-finale-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(91, 62, 42, .13);
  color: #4d3424;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.cn3dh-game-panel-actions button:hover,
.cn3dh-finale-actions button:hover {
  transform: translateY(-1px);
  background: rgba(91, 62, 42, .21);
}
.cn3dh-game-panel-actions [data-role="next-chapter"] {
  background: #754a31;
  color: #fff7eb;
}
.cn3dh-story-modal,
.cn3dh-finale {
  position: absolute;
  inset: 0;
  z-index: 31;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 50% 44%, rgba(255, 238, 207, .13), transparent 42%), rgba(24, 14, 8, .46);
  backdrop-filter: blur(7px);
}
.cn3dh-story-modal[hidden],
.cn3dh-finale[hidden] { display: none; }
.cn3dh-story-card,
.cn3dh-finale-card {
  width: min(560px, 100%);
  padding: clamp(20px, 4vw, 34px);
  border-radius: 28px;
  background: rgba(255, 249, 239, .96);
  color: #39271d;
  box-shadow: 0 28px 80px rgba(21, 12, 7, .35);
}
.cn3dh-story-kicker,
.cn3dh-finale-card span {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(111, 74, 47, .12);
  color: #71462e;
  font-size: 12px;
  font-weight: 900;
}
.cn3dh-story-card h3,
.cn3dh-finale-card h3 {
  margin: 13px 0 10px;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.08;
}
.cn3dh-story-card p,
.cn3dh-finale-card p {
  color: #6c5442;
  font-size: 16px;
  line-height: 1.5;
}
.cn3dh-finale-card {
  text-align: center;
}
.cn3dh-finale-card::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 30%, #fff7cf, #d6a363 46%, #7c4b31 78%);
  box-shadow: 0 0 40px rgba(214, 163, 99, .45);
}
.cn3dh-finale-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.cn3dh-finale-actions [data-role="continue-care"] {
  background: #754a31;
  color: #fff7eb;
}
.cn3dh-journal {
  position: absolute;
  left: 22px;
  bottom: 92px;
  z-index: 13;
  width: min(330px, calc(100% - 44px));
  max-height: 120px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 248, 238, .86);
  color: #4a3324;
  box-shadow: 0 14px 34px rgba(30, 17, 9, .15);
  backdrop-filter: blur(13px);
}
.cn3dh-journal strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #71462e;
}
.cn3dh-journal div[data-role="journal-list"] {
  display: grid;
  gap: 4px;
}
.cn3dh-journal span {
  display: block;
  font-size: 12px;
  color: #644a38;
}
.cn3dh-root.cn3dh-season-finished .cn3dh-stage::before {
  background:
    radial-gradient(circle at 70% 16%, rgba(255, 234, 184, .42), transparent 26%),
    radial-gradient(circle at 34% 80%, rgba(255, 190, 112, .18), transparent 28%),
    linear-gradient(180deg, rgba(31, 18, 10, 0), rgba(31, 18, 10, .12));
}
@media (max-width: 860px) {
  .cn3dh-game-panel {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 118px;
    width: auto;
    max-height: 220px;
    padding: 13px;
  }
  .cn3dh-game-panel h3 { font-size: 17px; }
  .cn3dh-game-panel p { font-size: 13px; }
  .cn3dh-mission-list { gap: 6px; }
  .cn3dh-mission-list li { padding-top: 8px; padding-bottom: 8px; }
  .cn3dh-journal { display: none; }
}
@media (max-width: 560px) {
  .cn3dh-game-panel {
    bottom: 138px;
    max-height: 190px;
  }
  .cn3dh-game-panel-actions button { padding: 8px 10px; font-size: 12px; }
  .cn3dh-story-modal,
  .cn3dh-finale { padding: 14px; }
}

/* Stage 2 Fix 1 — realism + HUD layout rework */
.cn3dh-root {
  --cn3dh-side-gutter: 344px;
  --cn3dh-top-gutter: 92px;
  --cn3dh-bottom-gutter: 94px;
  --cn3dh-left-gutter: 22px;
}
.cn3dh-hero-panel {
  left: var(--cn3dh-left-gutter) !important;
  right: calc(var(--cn3dh-side-gutter) + 22px) !important;
  top: 18px !important;
  align-items: flex-start;
}
.cn3dh-title {
  font-size: clamp(26px, 3.5vw, 46px) !important;
  margin-top: 8px !important;
}
.cn3dh-dependent {
  font-size: 15px !important;
}
.cn3dh-status-pill {
  max-width: 290px !important;
  min-height: 50px;
  padding: 12px 15px !important;
}
.cn3dh-care-meter {
  top: 132px !important;
  left: var(--cn3dh-left-gutter) !important;
  width: 286px !important;
  padding: 12px 14px !important;
}
.cn3dh-scene-shell {
  inset: var(--cn3dh-top-gutter) calc(var(--cn3dh-side-gutter) + 22px) var(--cn3dh-bottom-gutter) var(--cn3dh-left-gutter) !important;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 242, 220, .18);
  box-shadow: 0 24px 56px rgba(16, 10, 6, .32), inset 0 0 0 1px rgba(255,255,255,.04);
  background: rgba(32, 20, 12, .28);
}
.cn3dh-webgl {
  border-radius: inherit;
}
.cn3dh-game-panel {
  top: var(--cn3dh-top-gutter) !important;
  right: 22px !important;
  width: 322px !important;
  max-height: calc(100% - var(--cn3dh-top-gutter) - 160px) !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: rgba(255, 248, 238, .94) !important;
  box-shadow: 0 22px 54px rgba(24, 14, 8, .22) !important;
}
.cn3dh-game-panel h3 {
  font-size: 18px !important;
  margin-top: 8px !important;
}
.cn3dh-game-panel p {
  font-size: 13px !important;
  margin-bottom: 10px !important;
}
.cn3dh-game-progress {
  margin: 10px 0 !important;
}
.cn3dh-mission-list {
  gap: 7px !important;
}
.cn3dh-mission-list li {
  padding: 9px 10px 9px 34px !important;
  border-radius: 14px !important;
}
.cn3dh-mission-title {
  font-size: 12px !important;
}
.cn3dh-mission-text {
  font-size: 11px !important;
  line-height: 1.25 !important;
}
.cn3dh-game-panel-actions {
  margin-top: 10px !important;
}
.cn3dh-game-panel-actions button,
.cn3dh-finale-actions button {
  padding: 9px 11px !important;
  font-size: 13px !important;
}
.cn3dh-bottom-panel {
  backdrop-filter: blur(10px);
  left: 22px !important;
  right: 22px !important;
  bottom: 18px !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cn3dh-scenarios {
  flex: 1 1 auto;
  max-width: calc(100% - 220px);
  min-height: 56px;
  padding: 8px 10px !important;
  border-radius: 20px !important;
  background: rgba(255, 248, 238, .9) !important;
}
.cn3dh-scenarios button,
.cn3dh-actions button,
.cn3dh-primary-action {
  padding: 9px 12px !important;
  font-size: 14px !important;
}
.cn3dh-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}
.cn3dh-actions button {
  min-height: 46px;
}
.cn3dh-journal {
  left: auto !important;
  right: 22px !important;
  bottom: 88px !important;
  width: 322px !important;
  max-height: 88px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 248, 238, .9) !important;
}
.cn3dh-card {
  right: 22px !important;
  top: auto !important;
  bottom: 88px !important;
  transform: none !important;
  width: 322px !important;
  max-height: calc(100% - 218px) !important;
  overflow: auto;
  padding: 20px !important;
  border-radius: 24px !important;
}
@keyframes cn3dhCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.cn3dh-card h3 {
  font-size: 22px !important;
}
.cn3dh-card p {
  font-size: 15px !important;
}
.cn3dh-toast {
  bottom: 84px !important;
}
@media (max-width: 1100px) {
  .cn3dh-root {
    --cn3dh-side-gutter: 310px;
  }
  .cn3dh-hero-panel {
    right: calc(var(--cn3dh-side-gutter) + 18px) !important;
  }
  .cn3dh-game-panel,
  .cn3dh-journal,
  .cn3dh-card {
    width: 290px !important;
  }
}
@media (max-width: 860px) {
  .cn3dh-root {
    --cn3dh-side-gutter: 0px;
    --cn3dh-top-gutter: 90px;
    --cn3dh-bottom-gutter: 208px;
  }
  .cn3dh-hero-panel {
    right: 14px !important;
  }
  .cn3dh-status-pill {
    max-width: 46vw !important;
  }
  .cn3dh-care-meter {
    top: 118px !important;
    width: min(280px, calc(100% - 28px)) !important;
  }
  .cn3dh-scene-shell {
    inset: 96px 14px 222px 14px !important;
  }
  .cn3dh-game-panel {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    top: auto !important;
    bottom: 74px !important;
    max-height: 136px !important;
  }
  .cn3dh-journal {
    display: none !important;
  }
  .cn3dh-card {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    bottom: 74px !important;
    max-height: 180px !important;
  }
  .cn3dh-bottom-panel {
  backdrop-filter: blur(10px);
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cn3dh-scenarios {
    max-width: none !important;
    width: 100%;
  }
  .cn3dh-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 560px) {
  .cn3dh-title {
    font-size: 28px !important;
  }
  .cn3dh-status-pill {
    font-size: 13px !important;
  }
  .cn3dh-care-meter {
    top: 108px !important;
  }
  .cn3dh-scene-shell {
    inset: 94px 12px 236px 12px !important;
  }
  .cn3dh-game-panel {
    bottom: 82px !important;
    max-height: 126px !important;
  }
  .cn3dh-card {
    bottom: 82px !important;
  }
}

/* Stage 2 Fix 3 — Storybook Visual Rework */
.cn3dh-root {
  --cn3dh-cream: #fff0d9;
  --cn3dh-panel: #fff3e2;
  --cn3dh-line: #c58a4b;
  --cn3dh-brown: #6b3f1e;
  --cn3dh-brown-deep: #4f2d16;
  background:
    radial-gradient(circle at 62% 18%, rgba(255, 205, 126, .28), transparent 24%),
    linear-gradient(135deg, #3e210f, #572711 55%, #3c1f0f);
  box-shadow: 0 24px 68px rgba(37, 19, 9, .28);
}
.cn3dh-stage::before {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 213, 140, .23), transparent 18%),
    linear-gradient(180deg, rgba(38, 19, 9, .05), rgba(38, 19, 9, .22));
}
.cn3dh-eyebrow,
.cn3dh-status-pill,
.cn3dh-care-meter,
.cn3dh-game-panel,
.cn3dh-bottom-panel,
.cn3dh-journal,
.cn3dh-card,
.cn3dh-story-card,
.cn3dh-finale-card {
  background: linear-gradient(180deg, rgba(255,250,241,.98), rgba(255,240,220,.96)) !important;
  border: 2px solid rgba(197, 138, 75, .65) !important;
  box-shadow: 0 16px 42px rgba(77, 42, 20, .18), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.cn3dh-eyebrow,
.cn3dh-status-pill,
.cn3dh-bottom-panel,
.cn3dh-game-panel,
.cn3dh-care-meter,
.cn3dh-journal { backdrop-filter: none !important; }
.cn3dh-title {
  color: #fff8ef;
  font-size: clamp(36px, 4vw, 62px) !important;
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 3px 0 rgba(85,46,20,.48), 0 10px 26px rgba(0,0,0,.24);
}
.cn3dh-dependent {
  font-size: 18px;
  font-weight: 700;
  color: #fff4e7;
}
.cn3dh-status-pill,
.cn3dh-care-meter span,
.cn3dh-game-panel,
.cn3dh-journal,
.cn3dh-scenarios button,
.cn3dh-actions button,
.cn3dh-game-panel-actions button,
.cn3dh-primary-action { color: var(--cn3dh-brown) !important; }
.cn3dh-care-bar { background: rgba(179, 127, 75, .16) !important; border: 1px solid rgba(197,138,75,.2); }
.cn3dh-care-bar i { background: linear-gradient(90deg, #d29b47, #e8c67b) !important; }
.cn3dh-scene-shell {
  background: rgba(66, 34, 16, .25) !important;
  border: 2px solid rgba(231, 198, 154, .24) !important;
}
.cn3dh-webgl {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6e3518, #4b250f);
}
.cn3dh-storybook-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 223, 165, .20), transparent 26%),
    linear-gradient(180deg, rgba(86, 43, 20, .28), rgba(45, 22, 10, .20));
}
.cn3dh-storybook-parallax {
  position: absolute;
  inset: 0;
  transition: transform .35s ease;
  transform-origin: 50% 50%;
}
.cn3dh-storybook-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.02) brightness(.98);
}
.cn3dh-storybook-vignette,
.cn3dh-storybook-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cn3dh-storybook-vignette {
  background:
    linear-gradient(180deg, rgba(53, 27, 13, .14), rgba(53, 27, 13, .05) 26%, rgba(53, 27, 13, .18) 100%),
    radial-gradient(circle at 30% 30%, transparent 0 38%, rgba(43, 19, 8, .18) 100%),
    radial-gradient(circle at 80% 24%, rgba(255, 231, 188, .14), transparent 20%);
}
.cn3dh-storybook-glow {
  background: radial-gradient(circle at 73% 18%, rgba(255, 218, 141, .18), transparent 22%);
}
.cn3dh-hotspot {
  position: absolute;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 2px rgba(255,243,226,.68), 0 12px 24px rgba(68,36,17,.22);
  color: #fff7ee;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cn3dh-hotspot::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 35%, #fff6d7, #e39f52 55%, #8b572f 100%);
}
.cn3dh-hotspot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(255, 235, 208, .44);
  opacity: 0;
  transform: scale(.88);
}
.cn3dh-hotspot span {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff8ef;
  background: rgba(77, 43, 22, .76);
  padding: 6px 10px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(31, 15, 7, .2);
}
.cn3dh-hotspot:hover,
.cn3dh-hotspot.is-focus,
.cn3dh-hotspot.is-alert,
.cn3dh-hotspot.is-hover { transform: scale(1.06); }
.cn3dh-hotspot:hover span,
.cn3dh-hotspot.is-focus span,
.cn3dh-hotspot.is-alert span,
.cn3dh-hotspot.is-hover span { opacity: 1; }
.cn3dh-hotspot.is-focus { box-shadow: 0 0 0 3px rgba(255, 222, 162, .92), 0 14px 26px rgba(68,36,17,.28); }
.cn3dh-hotspot.is-focus::after { opacity: 1; transform: scale(1.04); }
.cn3dh-hotspot.is-alert::before { background: radial-gradient(circle at 35% 35%, #fff3d5, #e67f52 55%, #a3432d 100%); animation: cn3dhPulseAlert 1.3s ease-in-out infinite; }
@keyframes cn3dhPulseAlert {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.cn3dh-hotspot-photo { left: 33%; top: 47%; }
.cn3dh-hotspot-hero { left: 45%; top: 67%; }
.cn3dh-hotspot-phone { left: 66%; top: 80%; }
.cn3dh-hotspot-calendar { left: 69%; top: 48%; }
.cn3dh-hotspot-board { left: 49%; top: 25%; }
.cn3dh-hotspot-map { left: 80%; top: 80%; }
.cn3dh-hotspot-sos { left: 73%; top: 78%; }
.cn3dh-game-panel {
  border-radius: 28px !important;
  padding: 18px !important;
}
.cn3dh-game-season {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #9e673a !important;
  background: rgba(247, 224, 188, .65);
  border-radius: 999px;
  padding: 8px 12px;
}
.cn3dh-game-panel h3 { font-size: 20px !important; color: var(--cn3dh-brown-deep); }
.cn3dh-game-panel p { font-size: 14px !important; color: #6c553f !important; }
.cn3dh-game-progress { background: rgba(236, 207, 166, .42); border-radius: 999px; padding: 8px 10px; }
.cn3dh-game-progress i { background: linear-gradient(90deg, #edb13d, #f4cf73) !important; height: 8px !important; }
.cn3dh-mission-list li {
  background: rgba(255, 250, 243, .92) !important;
  border: 1px solid rgba(211, 167, 103, .32) !important;
  border-radius: 20px !important;
  padding: 14px 14px 14px 44px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.cn3dh-mission-list li.cn3dh-current {
  background: linear-gradient(180deg, #fff8ef, #fff1d5) !important;
  border-color: rgba(232, 176, 73, .9) !important;
  box-shadow: 0 0 0 2px rgba(239, 188, 94, .26), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.cn3dh-mission-list li::before {
  background: linear-gradient(180deg, #ffe0a2, #e0a24a) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
.cn3dh-mission-list li.cn3dh-done::before { background: linear-gradient(180deg, #9dd285, #5fa55e) !important; }
.cn3dh-bottom-panel {
  gap: 16px;
  padding: 14px 16px !important;
  border-radius: 26px !important;
}
.cn3dh-scenarios button,
.cn3dh-actions button,
.cn3dh-game-panel-actions button,
.cn3dh-finale-actions button,
.cn3dh-primary-action {
  background: linear-gradient(180deg, #fff7eb, #f4debc) !important;
  border: 2px solid rgba(193, 142, 81, .62) !important;
  border-radius: 18px !important;
  color: var(--cn3dh-brown) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(68, 36, 17, .12) !important;
}
.cn3dh-scenarios button.cn3dh-active {
  background: linear-gradient(180deg, #cf8442, #9c5a30) !important;
  color: #fff7ee !important;
  border-color: rgba(110, 59, 29, .72) !important;
}
.cn3dh-journal {
  border-radius: 24px !important;
  font-size: 14px;
}
.cn3dh-card,
.cn3dh-story-card,
.cn3dh-finale-card {
  border-radius: 26px !important;
}
.cn3dh-webgl-fallback {
  background: linear-gradient(135deg, #6a3318, #3d1e0f);
}
@media (max-width: 980px) {
  .cn3dh-scene-shell { right: 14px !important; }
  .cn3dh-hotspot span { font-size: 11px; }
}
@media (max-width: 760px) {
  .cn3dh-title { font-size: 34px !important; }
  .cn3dh-scene-shell { inset: 130px 14px 250px 14px !important; }
  .cn3dh-game-panel { right: 14px !important; left: 14px !important; width: auto !important; top: auto !important; bottom: 120px !important; max-height: 200px !important; }
  .cn3dh-hotspot { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; }
}

/* Stage 2 Fix 4 — hotspot accuracy + layout cleanup */
.cn3dh-root {
  --cn3dh-side-gutter: 332px !important;
  --cn3dh-top-gutter: 128px !important;
  --cn3dh-bottom-gutter: 108px !important;
  --cn3dh-left-gutter: 20px !important;
}
.cn3dh-hero-panel {
  top: 16px !important;
  left: 18px !important;
  right: calc(var(--cn3dh-side-gutter) + 18px) !important;
}
.cn3dh-title {
  font-size: clamp(28px, 3.6vw, 56px) !important;
  margin-top: 6px !important;
}
.cn3dh-care-meter {
  top: 92px !important;
  left: 18px !important;
  width: min(262px, calc(100% - 36px)) !important;
  padding: 12px 12px !important;
}
.cn3dh-scene-shell {
  inset: var(--cn3dh-top-gutter) calc(var(--cn3dh-side-gutter) + 20px) var(--cn3dh-bottom-gutter) var(--cn3dh-left-gutter) !important;
}
.cn3dh-game-panel {
  top: 96px !important;
  right: 18px !important;
  width: 300px !important;
  max-height: calc(100% - 96px - 172px) !important;
}
.cn3dh-journal {
  right: 18px !important;
  left: auto !important;
  bottom: 98px !important;
  width: 300px !important;
  max-height: 108px !important;
}
.cn3dh-bottom-panel {
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
}
.cn3dh-storybook-image {
  object-position: center center;
}
/* precise hotspots for the corrected painterly scene */
.cn3dh-hotspot-photo { left: 15.5%; top: 25.5%; }
.cn3dh-hotspot-board { left: 38.2%; top: 28.4%; }
.cn3dh-hotspot-calendar { left: 56.2%; top: 40.5%; }
.cn3dh-hotspot-hero { left: 37.4%; top: 56.5%; }
.cn3dh-hotspot-phone { left: 40.2%; top: 82.0%; }
.cn3dh-hotspot-sos { left: 56.4%; top: 84.0%; }
.cn3dh-hotspot-map { left: 73.0%; top: 80.5%; }
.cn3dh-hotspot span {
  font-size: 11px;
  padding: 5px 9px;
}
@media (max-width: 1100px) {
  .cn3dh-root { --cn3dh-side-gutter: 292px !important; }
  .cn3dh-game-panel, .cn3dh-journal { width: 280px !important; }
  .cn3dh-hero-panel { right: calc(var(--cn3dh-side-gutter) + 14px) !important; }
}
@media (max-width: 860px) {
  .cn3dh-root {
    --cn3dh-side-gutter: 0px !important;
    --cn3dh-top-gutter: 124px !important;
    --cn3dh-bottom-gutter: 220px !important;
  }
  .cn3dh-hero-panel { right: 14px !important; left: 14px !important; }
  .cn3dh-care-meter {
    top: 88px !important;
    left: 14px !important;
    width: min(250px, calc(100% - 28px)) !important;
  }
  .cn3dh-scene-shell { inset: 126px 14px 234px 14px !important; }
  .cn3dh-game-panel { left: 14px !important; right: 14px !important; width: auto !important; top: auto !important; bottom: 78px !important; max-height: 136px !important; }
  .cn3dh-journal { display: none !important; }
}

/* Stage 2 Fix 5 — presence animation and refined hotspots */
.cn3dh-root {
  --cn3dh-side-gutter: 318px !important;
  --cn3dh-top-gutter: 144px !important;
  --cn3dh-bottom-gutter: 108px !important;
}
.cn3dh-title {
  font-size: clamp(26px, 3.3vw, 52px) !important;
  line-height: .96 !important;
}
.cn3dh-care-meter {
  top: 96px !important;
  width: min(258px, calc(100% - 36px)) !important;
}
.cn3dh-scene-shell {
  inset: var(--cn3dh-top-gutter) calc(var(--cn3dh-side-gutter) + 18px) var(--cn3dh-bottom-gutter) 18px !important;
}
.cn3dh-game-panel {
  top: 96px !important;
  right: 18px !important;
  width: 286px !important;
  max-height: calc(100% - 96px - 170px) !important;
}
.cn3dh-journal {
  right: 18px !important;
  bottom: 98px !important;
  width: 286px !important;
  max-height: 98px !important;
}
.cn3dh-bottom-panel { left: 18px !important; right: 18px !important; }
.cn3dh-storybook-scene { isolation: isolate; }
.cn3dh-room-sunbeam,
.cn3dh-lamp-glow,
.cn3dh-hero-breathe,
.cn3dh-hero-presence,
.cn3dh-cup-steam,
.cn3dh-floating-motes {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.cn3dh-storybook-vignette { z-index: 1; }
.cn3dh-hotspot { z-index: 3; }
.cn3dh-room-sunbeam {
  right: 0%;
  top: 0%;
  width: 32%;
  height: 100%;
  background: linear-gradient(110deg, rgba(255,220,160,0), rgba(255,220,160,.14) 30%, rgba(255,245,214,.07) 58%, rgba(255,220,160,0) 85%);
  opacity: .8;
  mix-blend-mode: screen;
  transform-origin: top right;
  animation: cn3dhSunbeam 9s ease-in-out infinite;
}
.cn3dh-lamp-glow {
  left: 67.8%;
  top: 44.3%;
  width: 13%;
  height: 21%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,223,150,.32) 0, rgba(255,208,114,.18) 32%, rgba(255,200,100,0) 72%);
  filter: blur(10px);
  animation: cn3dhLampGlow 4.6s ease-in-out infinite;
}
.cn3dh-hero-breathe {
  left: 25.8%;
  top: 43.6%;
  width: 28%;
  height: 42%;
  border-radius: 48% 44% 45% 42%;
  background: radial-gradient(circle at 52% 52%, rgba(255,224,175,.11), rgba(255,224,175,.05) 45%, rgba(255,224,175,0) 72%);
  transform-origin: 50% 60%;
  animation: cn3dhHeroBreath 5.8s ease-in-out infinite;
  opacity: .7;
}
.cn3dh-hero-presence {
  left: 29.6%;
  top: 51%;
  width: 16%;
  height: 17%;
  border-radius: 50%;
  border: 1px solid rgba(255,241,214,.0);
  box-shadow: 0 0 0 0 rgba(255,233,185,0);
  transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  opacity: .65;
}
.cn3dh-hero-presence.is-focus,
.cn3dh-hero-presence.is-hover {
  border-color: rgba(255,241,214,.78);
  box-shadow: 0 0 0 10px rgba(255,233,185,.08), 0 0 28px rgba(255,220,140,.18);
  opacity: 1;
}
.cn3dh-cup-steam {
  left: 39.9%;
  top: 56.8%;
  width: 8%;
  height: 14%;
}
.cn3dh-cup-steam span {
  position: absolute;
  bottom: 28%;
  width: 18%;
  height: 54%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,249,236,.48), rgba(255,255,255,0));
  filter: blur(1px);
  animation: cn3dhSteam 3.6s ease-in-out infinite;
}
.cn3dh-cup-steam span:nth-child(1) { left: 18%; animation-delay: 0s; }
.cn3dh-cup-steam span:nth-child(2) { left: 42%; animation-delay: 1.1s; }
.cn3dh-cup-steam span:nth-child(3) { left: 64%; animation-delay: 2.1s; }
.cn3dh-floating-motes { inset: 0; }
.cn3dh-floating-motes span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,217,.92) 0, rgba(255,231,174,.35) 48%, rgba(255,231,174,0) 70%);
  opacity: .65;
  animation: cn3dhMote 11s linear infinite;
}
.cn3dh-floating-motes .m1 { left: 18%; top: 24%; animation-duration: 13s; }
.cn3dh-floating-motes .m2 { left: 30%; top: 60%; animation-duration: 9.5s; animation-delay: -2s; }
.cn3dh-floating-motes .m3 { left: 52%; top: 18%; animation-duration: 12s; animation-delay: -6s; }
.cn3dh-floating-motes .m4 { left: 65%; top: 48%; animation-duration: 10s; animation-delay: -1s; }
.cn3dh-floating-motes .m5 { left: 77%; top: 25%; animation-duration: 12.5s; animation-delay: -4s; }
.cn3dh-floating-motes .m6 { left: 84%; top: 66%; animation-duration: 8.5s; animation-delay: -3s; }
.cn3dh-floating-motes .m7 { left: 44%; top: 79%; animation-duration: 11.5s; animation-delay: -5s; }
.cn3dh-floating-motes .m8 { left: 10%; top: 73%; animation-duration: 9s; animation-delay: -7s; }

/* hotspot accuracy adjusted to approved scene */
.cn3dh-hotspot-photo { left: 19.7%; top: 28.7%; }
.cn3dh-hotspot-board { left: 40.0%; top: 28.2%; }
.cn3dh-hotspot-calendar { left: 60.4%; top: 37.6%; }
.cn3dh-hotspot-hero { left: 36.6%; top: 55.0%; }
.cn3dh-hotspot-phone { left: 40.2%; top: 84.2%; }
.cn3dh-hotspot-sos { left: 55.1%; top: 85.0%; }
.cn3dh-hotspot-map { left: 74.8%; top: 82.4%; }

.cn3dh-state-no_answer .cn3dh-room-sunbeam,
.cn3dh-state-attention .cn3dh-room-sunbeam { opacity: .66; }
.cn3dh-state-no_answer .cn3dh-hero-breathe { opacity: .52; }
.cn3dh-state-operator_message .cn3dh-lamp-glow { animation-duration: 3.1s; }
.cn3dh-state-sos .cn3dh-lamp-glow { background: radial-gradient(circle, rgba(255,196,140,.38) 0, rgba(255,132,96,.18) 34%, rgba(255,200,100,0) 72%); }
.cn3dh-state-sos .cn3dh-room-sunbeam { opacity: .56; }

@keyframes cn3dhSunbeam {
  0%,100% { transform: translateX(0) skewX(0deg); opacity: .72; }
  50% { transform: translateX(-1.2%) skewX(-1deg); opacity: .88; }
}
@keyframes cn3dhLampGlow {
  0%,100% { opacity: .82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.045); }
}
@keyframes cn3dhHeroBreath {
  0%,100% { transform: scale(1) translateY(0); opacity: .62; }
  50% { transform: scale(1.018) translateY(-0.6%); opacity: .84; }
}
@keyframes cn3dhSteam {
  0% { transform: translateY(8px) scale(.75); opacity: 0; }
  18% { opacity: .46; }
  100% { transform: translateY(-18px) scale(1.18); opacity: 0; }
}
@keyframes cn3dhMote {
  0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  10% { opacity: .55; }
  55% { opacity: .72; }
  100% { transform: translate3d(10px, -26px, 0) scale(1.15); opacity: 0; }
}
@media (max-width: 1100px) {
  .cn3dh-root { --cn3dh-side-gutter: 290px !important; }
  .cn3dh-game-panel, .cn3dh-journal { width: 264px !important; }
}
@media (max-width: 860px) {
  .cn3dh-root {
    --cn3dh-side-gutter: 0px !important;
    --cn3dh-top-gutter: 132px !important;
    --cn3dh-bottom-gutter: 220px !important;
  }
  .cn3dh-care-meter { top: 92px !important; }
  .cn3dh-scene-shell { inset: 134px 14px 232px 14px !important; }
  .cn3dh-game-panel { left: 14px !important; right: 14px !important; width: auto !important; top: auto !important; bottom: 76px !important; max-height: 136px !important; }
  .cn3dh-journal { display: none !important; }
  .cn3dh-room-sunbeam { width: 38%; }
  .cn3dh-hotspot { width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; }
}

/* Stage 2 Fix 6 — fullscreen hotspot stability + object animations */
.cn3dh-storybook-parallax {
  position: absolute;
  inset: 0;
  transition: transform .35s ease;
  transform-origin: 50% 50%;
}
.cn3dh-storybook-artboard {
  position: absolute;
  overflow: hidden;
  border-radius: 24px;
}
.cn3dh-storybook-image,
.cn3dh-storybook-vignette,
.cn3dh-room-sunbeam,
.cn3dh-lamp-glow,
.cn3dh-hero-breathe,
.cn3dh-hero-presence,
.cn3dh-hero-blink,
.cn3dh-cup-steam,
.cn3dh-sos-vibe,
.cn3dh-floating-motes {
  position: absolute;
  inset: 0;
}
.cn3dh-storybook-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cn3dh-hotspot { z-index: 4; }
.cn3dh-room-sunbeam,
.cn3dh-lamp-glow,
.cn3dh-hero-breathe,
.cn3dh-hero-presence,
.cn3dh-hero-blink,
.cn3dh-cup-steam,
.cn3dh-sos-vibe,
.cn3dh-floating-motes { z-index: 2; pointer-events: none; }
.cn3dh-storybook-vignette { z-index: 1; }

/* object-level animations */
.cn3dh-lamp-glow {
  inset: auto;
  left: 68.2%;
  top: 43.6%;
  width: 13%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,231,170,.38) 0, rgba(255,213,125,.22) 34%, rgba(255,209,110,0) 72%);
  filter: blur(12px);
  animation: cn3dhLampGlow2 4.8s ease-in-out infinite;
}
.cn3dh-room-sunbeam {
  inset: auto;
  right: 0;
  top: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(110deg, rgba(255,221,165,0), rgba(255,221,165,.12) 30%, rgba(255,246,221,.08) 56%, rgba(255,221,165,0) 84%);
  mix-blend-mode: screen;
  animation: cn3dhSunbeam2 11s ease-in-out infinite;
}
.cn3dh-cup-steam {
  inset: auto;
  left: 39.6%;
  top: 57.3%;
  width: 8%;
  height: 14%;
}
.cn3dh-cup-steam span {
  position: absolute;
  bottom: 28%;
  width: 18%;
  height: 54%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,248,232,.52), rgba(255,255,255,0));
  filter: blur(1px);
  animation: cn3dhSteam2 3.7s ease-in-out infinite;
}
.cn3dh-cup-steam span:nth-child(1){left:18%;animation-delay:0s}
.cn3dh-cup-steam span:nth-child(2){left:42%;animation-delay:1.1s}
.cn3dh-cup-steam span:nth-child(3){left:64%;animation-delay:2.0s}
.cn3dh-hero-breathe {
  inset: auto;
  left: 25.8%;
  top: 43.6%;
  width: 28%;
  height: 42%;
  border-radius: 48% 44% 45% 42%;
  background: radial-gradient(circle at 52% 52%, rgba(255,224,175,.10), rgba(255,224,175,.045) 45%, rgba(255,224,175,0) 72%);
  transform-origin: 50% 60%;
  animation: cn3dhHeroBreath2 5.8s ease-in-out infinite;
  opacity: .72;
}
.cn3dh-hero-presence {
  inset: auto;
  left: 29.8%;
  top: 50.8%;
  width: 16%;
  height: 17%;
  border-radius: 50%;
  border: 1px solid rgba(255,241,214,0);
  box-shadow: 0 0 0 0 rgba(255,233,185,0);
  transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  opacity: .65;
}
.cn3dh-hero-presence.is-focus,
.cn3dh-hero-presence.is-hover {
  border-color: rgba(255,241,214,.78);
  box-shadow: 0 0 0 10px rgba(255,233,185,.08), 0 0 28px rgba(255,220,140,.18);
  opacity: 1;
}
.cn3dh-hero-blink {
  inset: auto;
  left: 28.4%;
  top: 30.6%;
  width: 17%;
  height: 17%;
}
.cn3dh-hero-blink .eye {
  position: absolute;
  top: 35%;
  width: 13%;
  height: 2%;
  background: #edbc8c;
  border-top: 1px solid rgba(198,128,92,.55);
  border-radius: 999px;
  transform-origin: center center;
  opacity: 0;
  animation: cn3dhBlink 7.4s infinite;
}
.cn3dh-hero-blink .eye-left { left: 18%; }
.cn3dh-hero-blink .eye-right { right: 18%; animation-delay: .02s; }
.cn3dh-sos-vibe {
  inset: auto;
  left: 54.0%;
  top: 82.8%;
  width: 4.8%;
  height: 6.2%;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(230,112,84,0);
  opacity: 0;
}
.cn3dh-sos-vibe.is-alert {
  opacity: 1;
  animation: cn3dhSosVibe 0.22s linear infinite alternate, cn3dhSosPulse 1.2s ease-in-out infinite;
}
.cn3dh-floating-motes span { animation: cn3dhMote2 11s linear infinite; }

/* refined hotspot positions */
.cn3dh-hotspot-photo { left: 18.6%; top: 27.7%; }
.cn3dh-hotspot-board { left: 41.3%; top: 27.6%; }
.cn3dh-hotspot-calendar { left: 60.2%; top: 39.0%; }
.cn3dh-hotspot-hero { left: 37.2%; top: 55.0%; }
.cn3dh-hotspot-phone { left: 20.3%; top: 87.6%; }
.cn3dh-hotspot-sos { left: 55.8%; top: 86.0%; }
.cn3dh-hotspot-map { left: 73.8%; top: 87.2%; }

.cn3dh-state-attention .cn3dh-hero-presence,
.cn3dh-state-no_answer .cn3dh-hero-presence { opacity: .88; }
.cn3dh-state-sos .cn3dh-lamp-glow {
  background: radial-gradient(circle, rgba(255,204,158,.42) 0, rgba(255,150,116,.22) 34%, rgba(255,209,110,0) 72%);
}
.cn3dh-state-sos .cn3dh-sos-vibe { opacity: 1; }

@keyframes cn3dhLampGlow2 {
  0%,100% { opacity: .80; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes cn3dhSunbeam2 {
  0%,100% { transform: translateX(0) skewX(0deg); opacity: .70; }
  50% { transform: translateX(-1.5%) skewX(-1.2deg); opacity: .88; }
}
@keyframes cn3dhSteam2 {
  0% { transform: translateY(8px) scale(.75); opacity: 0; }
  20% { opacity: .5; }
  100% { transform: translateY(-18px) scale(1.2); opacity: 0; }
}
@keyframes cn3dhHeroBreath2 {
  0%,100% { transform: scale(1) translateY(0); opacity: .64; }
  50% { transform: scale(1.018) translateY(-0.5%); opacity: .84; }
}
@keyframes cn3dhBlink {
  0%, 45%, 47%, 100% { opacity: 0; transform: scaleY(.2); }
  46%, 46.8% { opacity: .95; transform: scaleY(6); }
  72%, 73% { opacity: .95; transform: scaleY(4.6); }
}
@keyframes cn3dhSosVibe {
  0% { transform: translateX(-1px) rotate(-1.4deg); }
  100% { transform: translateX(1px) rotate(1.4deg); }
}
@keyframes cn3dhSosPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(230,112,84,0); }
  50% { box-shadow: 0 0 0 8px rgba(230,112,84,.18); }
}
@keyframes cn3dhMote2 {
  0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  10% { opacity: .55; }
  55% { opacity: .72; }
  100% { transform: translate3d(10px, -26px, 0) scale(1.15); opacity: 0; }
}
@media (max-width: 860px) {
  .cn3dh-storybook-artboard { border-radius: 18px; }
}

/* Stage 2 Fix 7 — smart scene reactions and emotional feedback */
.cn3dh-storybook-scene {
  background: linear-gradient(135deg, #5a2d14, #8d4b24 52%, #5c2f18);
}
.cn3dh-storybook-backfill {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  filter: blur(18px) saturate(1.08) brightness(.72);
  transform: scale(1.08);
  opacity: .78;
}
.cn3dh-storybook-artboard {
  box-shadow: 0 18px 46px rgba(31, 16, 8, .18);
}
.cn3dh-room-warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 48% 57%, rgba(255,228,180,.10), rgba(255,228,180,0) 52%);
  opacity: .55;
  pointer-events: none;
}
.cn3dh-object-glow {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transition: opacity .28s ease, transform .28s ease;
  z-index: 2;
}
.cn3dh-object-glow.glow-photo { left: 13.5%; top: 17.5%; width: 18%; height: 22%; background: radial-gradient(circle, rgba(255,220,145,.30) 0, rgba(255,220,145,0) 68%); }
.cn3dh-object-glow.glow-board { left: 36.2%; top: 17%; width: 16%; height: 18%; background: radial-gradient(circle, rgba(255,215,145,.28) 0, rgba(255,215,145,0) 68%); }
.cn3dh-object-glow.glow-calendar { left: 55%; top: 31%; width: 14%; height: 17%; background: radial-gradient(circle, rgba(255,225,155,.28) 0, rgba(255,225,155,0) 68%); }
.cn3dh-object-glow.glow-phone { left: 34.5%; top: 77.5%; width: 14%; height: 12%; background: radial-gradient(circle, rgba(137,198,255,.34) 0, rgba(137,198,255,0) 70%); }
.cn3dh-object-glow.glow-map { left: 66.5%; top: 76.2%; width: 17%; height: 14%; background: radial-gradient(circle, rgba(255,220,145,.30) 0, rgba(255,220,145,0) 72%); }
.cn3dh-object-glow.glow-sos { left: 50.0%; top: 78.4%; width: 10%; height: 12%; background: radial-gradient(circle, rgba(255,138,104,.38) 0, rgba(255,138,104,0) 72%); }
.cn3dh-storybook-scene[data-glow="photo"] .glow-photo,
.cn3dh-storybook-scene[data-glow="board"] .glow-board,
.cn3dh-storybook-scene[data-glow="calendar"] .glow-calendar,
.cn3dh-storybook-scene[data-glow="phone"] .glow-phone,
.cn3dh-storybook-scene[data-glow="map"] .glow-map,
.cn3dh-storybook-scene[data-glow="sos"] .glow-sos,
.cn3dh-storybook-scene[data-glow="hero"] .cn3dh-hero-presence {
  opacity: 1;
}
.cn3dh-storybook-scene[data-glow="phone"] .glow-phone,
.cn3dh-storybook-scene[data-glow="board"] .glow-board,
.cn3dh-storybook-scene[data-glow="map"] .glow-map,
.cn3dh-storybook-scene[data-glow="sos"] .glow-sos {
  animation: cn3dhObjectPulse 1.35s ease-in-out infinite;
}

/* better fullscreen look */
.cn3dh-is-fullscreen .cn3dh-storybook-backfill { opacity: .9; filter: blur(14px) saturate(1.1) brightness(.78); }
.cn3dh-is-fullscreen .cn3dh-storybook-artboard { box-shadow: 0 22px 54px rgba(31,16,8,.18); }

/* corrected hotspots */
.cn3dh-hotspot-phone { left: 41.2%; top: 82.2%; }
.cn3dh-hotspot-sos { left: 54.7%; top: 86.0%; }
.cn3dh-hotspot-map { left: 73.8%; top: 86.7%; }
.cn3dh-hotspot-photo { left: 18.6%; top: 27.7%; }
.cn3dh-hotspot-board { left: 42.0%; top: 27.6%; }
.cn3dh-hotspot-calendar { left: 60.2%; top: 39.0%; }
.cn3dh-hotspot-hero { left: 37.2%; top: 55.0%; }

/* scenario reactions */
.cn3dh-root.cn3dh-state-calm .cn3dh-room-warmth { opacity: .66; }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-storybook-artboard { filter: saturate(.94) brightness(.96); }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-lamp-glow { opacity: .72; }
.cn3dh-root.cn3dh-state-no_answer .glow-phone { opacity: 1; animation: cn3dhObjectPulse 1.15s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-operator_message .glow-board { opacity: 1; animation: cn3dhObjectPulse 1.2s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-operator_message .cn3dh-lamp-glow { animation-duration: 3.4s; }
.cn3dh-root.cn3dh-state-last_signal .glow-map { opacity: 1; animation: cn3dhObjectPulse 1.3s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-attention .cn3dh-hero-presence { opacity: 1; box-shadow: 0 0 0 10px rgba(255,223,169,.12), 0 0 32px rgba(255,223,169,.22); }
.cn3dh-root.cn3dh-state-attention .cn3dh-hero-breathe { animation-duration: 4.8s; }
.cn3dh-root.cn3dh-state-sos .cn3dh-room-warmth { background: radial-gradient(circle at 50% 56%, rgba(255,186,160,.16), rgba(255,186,160,0) 54%); opacity: .9; }
.cn3dh-root.cn3dh-state-sos .cn3dh-storybook-artboard { filter: saturate(1.02) brightness(.97); }
.cn3dh-root.cn3dh-state-sos .glow-sos { opacity: 1; animation: cn3dhObjectPulseRed .9s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-sos .cn3dh-sos-vibe { opacity: 1; }

/* emotional feedback from relative actions */
.cn3dh-feedback-hearts {
  position: absolute;
  left: 41%;
  top: 54%;
  width: 14%;
  height: 18%;
  pointer-events: none;
  z-index: 3;
}
.cn3dh-feedback-hearts span {
  position: absolute;
  bottom: 0;
  color: #f0a3a9;
  font-size: 22px;
  opacity: 0;
  text-shadow: 0 4px 14px rgba(255,255,255,.22);
}
.cn3dh-feedback-hearts span:nth-child(1){left:8%}
.cn3dh-feedback-hearts span:nth-child(2){left:40%}
.cn3dh-feedback-hearts span:nth-child(3){left:70%}
.cn3dh-feedback-softpulse {
  position: absolute;
  left: 27%;
  top: 40%;
  width: 24%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,205,.14) 0, rgba(255,236,205,0) 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-softpulse,
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-feedback-softpulse,
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-feedback-softpulse {
  animation: cn3dhSoftPulse 1.4s ease-out forwards;
}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span,
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-feedback-hearts span,
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-feedback-hearts span {
  animation: cn3dhHeartRise 1.5s ease-out forwards;
}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span:nth-child(2){animation-delay:.12s}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span:nth-child(3){animation-delay:.22s}
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-room-warmth { animation: cn3dhWarmthBurst 1.6s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-room-warmth { animation: cn3dhWarmthBurst 2.2s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-nudge .cn3dh-storybook-artboard { animation: cn3dhTinyNudge .42s ease; }

@keyframes cn3dhObjectPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes cn3dhObjectPulseRed {
  0%,100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.09); }
}
@keyframes cn3dhSoftPulse {
  0% { opacity: 0; transform: scale(.82); }
  25% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes cn3dhHeartRise {
  0% { opacity: 0; transform: translateY(12px) scale(.72); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-44px) scale(1.12); }
}
@keyframes cn3dhWarmthBurst {
  0% { opacity: .5; }
  30% { opacity: 1; }
  100% { opacity: .7; }
}
@keyframes cn3dhTinyNudge {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

.cn3dh-is-fullscreen .cn3dh-scene-shell {
  inset: 132px calc(var(--cn3dh-side-gutter) + 14px) 86px 14px !important;
}
.cn3dh-is-fullscreen .cn3dh-game-panel {
  top: 86px !important;
  right: 14px !important;
  max-height: calc(100% - 86px - 160px) !important;
}
.cn3dh-is-fullscreen .cn3dh-journal {
  right: 14px !important;
  bottom: 86px !important;
}
.cn3dh-is-fullscreen .cn3dh-bottom-panel {
  left: 14px !important;
  right: 14px !important;
  bottom: 10px !important;
}

/* Stage 2 Fix 8 — emotional dramaturgy of the room */
.cn3dh-storybook-scene {
  background: linear-gradient(135deg, #5c2f16, #8d4b24 52%, #5a2d14) !important;
}
.cn3dh-storybook-backfill {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  filter: blur(16px) saturate(1.08) brightness(.76);
  transform: scale(1.08);
  opacity: .86;
  transition: filter .7s ease, opacity .7s ease;
}
.cn3dh-storybook-artboard {
  position: absolute;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 22px 54px rgba(31, 16, 8, .2) !important;
  transition: filter .7s ease, box-shadow .7s ease;
}
.cn3dh-storybook-artboard.is-cover {
  border-radius: 0;
  box-shadow: none !important;
}
.cn3dh-dramatic-grade,
.cn3dh-room-warmth,
.cn3dh-room-sunbeam,
.cn3dh-lamp-glow,
.cn3dh-lamp-bloom,
.cn3dh-hero-breathe,
.cn3dh-hero-presence,
.cn3dh-hero-blink,
.cn3dh-cup-steam,
.cn3dh-phone-screen,
.cn3dh-board-paper,
.cn3dh-calendar-ring,
.cn3dh-map-route,
.cn3dh-sos-vibe,
.cn3dh-object-glow,
.cn3dh-care-lights,
.cn3dh-emotion-caption,
.cn3dh-feedback-hearts,
.cn3dh-feedback-softpulse,
.cn3dh-floating-motes {
  position: absolute;
  pointer-events: none;
}
.cn3dh-dramatic-grade {
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 45% 48%, rgba(255,225,179,.08), transparent 44%);
  transition: background .7s ease, opacity .7s ease;
}
.cn3dh-room-warmth {
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 46% 58%, rgba(255,226,180,.12), rgba(255,226,180,0) 56%);
  opacity: .55;
  transition: opacity .6s ease, background .6s ease;
}
.cn3dh-room-sunbeam {
  right: 0;
  top: 0;
  width: 35%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(110deg, rgba(255,221,165,0), rgba(255,221,165,.14) 30%, rgba(255,246,221,.08) 56%, rgba(255,221,165,0) 84%);
  mix-blend-mode: screen;
  animation: cn3dhSunbeamDrama 11s ease-in-out infinite;
}
.cn3dh-lamp-glow,
.cn3dh-lamp-bloom {
  left: 68.2%;
  top: 43.6%;
  width: 13%;
  height: 22%;
  border-radius: 50%;
  z-index: 2;
}
.cn3dh-lamp-glow {
  background: radial-gradient(circle, rgba(255,231,170,.44) 0, rgba(255,213,125,.24) 34%, rgba(255,209,110,0) 72%);
  filter: blur(12px);
  animation: cn3dhLampDrama 4.8s ease-in-out infinite;
}
.cn3dh-lamp-bloom {
  background: radial-gradient(circle, rgba(255,250,222,.22) 0, rgba(255,218,130,.12) 32%, rgba(255,218,130,0) 64%);
  filter: blur(18px);
  animation: cn3dhLampBloom 7s ease-in-out infinite;
}
.cn3dh-hero-breathe {
  left: 25.8%;
  top: 43.6%;
  width: 28%;
  height: 42%;
  z-index: 2;
  border-radius: 48% 44% 45% 42%;
  background: radial-gradient(circle at 52% 52%, rgba(255,224,175,.11), rgba(255,224,175,.05) 45%, rgba(255,224,175,0) 72%);
  animation: cn3dhHeroBreathDrama 5.8s ease-in-out infinite;
  opacity: .72;
}
.cn3dh-hero-presence {
  left: 29.8%;
  top: 50.8%;
  width: 16%;
  height: 17%;
  z-index: 2;
  border-radius: 50%;
  opacity: .62;
  transition: opacity .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.cn3dh-hero-presence.is-focus,
.cn3dh-hero-presence.is-hover {
  opacity: 1;
  box-shadow: 0 0 0 10px rgba(255,233,185,.10), 0 0 32px rgba(255,220,140,.22);
}
.cn3dh-hero-blink {
  left: 28.4%;
  top: 30.6%;
  width: 17%;
  height: 17%;
  z-index: 3;
}
.cn3dh-hero-blink .eye {
  position: absolute;
  top: 35%;
  width: 13%;
  height: 2%;
  background: #edbc8c;
  border-top: 1px solid rgba(198,128,92,.55);
  border-radius: 999px;
  opacity: 0;
  animation: cn3dhBlinkDrama 7.4s infinite;
}
.cn3dh-hero-blink .eye-left { left: 18%; }
.cn3dh-hero-blink .eye-right { right: 18%; animation-delay: .02s; }
.cn3dh-cup-steam {
  left: 39.6%;
  top: 57.3%;
  width: 8%;
  height: 14%;
  z-index: 3;
}
.cn3dh-cup-steam span {
  position: absolute;
  bottom: 28%;
  width: 18%;
  height: 54%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,248,232,.55), rgba(255,255,255,0));
  filter: blur(1px);
  animation: cn3dhSteamDrama 3.7s ease-in-out infinite;
}
.cn3dh-cup-steam span:nth-child(1){left:18%;animation-delay:0s}
.cn3dh-cup-steam span:nth-child(2){left:42%;animation-delay:1.1s}
.cn3dh-cup-steam span:nth-child(3){left:64%;animation-delay:2s}

/* Actual object animation overlays */
.cn3dh-phone-screen {
  left: 37.2%;
  top: 79.2%;
  width: 7.2%;
  height: 5.3%;
  z-index: 3;
  border-radius: 18% / 28%;
  background: radial-gradient(circle at 50% 50%, rgba(111,180,255,.30), rgba(111,180,255,.05) 52%, transparent 72%);
  opacity: .12;
  transform: rotate(-3deg);
  animation: cn3dhPhoneGlow 5.8s ease-in-out infinite;
}
.cn3dh-board-paper {
  z-index: 3;
  border-radius: 7px;
  background: rgba(255,240,192,.23);
  box-shadow: 0 0 12px rgba(255,230,168,.16);
  animation: cn3dhPaperTinyMove 5.6s ease-in-out infinite;
}
.cn3dh-board-paper.paper-a { left: 38.3%; top: 22.1%; width: 4.6%; height: 5.5%; }
.cn3dh-board-paper.paper-b { left: 43.1%; top: 25.8%; width: 3.9%; height: 6.0%; animation-delay: 1.8s; }
.cn3dh-calendar-ring {
  left: 60.0%;
  top: 39.0%;
  width: 6.2%;
  height: 7.2%;
  z-index: 3;
  border-radius: 50%;
  border: 3px solid rgba(130,190,88,.25);
  opacity: .25;
  animation: cn3dhCalendarRing 4.6s ease-in-out infinite;
}
.cn3dh-map-route {
  left: 69.3%;
  top: 79.0%;
  width: 13.7%;
  height: 9.8%;
  z-index: 3;
  border-radius: 20px;
  background:
    linear-gradient(125deg, transparent 0 38%, rgba(99,180,126,.34) 39% 43%, transparent 44% 100%),
    linear-gradient(30deg, transparent 0 58%, rgba(237,118,82,.22) 59% 63%, transparent 64% 100%);
  opacity: .18;
  animation: cn3dhMapShimmer 5.2s ease-in-out infinite;
}
.cn3dh-sos-vibe {
  left: 53.0%;
  top: 82.7%;
  width: 5.7%;
  height: 6.5%;
  z-index: 3;
  border-radius: 50%;
  opacity: 0;
}
.cn3dh-sos-vibe.is-alert,
.cn3dh-root.cn3dh-state-sos .cn3dh-sos-vibe {
  opacity: 1;
  animation: cn3dhSosVibeDrama .22s linear infinite alternate, cn3dhSosPulseDrama 1.1s ease-in-out infinite;
}
.cn3dh-object-glow {
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
  filter: blur(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.cn3dh-object-glow.glow-photo { left: 13.5%; top: 17.5%; width: 18%; height: 22%; background: radial-gradient(circle, rgba(255,220,145,.32) 0, rgba(255,220,145,0) 68%); }
.cn3dh-object-glow.glow-board { left: 36.2%; top: 17%; width: 16%; height: 18%; background: radial-gradient(circle, rgba(255,215,145,.30) 0, rgba(255,215,145,0) 68%); }
.cn3dh-object-glow.glow-calendar { left: 55%; top: 31%; width: 14%; height: 17%; background: radial-gradient(circle, rgba(255,225,155,.30) 0, rgba(255,225,155,0) 68%); }
.cn3dh-object-glow.glow-phone { left: 35%; top: 77%; width: 13%; height: 12%; background: radial-gradient(circle, rgba(115,187,255,.38) 0, rgba(115,187,255,0) 70%); }
.cn3dh-object-glow.glow-map { left: 66.5%; top: 76%; width: 18%; height: 15%; background: radial-gradient(circle, rgba(255,220,145,.34) 0, rgba(255,220,145,0) 72%); }
.cn3dh-object-glow.glow-sos { left: 50%; top: 78%; width: 11%; height: 13%; background: radial-gradient(circle, rgba(255,138,104,.44) 0, rgba(255,138,104,0) 72%); }
.cn3dh-storybook-scene[data-glow="photo"] .glow-photo,
.cn3dh-storybook-scene[data-glow="board"] .glow-board,
.cn3dh-storybook-scene[data-glow="calendar"] .glow-calendar,
.cn3dh-storybook-scene[data-glow="phone"] .glow-phone,
.cn3dh-storybook-scene[data-glow="map"] .glow-map,
.cn3dh-storybook-scene[data-glow="sos"] .glow-sos,
.cn3dh-storybook-scene[data-glow="hero"] .cn3dh-hero-presence { opacity: 1; }
.cn3dh-storybook-scene[data-glow="phone"] .glow-phone,
.cn3dh-storybook-scene[data-glow="board"] .glow-board,
.cn3dh-storybook-scene[data-glow="map"] .glow-map,
.cn3dh-storybook-scene[data-glow="sos"] .glow-sos { animation: cn3dhObjectPulseDrama 1.35s ease-in-out infinite; }

/* Care progress dramaturgy */
.cn3dh-storybook-scene[data-care="start"] .cn3dh-room-warmth { opacity: .45; }
.cn3dh-storybook-scene[data-care="warming"] .cn3dh-room-warmth { opacity: .62; }
.cn3dh-storybook-scene[data-care="strong"] .cn3dh-room-warmth { opacity: .78; }
.cn3dh-storybook-scene[data-care="complete"] .cn3dh-room-warmth,
.cn3dh-storybook-scene[data-care="season"] .cn3dh-room-warmth { opacity: .95; }
.cn3dh-care-lights {
  left: 23%; top: 11%; width: 32%; height: 20%; z-index: 2;
}
.cn3dh-care-lights span {
  position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,241,202,.9), rgba(255,211,129,.16) 62%, transparent 72%);
  opacity: 0;
  animation: cn3dhCareLightFloat 7s ease-in-out infinite;
}
.cn3dh-care-lights span:nth-child(1){left:10%;top:40%;animation-delay:0s}
.cn3dh-care-lights span:nth-child(2){left:52%;top:18%;animation-delay:1.4s}
.cn3dh-care-lights span:nth-child(3){left:78%;top:58%;animation-delay:2.6s}
.cn3dh-storybook-scene[data-care="warming"] .cn3dh-care-lights span:nth-child(1),
.cn3dh-storybook-scene[data-care="strong"] .cn3dh-care-lights span:nth-child(1),
.cn3dh-storybook-scene[data-care="strong"] .cn3dh-care-lights span:nth-child(2),
.cn3dh-storybook-scene[data-care="complete"] .cn3dh-care-lights span,
.cn3dh-storybook-scene[data-care="season"] .cn3dh-care-lights span { opacity: .72; }

/* Scenario dramaturgy */
.cn3dh-root.cn3dh-state-calm .cn3dh-dramatic-grade { background: radial-gradient(circle at 50% 58%, rgba(255,226,180,.13), transparent 54%); }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-dramatic-grade { background: radial-gradient(circle at 39% 80%, rgba(115,180,255,.12), transparent 32%), linear-gradient(180deg, rgba(55,45,55,.08), rgba(55,45,55,.18)); }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-storybook-artboard { filter: saturate(.93) brightness(.96); }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-phone-screen { opacity: .75; animation-duration: 1.6s; }
.cn3dh-root.cn3dh-state-operator_message .cn3dh-dramatic-grade { background: radial-gradient(circle at 41% 28%, rgba(255,226,155,.18), transparent 34%); }
.cn3dh-root.cn3dh-state-operator_message .cn3dh-board-paper { animation-duration: 2.6s; background: rgba(255,239,180,.36); }
.cn3dh-root.cn3dh-state-last_signal .cn3dh-map-route { opacity: .72; animation-duration: 2.2s; }
.cn3dh-root.cn3dh-state-last_signal .cn3dh-dramatic-grade { background: radial-gradient(circle at 74% 83%, rgba(255,220,145,.16), transparent 32%); }
.cn3dh-root.cn3dh-state-attention .cn3dh-hero-presence { opacity: 1; box-shadow: 0 0 0 10px rgba(255,223,169,.12), 0 0 32px rgba(255,223,169,.22); }
.cn3dh-root.cn3dh-state-sos .cn3dh-dramatic-grade { background: radial-gradient(circle at 55% 84%, rgba(255,123,95,.22), transparent 28%), linear-gradient(180deg, rgba(89,30,22,.10), rgba(89,30,22,.24)); }
.cn3dh-root.cn3dh-state-sos .cn3dh-storybook-artboard { filter: saturate(1.02) brightness(.96); }
.cn3dh-root.cn3dh-state-sos .glow-sos { opacity: 1; animation: cn3dhObjectPulseRedDrama .9s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-sos .cn3dh-lamp-glow { background: radial-gradient(circle, rgba(255,204,158,.42) 0, rgba(255,150,116,.22) 34%, rgba(255,209,110,0) 72%); }

/* Emotional feedback */
.cn3dh-emotion-caption {
  left: 32%; top: 15%;
  max-width: 38%;
  z-index: 4;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(84,48,26,.76);
  color: #fff6e8;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(42,20,9,.18);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .22s ease, transform .22s ease;
}
.cn3dh-emotion-caption.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.cn3dh-feedback-hearts { left: 40%; top: 54%; width: 14%; height: 18%; z-index: 4; }
.cn3dh-feedback-hearts span {
  position: absolute;
  bottom: 0;
  color: #f0a3a9;
  font-size: 22px;
  opacity: 0;
  text-shadow: 0 4px 14px rgba(255,255,255,.22);
}
.cn3dh-feedback-hearts span:nth-child(1){left:8%}
.cn3dh-feedback-hearts span:nth-child(2){left:40%}
.cn3dh-feedback-hearts span:nth-child(3){left:70%}
.cn3dh-feedback-softpulse {
  left: 27%; top: 40%; width: 24%; height: 34%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,205,.16) 0, rgba(255,236,205,0) 68%);
  opacity: 0;
}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-softpulse,
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-feedback-softpulse,
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-feedback-softpulse { animation: cn3dhSoftPulseDrama 1.4s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span,
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-feedback-hearts span,
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-feedback-hearts span { animation: cn3dhHeartRiseDrama 1.5s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span:nth-child(2){animation-delay:.12s}
.cn3dh-storybook-scene.cn3dh-feedback-success .cn3dh-feedback-hearts span:nth-child(3){animation-delay:.22s}
.cn3dh-storybook-scene.cn3dh-feedback-chapter .cn3dh-room-warmth { animation: cn3dhWarmthBurstDrama 1.6s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-season .cn3dh-room-warmth { animation: cn3dhWarmthBurstDrama 2.2s ease-out forwards; }
.cn3dh-storybook-scene.cn3dh-feedback-nudge .cn3dh-storybook-artboard { animation: cn3dhTinyNudgeDrama .42s ease; }

/* Hotspots corrected after fullscreen dramaturgy change */
.cn3dh-hotspot-phone { left: 40.7% !important; top: 82.0% !important; }
.cn3dh-hotspot-sos { left: 54.6% !important; top: 85.5% !important; }
.cn3dh-hotspot-map { left: 74.3% !important; top: 84.7% !important; }
.cn3dh-hotspot-photo { left: 18.6% !important; top: 27.7% !important; }
.cn3dh-hotspot-board { left: 41.0% !important; top: 27.6% !important; }
.cn3dh-hotspot-calendar { left: 60.2% !important; top: 39.0% !important; }
.cn3dh-hotspot-hero { left: 37.2% !important; top: 55.0% !important; }

/* Fullscreen: fill the scene with the artwork instead of leaving a visibly cropped/empty room */
.cn3dh-is-fullscreen .cn3dh-scene-shell {
  inset: 132px calc(var(--cn3dh-side-gutter) + 14px) 86px 14px !important;
  background: rgba(79,38,17,.38) !important;
}
.cn3dh-is-fullscreen .cn3dh-storybook-backfill { opacity: .95; filter: blur(12px) saturate(1.12) brightness(.82); }
.cn3dh-is-fullscreen .cn3dh-storybook-artboard.is-cover { border-radius: 20px; }
.cn3dh-is-fullscreen .cn3dh-game-panel { top: 86px !important; right: 14px !important; max-height: calc(100% - 86px - 160px) !important; }
.cn3dh-is-fullscreen .cn3dh-journal { right: 14px !important; bottom: 86px !important; }
.cn3dh-is-fullscreen .cn3dh-bottom-panel { left: 14px !important; right: 14px !important; bottom: 10px !important; }

@keyframes cn3dhLampDrama { 0%,100% { opacity:.78; transform:scale(1);} 50% { opacity:1; transform:scale(1.06);} }
@keyframes cn3dhLampBloom { 0%,100% { opacity:.42; transform:scale(.98);} 50% { opacity:.78; transform:scale(1.08);} }
@keyframes cn3dhSunbeamDrama { 0%,100% { transform:translateX(0) skewX(0deg); opacity:.72;} 50% { transform:translateX(-1.4%) skewX(-1deg); opacity:.9;} }
@keyframes cn3dhHeroBreathDrama { 0%,100% { transform:scale(1) translateY(0); opacity:.64;} 50% { transform:scale(1.018) translateY(-.5%); opacity:.85;} }
@keyframes cn3dhBlinkDrama { 0%,45%,47%,100% { opacity:0; transform:scaleY(.2);} 46%,46.8% { opacity:.95; transform:scaleY(6);} 72%,73% { opacity:.95; transform:scaleY(4.6);} }
@keyframes cn3dhSteamDrama { 0% { transform:translateY(8px) scale(.75); opacity:0;} 20% { opacity:.52;} 100% { transform:translateY(-18px) scale(1.2); opacity:0;} }
@keyframes cn3dhPhoneGlow { 0%,100% { opacity:.12; transform:rotate(-3deg) scale(1);} 50% { opacity:.65; transform:rotate(-3deg) scale(1.04);} }
@keyframes cn3dhPaperTinyMove { 0%,100% { transform:rotate(0deg) translateY(0);} 50% { transform:rotate(.7deg) translateY(-1px);} }
@keyframes cn3dhCalendarRing { 0%,100% { opacity:.2; transform:scale(.94);} 50% { opacity:.72; transform:scale(1.07);} }
@keyframes cn3dhMapShimmer { 0%,100% { opacity:.16; transform:translateX(0);} 50% { opacity:.72; transform:translateX(2px);} }
@keyframes cn3dhSosVibeDrama { 0% { transform:translateX(-1px) rotate(-1.4deg);} 100% { transform:translateX(1px) rotate(1.4deg);} }
@keyframes cn3dhSosPulseDrama { 0%,100% { box-shadow:0 0 0 0 rgba(230,112,84,0);} 50% { box-shadow:0 0 0 8px rgba(230,112,84,.22);} }
@keyframes cn3dhObjectPulseDrama { 0%,100% { opacity:.52; transform:scale(1);} 50% { opacity:1; transform:scale(1.04);} }
@keyframes cn3dhObjectPulseRedDrama { 0%,100% { opacity:.58; transform:scale(1);} 50% { opacity:1; transform:scale(1.1);} }
@keyframes cn3dhCareLightFloat { 0%,100% { transform:translateY(0) scale(.86); opacity:.15;} 50% { transform:translateY(-8px) scale(1.08); opacity:.8;} }
@keyframes cn3dhSoftPulseDrama { 0% { opacity:0; transform:scale(.82);} 25% { opacity:.96;} 100% { opacity:0; transform:scale(1.18);} }
@keyframes cn3dhHeartRiseDrama { 0% { opacity:0; transform:translateY(12px) scale(.72);} 20% { opacity:.95;} 100% { opacity:0; transform:translateY(-44px) scale(1.12);} }
@keyframes cn3dhWarmthBurstDrama { 0% { opacity:.55;} 30% { opacity:1;} 100% { opacity:.78;} }
@keyframes cn3dhTinyNudgeDrama { 0%,100% { transform:translateX(0);} 30% { transform:translateX(-3px);} 70% { transform:translateX(3px);} }

/* Stage 2 Fix 10 — return to approved drawn scene with visible object animations */
.cn3dh-drawn-return {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #5d2e14, #8c4a22 54%, #4c2815);
  border-radius: 28px;
}
.cn3dh-drawn-return .cn3dh-storybook-backfill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  filter: blur(18px) saturate(1.08) brightness(.78);
  transform: scale(1.08);
  opacity: .95;
}
.cn3dh-drawn-return .cn3dh-storybook-parallax {
  position: absolute;
  inset: 0;
  transition: transform .28s ease;
}
.cn3dh-drawn-return .cn3dh-storybook-artboard {
  position: absolute;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(43, 21, 10, .20);
  background: #7b4020;
}
.cn3dh-drawn-return .cn3dh-storybook-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cn3dh-drawn-return .cn3dh-art-shade,
.cn3dh-drawn-return .cn3dh-atmo-warmth,
.cn3dh-drawn-return .cn3dh-atmo-care,
.cn3dh-drawn-return .cn3dh-window-light,
.cn3dh-drawn-return .cn3dh-lamp-bloom,
.cn3dh-drawn-return .cn3dh-lamp-core,
.cn3dh-drawn-return .cn3dh-cup-steam,
.cn3dh-drawn-return .cn3dh-phone-screen,
.cn3dh-drawn-return .cn3dh-board-note,
.cn3dh-drawn-return .cn3dh-calendar-mark,
.cn3dh-drawn-return .cn3dh-map-shimmer,
.cn3dh-drawn-return .cn3dh-sos-ring,
.cn3dh-drawn-return .cn3dh-hero-presence,
.cn3dh-drawn-return .cn3dh-hero-breath,
.cn3dh-drawn-return .cn3dh-hero-blink,
.cn3dh-drawn-return .cn3dh-object-pulse,
.cn3dh-drawn-return .cn3dh-kind-caption,
.cn3dh-drawn-return .cn3dh-care-hearts,
.cn3dh-drawn-return .cn3dh-floating-dust {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.cn3dh-drawn-return .cn3dh-art-shade {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 70% 22%, rgba(255, 235, 178, .16), transparent 22%),
    linear-gradient(180deg, rgba(67, 31, 15, .08), rgba(67, 31, 15, .11));
  transition: background .35s ease, opacity .35s ease;
}
.cn3dh-drawn-return .cn3dh-atmo-warmth {
  inset: 0;
  background: radial-gradient(circle at 44% 56%, rgba(255, 225, 177, .12), rgba(255, 225, 177, 0) 54%);
  opacity: .7;
  transition: opacity .35s ease, background .35s ease;
}
.cn3dh-drawn-return .cn3dh-atmo-care {
  inset: 0;
  background: radial-gradient(circle at 36% 44%, rgba(255, 235, 204, .0), rgba(255, 235, 204, 0) 56%);
  opacity: 0;
  transition: opacity .35s ease;
}
.cn3dh-drawn-return[data-care="warming"] .cn3dh-atmo-care { opacity: .22; background: radial-gradient(circle at 39% 52%, rgba(255, 238, 205, .18), rgba(255, 238, 205, 0) 58%); }
.cn3dh-drawn-return[data-care="strong"] .cn3dh-atmo-care { opacity: .34; background: radial-gradient(circle at 39% 52%, rgba(255, 238, 205, .24), rgba(255, 238, 205, 0) 60%); }
.cn3dh-drawn-return[data-care="done"],
.cn3dh-drawn-return[data-care="season"] { filter: saturate(1.06) brightness(1.02); }
.cn3dh-drawn-return[data-care="done"] .cn3dh-atmo-care,
.cn3dh-drawn-return[data-care="season"] .cn3dh-atmo-care { opacity: .48; background: radial-gradient(circle at 39% 52%, rgba(255, 244, 220, .32), rgba(255, 244, 220, 0) 62%); }

/* Object animation layers aligned to the approved drawn scene */
.cn3dh-drawn-return .cn3dh-window-light {
  left: 78%; top: 6%; width: 23%; height: 53%;
  background: linear-gradient(100deg, rgba(255, 221, 145, 0), rgba(255, 230, 170, .16) 42%, rgba(255, 221, 145, 0) 88%);
  mix-blend-mode: screen;
  animation: cn3dhDrawnWindow 9s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-lamp-bloom {
  left: 64.0%; top: 34.5%; width: 18%; height: 27%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 168, .44) 0, rgba(255, 204, 103, .20) 40%, rgba(255, 204, 103, 0) 74%);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: cn3dhDrawnLamp 3.4s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-lamp-core {
  left: 70.6%; top: 40.7%; width: 3.8%; height: 5.5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,214,.78), rgba(255,222,145,.26) 56%, transparent 78%);
  filter: blur(2px);
  animation: cn3dhDrawnLampCore 1.9s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-cup-steam { left: 34.9%; top: 55.4%; width: 7%; height: 13%; z-index: 4; }
.cn3dh-drawn-return .cn3dh-cup-steam i {
  position: absolute; bottom: 8%; width: 18%; height: 72%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,247,232,.74), rgba(255,255,255,0));
  filter: blur(1px);
  opacity: 0;
  animation: cn3dhDrawnSteam 3.1s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-cup-steam i:nth-child(1){ left: 15%; animation-delay: 0s; }
.cn3dh-drawn-return .cn3dh-cup-steam i:nth-child(2){ left: 35%; animation-delay: .75s; }
.cn3dh-drawn-return .cn3dh-cup-steam i:nth-child(3){ left: 58%; animation-delay: 1.4s; }
.cn3dh-drawn-return .cn3dh-cup-steam i:nth-child(4){ left: 76%; animation-delay: 2.1s; }
.cn3dh-drawn-return .cn3dh-phone-screen {
  left: 33.7%; top: 77.8%; width: 9%; height: 7.7%;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(160, 213, 240, .22), rgba(104, 160, 210, .05));
  box-shadow: 0 0 0 rgba(118, 210, 255, 0);
  transform: rotate(-10deg);
  mix-blend-mode: screen;
  animation: cn3dhDrawnPhone 3.4s ease-in-out infinite;
}
.cn3dh-root.cn3dh-state-no_answer .cn3dh-drawn-return .cn3dh-phone-screen {
  animation: cn3dhDrawnPhoneAlert 1.05s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-board-note { width: 5.3%; height: 7.4%; background: rgba(255, 239, 202, .46); border-radius: 2px; box-shadow: 0 2px 8px rgba(91,48,25,.12); }
.cn3dh-drawn-return .cn3dh-note-a { left: 38.0%; top: 21.0%; transform: rotate(-4deg); animation: cn3dhDrawnPaperA 5.4s ease-in-out infinite; }
.cn3dh-drawn-return .cn3dh-note-b { left: 42.1%; top: 22.0%; transform: rotate(5deg); background: rgba(241, 199, 180, .42); animation: cn3dhDrawnPaperB 5.0s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-operator_message .cn3dh-drawn-return .cn3dh-board-note { animation-duration: 1.45s; }
.cn3dh-drawn-return .cn3dh-calendar-mark {
  left: 62.6%; top: 34.2%; width: 6.4%; height: 8.0%; border-radius: 50%;
  border: 4px solid rgba(89, 169, 96, .72);
  box-shadow: 0 0 18px rgba(122, 207, 114, .25);
  animation: cn3dhDrawnCalendar 2.2s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-map-shimmer {
  left: 70.9%; top: 74.2%; width: 15.8%; height: 13.5%; overflow: hidden; border-radius: 12px; transform: rotate(-7deg);
  mix-blend-mode: screen;
}
.cn3dh-drawn-return .cn3dh-map-shimmer i {
  position: absolute; left: -40%; top: 42%; width: 82%; height: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(105,205,181,.62), rgba(255,243,183,.42), transparent);
  animation: cn3dhDrawnMap 2.6s linear infinite;
}
.cn3dh-drawn-return .cn3dh-sos-ring {
  left: 49.3%; top: 80.8%; width: 8.3%; height: 11.0%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 119, 99, 0);
  background: radial-gradient(circle, rgba(255, 130, 96, .24), rgba(255, 130, 96, 0) 64%);
  opacity: .42;
  animation: cn3dhDrawnSosIdle 2.6s ease-in-out infinite;
}
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .cn3dh-sos-ring {
  opacity: 1;
  animation: cn3dhDrawnSosVibe .18s linear infinite alternate, cn3dhDrawnSosPulse .9s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-presence {
  left: 23.0%; top: 27.0%; width: 25.0%; height: 45.0%;
  border-radius: 48%;
  background: radial-gradient(circle at 50% 55%, rgba(255,228,190,.13), rgba(255,228,190,.04) 45%, transparent 72%);
  opacity: .54;
  animation: cn3dhDrawnHeroPresence 5.6s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-breath {
  left: 28.0%; top: 48.0%; width: 15%; height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,219,.16), rgba(255,245,219,0) 70%);
  animation: cn3dhDrawnHeroBreath 4.6s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-blink { left: 28.6%; top: 36.3%; width: 10.5%; height: 6.0%; z-index: 4; }
.cn3dh-drawn-return .cn3dh-hero-blink b {
  position: absolute; top: 32%; width: 15%; height: 14%; border-radius: 999px;
  background: rgba(235, 171, 120, .92);
  transform: scaleY(0);
  opacity: 0;
  animation: cn3dhDrawnBlink 7.2s infinite;
}
.cn3dh-drawn-return .cn3dh-hero-blink .left { left: 22%; }
.cn3dh-drawn-return .cn3dh-hero-blink .right { left: 59%; animation-delay: .02s; }

.cn3dh-drawn-return .cn3dh-object-pulse { border-radius: 50%; opacity: 0; transition: opacity .2s ease; }
.cn3dh-drawn-return .pulse-photo { left: 11.8%; top: 12.8%; width: 19%; height: 25%; background: radial-gradient(circle, rgba(255,220,154,.30), transparent 68%); }
.cn3dh-drawn-return .pulse-board { left: 31.5%; top: 13.8%; width: 17%; height: 23%; background: radial-gradient(circle, rgba(255,220,154,.28), transparent 68%); }
.cn3dh-drawn-return .pulse-calendar { left: 55.5%; top: 26.0%; width: 15%; height: 18%; background: radial-gradient(circle, rgba(255,232,166,.30), transparent 70%); }
.cn3dh-drawn-return .pulse-phone { left: 32.3%; top: 75.8%; width: 12%; height: 11%; background: radial-gradient(circle, rgba(120,210,255,.32), transparent 70%); }
.cn3dh-drawn-return .pulse-map { left: 69.5%; top: 71.0%; width: 20%; height: 18%; background: radial-gradient(circle, rgba(255,220,154,.28), transparent 70%); }
.cn3dh-drawn-return .pulse-sos { left: 49.0%; top: 80.3%; width: 9%; height: 12%; background: radial-gradient(circle, rgba(255,128,105,.36), transparent 70%); }
.cn3dh-drawn-return[data-glow="photo"] .pulse-photo,
.cn3dh-drawn-return[data-glow="board"] .pulse-board,
.cn3dh-drawn-return[data-glow="calendar"] .pulse-calendar,
.cn3dh-drawn-return[data-glow="phone"] .pulse-phone,
.cn3dh-drawn-return[data-glow="map"] .pulse-map,
.cn3dh-drawn-return[data-glow="sos"] .pulse-sos { opacity: 1; animation: cn3dhDrawnObjectPulse 1.4s ease-in-out infinite; }
.cn3dh-drawn-return[data-glow="hero"] .cn3dh-hero-presence { opacity: .98; }

.cn3dh-drawn-return .cn3dh-floating-dust { inset: 0; }
.cn3dh-drawn-return .cn3dh-floating-dust i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,218,.82), rgba(255,222,165,0) 72%);
  opacity: .55;
  animation: cn3dhDrawnDust 11s linear infinite;
}
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(1){ left: 16%; top: 22%; animation-delay: -1s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(2){ left: 26%; top: 62%; animation-delay: -5s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(3){ left: 47%; top: 16%; animation-delay: -7s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(4){ left: 67%; top: 38%; animation-delay: -3s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(5){ left: 79%; top: 20%; animation-delay: -4s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(6){ left: 83%; top: 68%; animation-delay: -8s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(7){ left: 53%; top: 74%; animation-delay: -2s; }
.cn3dh-drawn-return .cn3dh-floating-dust i:nth-child(8){ left: 8%; top: 73%; animation-delay: -6s; }

.cn3dh-drawn-return .cn3dh-kind-caption {
  left: 50%; top: 18px; transform: translateX(-50%) translateY(-8px);
  z-index: 5;
  min-width: 250px; max-width: 560px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 246, 231, .92);
  color: #714827;
  font-weight: 800;
  text-align: center;
  font-size: 15px;
  box-shadow: 0 12px 24px rgba(43, 21, 10, .18);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.cn3dh-drawn-return .cn3dh-kind-caption.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cn3dh-drawn-return .cn3dh-care-hearts { left: 38%; top: 50%; width: 18%; height: 22%; z-index: 4; }
.cn3dh-drawn-return .cn3dh-care-hearts span {
  position: absolute; bottom: 0; color: #efa0a6; font-size: 25px; opacity: 0;
  text-shadow: 0 5px 16px rgba(255,255,255,.28);
}
.cn3dh-drawn-return .cn3dh-care-hearts span:nth-child(1){ left: 10%; }
.cn3dh-drawn-return .cn3dh-care-hearts span:nth-child(2){ left: 45%; }
.cn3dh-drawn-return .cn3dh-care-hearts span:nth-child(3){ left: 75%; }
.cn3dh-drawn-return.is-success .cn3dh-care-hearts span,
.cn3dh-drawn-return.is-chapter .cn3dh-care-hearts span,
.cn3dh-drawn-return.is-season .cn3dh-care-hearts span { animation: cn3dhDrawnHeart 1.55s ease-out forwards; }
.cn3dh-drawn-return.is-chapter .cn3dh-care-hearts span { animation-duration: 1.85s; }
.cn3dh-drawn-return.is-season .cn3dh-care-hearts span { animation-duration: 2.2s; }
.cn3dh-drawn-return.is-success .cn3dh-care-hearts span:nth-child(2),
.cn3dh-drawn-return.is-chapter .cn3dh-care-hearts span:nth-child(2),
.cn3dh-drawn-return.is-season .cn3dh-care-hearts span:nth-child(2){ animation-delay: .12s; }
.cn3dh-drawn-return.is-success .cn3dh-care-hearts span:nth-child(3),
.cn3dh-drawn-return.is-chapter .cn3dh-care-hearts span:nth-child(3),
.cn3dh-drawn-return.is-season .cn3dh-care-hearts span:nth-child(3){ animation-delay: .23s; }
.cn3dh-drawn-return.is-nudge .cn3dh-storybook-artboard { animation: cn3dhDrawnNudge .42s ease; }
.cn3dh-drawn-return.is-success .cn3dh-atmo-care,
.cn3dh-drawn-return.is-chapter .cn3dh-atmo-care,
.cn3dh-drawn-return.is-season .cn3dh-atmo-care { opacity: .72; animation: cn3dhDrawnWarmBurst 1.55s ease-out forwards; }

/* Hotspots pinned to the drawn objects */
.cn3dh-drawn-return .cn3dh-hotspot {
  position: absolute;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  z-index: 6;
  border: 1px solid rgba(255, 244, 226, .86);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,235,178,.96), rgba(207,138,65,.88));
  box-shadow: 0 9px 18px rgba(51,25,12,.22), 0 0 0 5px rgba(255,237,205,.20);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  cursor: pointer;
}
.cn3dh-drawn-return .cn3dh-hotspot::before {
  content: '';
  position: absolute; inset: 8px; border-radius: inherit;
  background: rgba(255,255,255,.38);
}
.cn3dh-drawn-return .cn3dh-hotspot span {
  position: absolute;
  left: 50%; top: -31px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(75,43,24,.82);
  color: #fff6e8;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(43,21,10,.18);
}
.cn3dh-drawn-return .cn3dh-hotspot:hover,
.cn3dh-drawn-return .cn3dh-hotspot.is-hover,
.cn3dh-drawn-return .cn3dh-hotspot.is-focus { transform: scale(1.12); box-shadow: 0 10px 22px rgba(51,25,12,.27), 0 0 0 7px rgba(255,237,205,.26); }
.cn3dh-drawn-return .cn3dh-hotspot:hover span,
.cn3dh-drawn-return .cn3dh-hotspot.is-hover span,
.cn3dh-drawn-return .cn3dh-hotspot.is-focus span,
.cn3dh-drawn-return .cn3dh-hotspot.is-alert span { opacity: 1; }
.cn3dh-drawn-return .cn3dh-hotspot.is-alert { animation: cn3dhDrawnHotspotAlert 1s ease-in-out infinite; }
.cn3dh-drawn-return .cn3dh-hotspot.is-next { box-shadow: 0 10px 22px rgba(51,25,12,.25), 0 0 0 7px rgba(255,237,205,.24); }

/* Scenario states */
.cn3dh-root.cn3dh-state-no_answer .cn3dh-drawn-return .cn3dh-art-shade { background: linear-gradient(180deg, rgba(58,43,42,.10), rgba(75,48,32,.20)); }
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .cn3dh-art-shade { background: radial-gradient(circle at 53% 84%, rgba(255,111,87,.20), transparent 18%), linear-gradient(180deg, rgba(72,33,25,.12), rgba(90,45,33,.20)); }
.cn3dh-root.cn3dh-state-operator_message .cn3dh-drawn-return .pulse-board,
.cn3dh-root.cn3dh-state-last_signal .cn3dh-drawn-return .pulse-map,
.cn3dh-root.cn3dh-state-no_answer .cn3dh-drawn-return .pulse-phone,
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .pulse-sos { opacity: 1; animation: cn3dhDrawnObjectPulse .95s ease-in-out infinite; }
.cn3dh-root.cn3dh-state-attention .cn3dh-drawn-return .cn3dh-hero-presence { opacity: .92; }

@keyframes cn3dhDrawnWindow { 0%,100%{opacity:.72;transform:translateX(0)} 50%{opacity:.95;transform:translateX(-1.8%)} }
@keyframes cn3dhDrawnLamp { 0%,100%{opacity:.78;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes cn3dhDrawnLampCore { 0%,100%{opacity:.62;transform:scale(.92)} 50%{opacity:1;transform:scale(1.16)} }
@keyframes cn3dhDrawnSteam { 0%{opacity:0;transform:translateY(12px) scale(.72)} 25%{opacity:.72} 100%{opacity:0;transform:translateY(-32px) scale(1.25)} }
@keyframes cn3dhDrawnPhone { 0%,100%{opacity:.24;box-shadow:0 0 0 rgba(118,210,255,0)} 50%{opacity:.55;box-shadow:0 0 18px rgba(118,210,255,.32)} }
@keyframes cn3dhDrawnPhoneAlert { 0%,100%{opacity:.40;box-shadow:0 0 8px rgba(118,210,255,.18)} 50%{opacity:.9;box-shadow:0 0 26px rgba(118,210,255,.55)} }
@keyframes cn3dhDrawnPaperA { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(-1deg) translateY(-1px)} }
@keyframes cn3dhDrawnPaperB { 0%,100%{transform:rotate(5deg)} 50%{transform:rotate(2deg) translateY(1px)} }
@keyframes cn3dhDrawnCalendar { 0%,100%{opacity:.54;transform:scale(.96)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes cn3dhDrawnMap { 0%{transform:translateX(-50%) rotate(-2deg)} 100%{transform:translateX(155%) rotate(-2deg)} }
@keyframes cn3dhDrawnSosIdle { 0%,100%{transform:scale(.96);opacity:.30} 50%{transform:scale(1.07);opacity:.54} }
@keyframes cn3dhDrawnSosVibe { 0%{transform:translateX(-2px) rotate(-1deg)} 100%{transform:translateX(2px) rotate(1deg)} }
@keyframes cn3dhDrawnSosPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,119,99,0)} 50%{box-shadow:0 0 0 9px rgba(255,119,99,.2)} }
@keyframes cn3dhDrawnHeroPresence { 0%,100%{opacity:.47;transform:scale(1)} 50%{opacity:.72;transform:scale(1.026)} }
@keyframes cn3dhDrawnHeroBreath { 0%,100%{opacity:.38;transform:scale(.96)} 50%{opacity:.8;transform:scale(1.06)} }
@keyframes cn3dhDrawnBlink { 0%,44%,47%,100%{opacity:0;transform:scaleY(0)} 45%,46%{opacity:1;transform:scaleY(1)} 72%,73%{opacity:.95;transform:scaleY(.85)} }
@keyframes cn3dhDrawnObjectPulse { 0%,100%{opacity:.45;transform:scale(.98)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes cn3dhDrawnDust { 0%{opacity:0;transform:translateY(10px) scale(.7)} 12%{opacity:.55} 100%{opacity:0;transform:translateY(-28px) translateX(12px) scale(1.1)} }
@keyframes cn3dhDrawnHeart { 0%{opacity:0;transform:translateY(14px) scale(.7)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-46px) scale(1.15)} }
@keyframes cn3dhDrawnWarmBurst { 0%{opacity:.22} 30%{opacity:.82} 100%{opacity:.42} }
@keyframes cn3dhDrawnNudge { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-4px)} 70%{transform:translateX(4px)} }
@keyframes cn3dhDrawnHotspotAlert { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }

@media (max-width: 860px) {
  .cn3dh-drawn-return .cn3dh-kind-caption { top: 10px; max-width: 78%; font-size: 13px; padding: 10px 14px; }
  .cn3dh-drawn-return .cn3dh-hotspot { width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; }
}

/* Stage A — Game Identity & Scenario Rework */
.cn3dh-start-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 50% 46%, rgba(65, 32, 14, .34), rgba(32, 15, 7, .78));
}
.cn3dh-start-modal[hidden] { display: none !important; }
.cn3dh-start-card {
  width: min(680px, 92vw);
  border-radius: 34px;
  padding: 34px;
  background: linear-gradient(180deg, rgba(255, 248, 235, .98), rgba(255, 234, 204, .96));
  border: 2px solid rgba(199, 132, 59, .55);
  box-shadow: 0 30px 80px rgba(35, 16, 8, .32), inset 0 1px 0 rgba(255,255,255,.72);
  color: #5d351c;
  text-align: center;
}
.cn3dh-start-kicker {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(236, 200, 148, .54);
  color: #8b572d;
  font-weight: 800;
  margin-bottom: 14px;
}
.cn3dh-start-card h3 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #4e2b16;
}
.cn3dh-start-card p {
  margin: 0 auto 18px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.48;
  color: #6b4c37;
}
.cn3dh-start-path {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px auto 24px;
}
.cn3dh-start-path span,
.cn3dh-season-goal,
.cn3dh-reward-line {
  border-radius: 999px;
  background: rgba(255, 242, 218, .88);
  border: 1px solid rgba(199, 132, 59, .28);
  color: #7a4a27;
  font-weight: 800;
}
.cn3dh-start-path span {
  padding: 9px 13px;
}
.cn3dh-season-goal {
  padding: 9px 12px;
  margin: 8px 0 10px;
  font-size: 13px;
  line-height: 1.25;
}
.cn3dh-reward-line {
  padding: 8px 10px;
  margin: 8px 0 10px;
  font-size: 13px;
}
.cn3dh-game-panel h3 {
  margin-top: 8px !important;
}
.cn3dh-mission-list li {
  cursor: default;
}
.cn3dh-mission-title::before {
  content: '• ';
  color: #d28a3b;
}
.cn3dh-mission-list li.cn3dh-done .cn3dh-mission-title::before {
  content: '✓ ';
  color: #6da05d;
}
.cn3dh-story-card h3,
.cn3dh-finale-card h3 {
  letter-spacing: -.02em;
}
.cn3dh-journal span {
  line-height: 1.35;
}
@media (max-width: 760px) {
  .cn3dh-start-card { padding: 24px 18px; border-radius: 26px; }
  .cn3dh-start-card p { font-size: 15px; }
}

/* Stage B — visual room states */
.cn3dh-storybook-image {
  transition: opacity .45s ease, filter .45s ease;
}
.cn3dh-storybook-scene.is-room-changing .cn3dh-storybook-image {
  opacity: .72;
}
.cn3dh-storybook-scene[data-room-state="prologue"] .cn3dh-atmo-warmth { opacity: .56; }
.cn3dh-storybook-scene[data-room-state="connection"] .cn3dh-atmo-warmth { opacity: .78; }
.cn3dh-storybook-scene[data-room-state="no_answer"] .cn3dh-art-shade { background: rgba(52, 72, 92, .16); }
.cn3dh-storybook-scene[data-room-state="sos"] .cn3dh-art-shade { background: rgba(95, 36, 28, .12); }
.cn3dh-storybook-scene[data-room-state="operator"] .pulse-board,
.cn3dh-storybook-scene[data-room-state="signal"] .pulse-map,
.cn3dh-storybook-scene[data-room-state="family"] .pulse-photo,
.cn3dh-storybook-scene[data-room-state="week"] .pulse-calendar,
.cn3dh-storybook-scene[data-room-state="connection"] .pulse-phone,
.cn3dh-storybook-scene[data-room-state="sos"] .pulse-sos {
  opacity: 1;
  animation: cn3dhObjectPulse 1.4s ease-in-out infinite;
}
.cn3dh-storybook-scene[data-room-state="finale"] .cn3dh-atmo-care {
  opacity: .92;
}
.cn3dh-storybook-scene[data-room-state="finale"] .cn3dh-lamp-bloom {
  opacity: 1;
  transform: scale(1.08);
}
.cn3dh-storybook-scene[data-room-state="finale"] .pulse-photo,
.cn3dh-storybook-scene[data-room-state="finale"] .pulse-phone,
.cn3dh-storybook-scene[data-room-state="finale"] .pulse-calendar,
.cn3dh-storybook-scene[data-room-state="finale"] .pulse-board,
.cn3dh-storybook-scene[data-room-state="finale"] .pulse-map {
  opacity: .78;
}
.cn3dh-game-panel [data-role="next-chapter"] {
  display: none !important;
}
@keyframes cn3dhObjectPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Stage C — layered animated room + service terminology alignment */
.cn3dh-drawn-return .cn3dh-phone-wave,
.cn3dh-drawn-return .cn3dh-calendar-check,
.cn3dh-drawn-return .cn3dh-map-route-glow,
.cn3dh-drawn-return .cn3dh-sos-vibrate,
.cn3dh-drawn-return .cn3dh-hero-hand,
.cn3dh-drawn-return .cn3dh-hero-smile {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}
.cn3dh-drawn-return .cn3dh-lamp-bloom {
  opacity: .54;
  animation: cn3dhStageCLampBloom 3.8s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-lamp-core {
  opacity: .72;
  animation: cn3dhStageCLampCore 2.7s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-cup-steam i {
  width: 16%;
  height: 62%;
  opacity: 0;
  animation: cn3dhStageCSteam 3.2s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-phone-screen {
  opacity: .42;
  animation: cn3dhStageCPhoneIdle 3.2s ease-in-out infinite;
}
.cn3dh-root.cn3dh-state-no_answer .cn3dh-drawn-return .cn3dh-phone-screen,
.cn3dh-drawn-return[data-mission="phone"] .cn3dh-phone-screen,
.cn3dh-drawn-return[data-glow="phone"] .cn3dh-phone-screen {
  opacity: .88;
  animation: cn3dhStageCPhoneAttention 1.05s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-phone-wave {
  left: 34.0%;
  top: 77.0%;
  width: 10%;
  height: 10%;
  opacity: 0;
}
.cn3dh-drawn-return .cn3dh-phone-wave i {
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(120, 220, 255, .55);
  border-radius: 50%;
  opacity: 0;
  animation: cn3dhStageCWave 2.2s ease-out infinite;
}
.cn3dh-drawn-return .cn3dh-phone-wave i:nth-child(2) { animation-delay: .75s; }
.cn3dh-root.cn3dh-state-no_answer .cn3dh-drawn-return .cn3dh-phone-wave,
.cn3dh-drawn-return[data-glow="phone"] .cn3dh-phone-wave { opacity: 1; }

.cn3dh-drawn-return .cn3dh-note-a,
.cn3dh-drawn-return .cn3dh-note-b,
.cn3dh-drawn-return .cn3dh-note-c {
  transform-origin: 50% 10%;
  box-shadow: 0 3px 8px rgba(91,48,25,.14);
}
.cn3dh-drawn-return .cn3dh-note-c {
  left: 35.2%;
  top: 25.0%;
  width: 4.8%;
  height: 6.6%;
  background: rgba(211, 231, 190, .45);
  border-radius: 2px;
  animation: cn3dhStageCPaperC 6.4s ease-in-out infinite;
}
.cn3dh-root.cn3dh-state-operator_message .cn3dh-drawn-return .cn3dh-note-a,
.cn3dh-root.cn3dh-state-operator_message .cn3dh-drawn-return .cn3dh-note-b,
.cn3dh-root.cn3dh-state-operator_message .cn3dh-drawn-return .cn3dh-note-c,
.cn3dh-drawn-return[data-mission="board"] .cn3dh-board-note,
.cn3dh-drawn-return[data-glow="board"] .cn3dh-board-note {
  animation-duration: 1.2s;
  opacity: .85;
}

.cn3dh-drawn-return .cn3dh-calendar-mark {
  animation: cn3dhStageCDayPulse 2.0s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-calendar-check {
  left: 59.4%;
  top: 34.2%;
  width: 4.2%;
  height: 5.0%;
  border-right: 4px solid rgba(118, 166, 86, .86);
  border-bottom: 4px solid rgba(118, 166, 86, .86);
  transform: rotate(40deg) scale(.72);
  opacity: .36;
  filter: drop-shadow(0 2px 5px rgba(255,255,255,.25));
  animation: cn3dhStageCCheck 2.4s ease-in-out infinite;
}
.cn3dh-drawn-return[data-care="warming"] .cn3dh-calendar-check,
.cn3dh-drawn-return[data-care="strong"] .cn3dh-calendar-check,
.cn3dh-drawn-return[data-care="done"] .cn3dh-calendar-check,
.cn3dh-drawn-return[data-care="season"] .cn3dh-calendar-check,
.cn3dh-drawn-return[data-mission="calendar"] .cn3dh-calendar-check,
.cn3dh-drawn-return[data-glow="calendar"] .cn3dh-calendar-check {
  opacity: .92;
}

.cn3dh-drawn-return .cn3dh-map-route-glow {
  left: 70.0%;
  top: 74.0%;
  width: 17.0%;
  height: 10.0%;
  border-radius: 999px;
  background: linear-gradient(100deg, transparent 0, rgba(116, 194, 172, 0) 18%, rgba(116, 194, 172, .48) 42%, rgba(255,240,180,.42) 56%, rgba(116,194,172,0) 78%, transparent 100%);
  opacity: .24;
  transform: rotate(-12deg);
  animation: cn3dhStageCMapRoute 2.7s ease-in-out infinite;
}
.cn3dh-root.cn3dh-state-last_signal .cn3dh-drawn-return .cn3dh-map-route-glow,
.cn3dh-drawn-return[data-mission="map"] .cn3dh-map-route-glow,
.cn3dh-drawn-return[data-glow="map"] .cn3dh-map-route-glow {
  opacity: .78;
}

.cn3dh-drawn-return .cn3dh-sos-vibrate {
  left: 50.5%;
  top: 81.5%;
  width: 8.0%;
  height: 9.5%;
  opacity: 0;
}
.cn3dh-drawn-return .cn3dh-sos-vibrate i {
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(255, 140, 112, .56);
  border-radius: 50%;
  opacity: 0;
  animation: cn3dhStageCSosWave 1.15s ease-out infinite;
}
.cn3dh-drawn-return .cn3dh-sos-vibrate i:nth-child(2) { animation-delay: .38s; }
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .cn3dh-sos-vibrate,
.cn3dh-drawn-return[data-mission="sos"] .cn3dh-sos-vibrate,
.cn3dh-drawn-return[data-glow="sos"] .cn3dh-sos-vibrate {
  opacity: 1;
  animation: cn3dhStageCSosShake .22s linear infinite alternate;
}
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .cn3dh-sos-ring,
.cn3dh-drawn-return[data-mission="sos"] .cn3dh-sos-ring,
.cn3dh-drawn-return[data-glow="sos"] .cn3dh-sos-ring {
  opacity: .85;
  animation: cn3dhStageCSosRing .9s ease-in-out infinite;
}

.cn3dh-drawn-return .cn3dh-hero-presence {
  animation: cn3dhStageCHeroPresence 4.8s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-breath {
  animation: cn3dhStageCHeroBreath 5.6s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-blink b {
  opacity: 0;
  animation: cn3dhStageCBlink 6.8s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-hand {
  left: 34.1%;
  top: 54.4%;
  width: 6.0%;
  height: 8.0%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 55%, rgba(255, 224, 190, .22), rgba(255, 224, 190, 0) 68%);
  transform-origin: 50% 90%;
  animation: cn3dhStageCHand 4.9s ease-in-out infinite;
}
.cn3dh-drawn-return .cn3dh-hero-smile {
  left: 30.9%;
  top: 40.5%;
  width: 4.8%;
  height: 2.5%;
  border-bottom: 2px solid rgba(116, 62, 47, .42);
  border-radius: 50%;
  opacity: .2;
  animation: cn3dhStageCSmile 5.6s ease-in-out infinite;
}
.cn3dh-drawn-return.is-success .cn3dh-hero-smile,
.cn3dh-drawn-return.is-chapter .cn3dh-hero-smile,
.cn3dh-drawn-return.is-season .cn3dh-hero-smile,
.cn3dh-drawn-return[data-care="done"] .cn3dh-hero-smile,
.cn3dh-drawn-return[data-care="season"] .cn3dh-hero-smile {
  opacity: .55;
}

.cn3dh-drawn-return[data-glow="photo"] .pulse-photo,
.cn3dh-drawn-return[data-glow="calendar"] .pulse-calendar,
.cn3dh-drawn-return[data-glow="phone"] .pulse-phone,
.cn3dh-drawn-return[data-glow="board"] .pulse-board,
.cn3dh-drawn-return[data-glow="map"] .pulse-map,
.cn3dh-drawn-return[data-glow="sos"] .pulse-sos {
  animation-duration: 1.08s;
}

@keyframes cn3dhStageCLampBloom {
  0%,100% { opacity: .44; transform: scale(1); }
  50% { opacity: .72; transform: scale(1.06); }
}
@keyframes cn3dhStageCLampCore {
  0%,100% { opacity: .62; transform: scale(1); }
  50% { opacity: .92; transform: scale(1.12); }
}
@keyframes cn3dhStageCSteam {
  0% { opacity: 0; transform: translateY(11px) scale(.7) skewX(0deg); }
  22% { opacity: .58; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.18) skewX(-6deg); }
}
@keyframes cn3dhStageCPhoneIdle {
  0%,100% { opacity: .34; filter: brightness(1); }
  50% { opacity: .52; filter: brightness(1.18); }
}
@keyframes cn3dhStageCPhoneAttention {
  0%,100% { opacity: .72; transform: scale(1); filter: brightness(1.05); }
  50% { opacity: 1; transform: scale(1.08); filter: brightness(1.45); }
}
@keyframes cn3dhStageCWave {
  0% { opacity: 0; transform: scale(.45); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes cn3dhStageCPaperC {
  0%,100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(2px); }
}
@keyframes cn3dhStageCDayPulse {
  0%,100% { opacity: .46; transform: scale(1); }
  50% { opacity: .96; transform: scale(1.12); }
}
@keyframes cn3dhStageCCheck {
  0%,100% { transform: rotate(40deg) scale(.72); }
  50% { transform: rotate(40deg) scale(1.08); }
}
@keyframes cn3dhStageCMapRoute {
  0% { transform: rotate(-12deg) translateX(-8%) scaleX(.86); filter: brightness(1); }
  50% { transform: rotate(-12deg) translateX(5%) scaleX(1.05); filter: brightness(1.45); }
  100% { transform: rotate(-12deg) translateX(10%) scaleX(.86); filter: brightness(1); }
}
@keyframes cn3dhStageCSosWave {
  0% { opacity: 0; transform: scale(.45); }
  30% { opacity: .86; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes cn3dhStageCSosShake {
  0% { transform: translateX(-2px) rotate(-2deg); }
  100% { transform: translateX(2px) rotate(2deg); }
}
@keyframes cn3dhStageCSosRing {
  0%,100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.16); }
}
@keyframes cn3dhStageCHeroPresence {
  0%,100% { opacity: .30; transform: scale(1); }
  50% { opacity: .52; transform: scale(1.035); }
}
@keyframes cn3dhStageCHeroBreath {
  0%,100% { opacity: .25; transform: scale(1) translateY(0); }
  50% { opacity: .46; transform: scale(1.025) translateY(-1.2%); }
}
@keyframes cn3dhStageCBlink {
  0%, 42%, 44%, 100% { opacity: 0; transform: scaleY(.25); }
  43%, 43.7% { opacity: .88; transform: scaleY(5.5); }
  74%, 74.8% { opacity: .65; transform: scaleY(4.5); }
}
@keyframes cn3dhStageCHand {
  0%,100% { transform: rotate(-1deg) translateY(0); opacity: .14; }
  50% { transform: rotate(2.5deg) translateY(-2px); opacity: .28; }
}
@keyframes cn3dhStageCSmile {
  0%,100% { transform: scaleX(.88); }
  50% { transform: scaleX(1.12); }
}

/* Stage C lamp pulse visibility fix — make the drawn lamp visibly breathe, not just glow */
.cn3dh-drawn-return .cn3dh-lamp-bloom {
  left: 63.2% !important;
  top: 33.2% !important;
  width: 20.5% !important;
  height: 30.5% !important;
  opacity: .30;
  background:
    radial-gradient(circle, rgba(255, 252, 220, .68) 0%, rgba(255, 226, 148, .42) 24%, rgba(255, 187, 84, .19) 49%, rgba(255, 187, 84, 0) 76%);
  filter: blur(11px) brightness(1.15);
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  animation: cn3dhStageCLampBloomVisible 1.65s ease-in-out infinite !important;
}
.cn3dh-drawn-return .cn3dh-lamp-core {
  left: 70.1% !important;
  top: 39.8% !important;
  width: 4.8% !important;
  height: 6.8% !important;
  opacity: .46;
  background: radial-gradient(circle, rgba(255,255,236,.96) 0%, rgba(255,236,170,.76) 42%, rgba(255,206,105,.22) 70%, transparent 82%);
  filter: blur(1.6px) brightness(1.18);
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  animation: cn3dhStageCLampCoreVisible 1.65s ease-in-out infinite !important;
}
.cn3dh-drawn-return .cn3dh-lamp-core::after {
  content: '';
  position: absolute;
  left: -120%;
  top: -120%;
  width: 340%;
  height: 340%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,242,186,.34) 0%, rgba(255,218,138,.18) 42%, transparent 72%);
  opacity: .28;
  animation: cn3dhStageCLampHaloVisible 1.65s ease-in-out infinite !important;
}
.cn3dh-storybook-scene[data-room-state="finale"] .cn3dh-lamp-bloom,
.cn3dh-storybook-scene[data-room-state="week"] .cn3dh-lamp-bloom {
  animation-duration: 1.45s !important;
}
.cn3dh-root.cn3dh-state-sos .cn3dh-drawn-return .cn3dh-lamp-bloom {
  background: radial-gradient(circle, rgba(255,238,205,.68) 0%, rgba(255,197,135,.42) 34%, rgba(255,135,96,.20) 56%, transparent 78%);
  animation-duration: 1.15s !important;
}
@keyframes cn3dhStageCLampBloomVisible {
  0%, 100% { opacity: .28; transform: scale(.88); filter: blur(12px) brightness(1.02); }
  45% { opacity: .88; transform: scale(1.22); filter: blur(9px) brightness(1.34); }
  68% { opacity: .62; transform: scale(1.08); filter: blur(10px) brightness(1.18); }
}
@keyframes cn3dhStageCLampCoreVisible {
  0%, 100% { opacity: .42; transform: scale(.82); filter: blur(1.8px) brightness(1.05); }
  45% { opacity: 1; transform: scale(1.34); filter: blur(1.2px) brightness(1.45); }
  68% { opacity: .72; transform: scale(1.05); filter: blur(1.5px) brightness(1.22); }
}
@keyframes cn3dhStageCLampHaloVisible {
  0%, 100% { opacity: .18; transform: scale(.78); }
  45% { opacity: .62; transform: scale(1.22); }
  68% { opacity: .38; transform: scale(1.02); }
}

/* Stage D — Family Game Interface */
.cn3dh-family-game-hud {
  position: absolute;
  left: 22px;
  top: 218px;
  z-index: 14;
  width: min(356px, calc(100% - 44px));
  padding: 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 251, 240, .92), rgba(255, 237, 207, .86));
  border: 1px solid rgba(205, 142, 79, .34);
  box-shadow: 0 20px 46px rgba(36, 18, 8, .18), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  color: #4b2d19;
}
.cn3dh-family-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cn3dh-family-game-head span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(122, 76, 39, .12);
  color: #815126;
  font-size: 12px;
  font-weight: 900;
}
.cn3dh-family-game-head strong {
  flex: 1;
  min-width: 0;
  color: #492a16;
  font-size: 14px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn3dh-family-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 10px;
}
.cn3dh-path-step {
  position: relative;
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(113, 72, 36, .10);
  text-align: center;
  color: #745238;
  overflow: hidden;
}
.cn3dh-path-step::after {
  content: "";
  position: absolute;
  inset: auto 10px 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(112, 77, 44, .12);
}
.cn3dh-path-step b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background: rgba(114, 77, 45, .14);
  color: #765034;
  font-size: 12px;
  font-weight: 950;
}
.cn3dh-path-step span {
  display: block;
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: 850;
}
.cn3dh-path-step.is-current {
  background: linear-gradient(180deg, rgba(255,247,224,.96), rgba(255,229,190,.86));
  border-color: rgba(211, 145, 67, .44);
  box-shadow: 0 8px 18px rgba(128, 73, 32, .12);
  transform: translateY(-1px);
}
.cn3dh-path-step.is-current b {
  background: linear-gradient(180deg, #f3c777, #c6843e);
  color: #fff9ec;
  box-shadow: 0 0 0 5px rgba(223, 162, 88, .18);
}
.cn3dh-path-step.is-current::after {
  background: linear-gradient(90deg, #d89648, #f2c977);
}
.cn3dh-path-step.is-done {
  background: linear-gradient(180deg, rgba(238,249,231,.94), rgba(221,241,211,.82));
  border-color: rgba(105, 157, 82, .32);
}
.cn3dh-path-step.is-done b {
  background: linear-gradient(180deg, #9fd384, #6da25b);
  color: #fff;
}
.cn3dh-path-step.is-done::after {
  background: linear-gradient(90deg, #79aa63, #c2de99);
}
.cn3dh-path-step.is-locked {
  opacity: .7;
}
.cn3dh-family-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}
.cn3dh-reward-empty,
.cn3dh-reward-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}
.cn3dh-reward-empty {
  background: rgba(114, 77, 45, .09);
  color: #876447;
}
.cn3dh-reward-badge {
  background: linear-gradient(180deg, rgba(255,246,221,.96), rgba(243,211,154,.9));
  border: 1px solid rgba(205, 142, 79, .32);
  color: #784620;
  box-shadow: 0 7px 15px rgba(83, 45, 20, .10);
}
.cn3dh-reward-badge::before {
  content: "❤";
  margin-right: 5px;
  color: #c66f52;
}
.cn3dh-current-step-card {
  position: relative;
  margin: 10px 0;
  padding: 13px 14px 13px 42px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 247, 224, .95), rgba(255, 231, 196, .82));
  border: 1px solid rgba(211, 145, 67, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 10px 20px rgba(111, 62, 28, .08);
}
.cn3dh-current-step-card::before {
  content: "➜";
  position: absolute;
  left: 13px;
  top: 16px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #cc8543;
  color: #fff8e8;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 0 0 5px rgba(204, 133, 67, .16);
}
.cn3dh-current-step-card span {
  display: block;
  margin-bottom: 3px;
  color: #8a572b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cn3dh-current-step-card strong {
  display: block;
  color: #412512;
  font-size: 15px;
  line-height: 1.18;
  font-weight: 950;
}
.cn3dh-current-step-card small {
  display: block;
  margin-top: 4px;
  color: #6f543d;
  font-size: 12px;
  line-height: 1.32;
}
.cn3dh-game-panel {
  background: linear-gradient(180deg, rgba(255, 251, 241, .94), rgba(255, 239, 215, .90)) !important;
  border: 1px solid rgba(205, 142, 79, .34) !important;
  box-shadow: 0 24px 58px rgba(35, 17, 8, .22), inset 0 1px 0 rgba(255,255,255,.68) !important;
}
.cn3dh-game-panel::before {
  content: "";
  display: block;
  width: 62px;
  height: 5px;
  margin: -3px auto 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9964d, #f1cc83, #d9964d);
  opacity: .72;
}
.cn3dh-game-season {
  background: rgba(218, 158, 87, .16) !important;
  color: #7f4c22 !important;
}
.cn3dh-season-goal,
.cn3dh-reward-line {
  display: block;
  border-radius: 16px !important;
  background: rgba(255, 245, 224, .86) !important;
  color: #69401e !important;
}
.cn3dh-mission-list li {
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(116, 76, 42, .10);
}
.cn3dh-mission-list li.cn3dh-current {
  background: linear-gradient(180deg, rgba(255, 248, 228, .98), rgba(255, 233, 198, .88)) !important;
  border-color: rgba(211, 145, 67, .36);
}
.cn3dh-mission-list li.cn3dh-done {
  background: linear-gradient(180deg, rgba(238, 248, 231, .94), rgba(225, 241, 216, .82)) !important;
  border-color: rgba(105, 157, 82, .26);
}
.cn3dh-reward-modal {
  position: absolute;
  inset: 0;
  z-index: 76;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 43%, rgba(255, 230, 176, .23), transparent 42%), rgba(31, 15, 7, .58);
  backdrop-filter: blur(8px);
}
.cn3dh-reward-modal[hidden] { display: none !important; }
.cn3dh-reward-card {
  position: relative;
  width: min(540px, 94vw);
  padding: clamp(24px, 4vw, 38px);
  border-radius: 34px;
  text-align: center;
  color: #452813;
  background: linear-gradient(180deg, rgba(255, 251, 240, .99), rgba(255, 229, 195, .97));
  border: 2px solid rgba(220, 158, 84, .50);
  box-shadow: 0 34px 90px rgba(31, 14, 6, .40), inset 0 1px 0 rgba(255,255,255,.76);
  overflow: hidden;
}
.cn3dh-reward-card::before,
.cn3dh-reward-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cn3dh-reward-card::before {
  width: 260px;
  height: 260px;
  left: -95px;
  top: -120px;
  background: radial-gradient(circle, rgba(255, 214, 132, .45), transparent 70%);
}
.cn3dh-reward-card::after {
  width: 210px;
  height: 210px;
  right: -80px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(170, 204, 128, .30), transparent 70%);
}
.cn3dh-reward-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(214, 156, 82, .18);
  color: #805022;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cn3dh-reward-medal {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 16px auto 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #fff9d5, #efbf6d 48%, #b66f35 82%);
  color: #fff9ef;
  font-size: 34px;
  text-shadow: 0 2px 10px rgba(97, 48, 18, .25);
  box-shadow: 0 0 0 9px rgba(239, 191, 109, .16), 0 18px 34px rgba(123, 72, 32, .22);
  animation: cn3dhRewardMedal 1.6s ease-in-out infinite;
}
.cn3dh-reward-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #42250f;
}
.cn3dh-reward-card p {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 440px;
  color: #6a4b35;
  font-size: 16px;
  line-height: 1.5;
}
.cn3dh-reward-next {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin: 18px 0 16px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(126, 83, 45, .10);
  color: #805228;
  font-size: 13px;
  font-weight: 900;
}
.cn3dh-reward-card .cn3dh-primary-action {
  position: relative;
  z-index: 1;
}
@keyframes cn3dhRewardMedal {
  0%, 100% { transform: scale(.98); box-shadow: 0 0 0 8px rgba(239, 191, 109, .14), 0 18px 34px rgba(123, 72, 32, .20); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(239, 191, 109, .23), 0 22px 42px rgba(123, 72, 32, .26); }
}
.cn3dh-start-card {
  width: min(760px, 94vw) !important;
}
.cn3dh-start-path {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px !important;
}
.cn3dh-start-path span {
  display: grid;
  place-items: center;
  min-height: 44px;
  line-height: 1.12;
  font-size: 12px;
}
.cn3dh-story-card {
  border: 1px solid rgba(205, 142, 79, .32);
  background: linear-gradient(180deg, rgba(255,251,241,.98), rgba(255,236,210,.96)) !important;
}
.cn3dh-story-card::before {
  content: "Путь заботы";
  display: inline-flex;
  margin-bottom: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(214, 156, 82, .16);
  color: #815126;
  font-size: 12px;
  font-weight: 950;
}
.cn3dh-finale-card {
  border: 2px solid rgba(220, 158, 84, .45);
  background: linear-gradient(180deg, rgba(255,251,240,.99), rgba(255,229,195,.96)) !important;
}
.cn3dh-primary-action,
.cn3dh-start-card .cn3dh-primary-action,
.cn3dh-story-card .cn3dh-primary-action,
.cn3dh-reward-card .cn3dh-primary-action {
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  background: linear-gradient(180deg, #8d5a32, #6d3f20);
  color: #fff7e8;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(77, 41, 17, .22);
  transition: transform .18s ease, filter .18s ease;
}
.cn3dh-primary-action:hover,
.cn3dh-start-card .cn3dh-primary-action:hover,
.cn3dh-story-card .cn3dh-primary-action:hover,
.cn3dh-reward-card .cn3dh-primary-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.cn3dh-is-fullscreen .cn3dh-family-game-hud {
  left: 18px !important;
  top: 196px !important;
  width: 340px !important;
  max-height: calc(100% - 310px);
  overflow: auto;
}
@media (max-width: 1100px) {
  .cn3dh-family-game-hud {
    width: 310px;
  }
  .cn3dh-family-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .cn3dh-family-game-hud {
    display: none;
  }
  .cn3dh-current-step-card {
    display: none;
  }
  .cn3dh-start-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cn3dh-reward-card {
    padding: 24px 18px;
    border-radius: 28px;
  }
  .cn3dh-reward-medal {
    width: 66px;
    height: 66px;
    font-size: 28px;
  }
}
@media (max-width: 560px) {
  .cn3dh-start-path {
    grid-template-columns: 1fr;
  }
  .cn3dh-reward-card h3 {
    font-size: 28px;
  }
  .cn3dh-reward-card p {
    font-size: 14px;
  }
}


/* Stage D Fix 1 — compact path layout in normal view.
   In normal page mode the path map must not cover the illustrated room.
   Fullscreen keeps the larger game-path card. */
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
  left: 300px !important;
  right: 300px !important;
  top: 108px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 62px !important;
  padding: 10px 12px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  z-index: 13 !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-head,
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-rewards {
  display: none !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-path {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 4px 5px !important;
  border-radius: 14px !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step::after {
  display: none !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step b {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 2px !important;
  font-size: 10px !important;
}
.cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step span {
  font-size: 9px !important;
  line-height: 1.05 !important;
  max-height: 19px !important;
  overflow: hidden !important;
}
@media (max-width: 1180px) and (min-width: 981px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    left: 292px !important;
    right: 288px !important;
    top: 112px !important;
    max-height: 54px !important;
    padding: 8px 10px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step {
    min-height: 36px !important;
    padding: 4px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step span {
    display: none !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-path-step b {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 980px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    display: none !important;
  }
}

/* Stage E — Daily Care Mode */
.cn3dh-daily-widget {
  margin-top: 12px;
  padding: 13px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(246, 255, 237, .92), rgba(255, 244, 219, .90));
  border: 1px solid rgba(119, 157, 82, .28);
  color: #3c2a1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 10px 22px rgba(57, 33, 14, .08);
}
.cn3dh-daily-widget[hidden] { display: none !important; }
.cn3dh-daily-widget span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(112, 151, 94, .16);
  color: #55703c;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cn3dh-daily-widget strong {
  display: block;
  margin-top: 8px;
  color: #3a281a;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 950;
}
.cn3dh-daily-widget small {
  display: block;
  margin-top: 4px;
  color: #6b523b;
  font-size: 12px;
  line-height: 1.3;
}
.cn3dh-daily-mini-progress,
.cn3dh-daily-progress {
  position: relative;
  height: 9px;
  margin: 10px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(79, 59, 36, .13);
}
.cn3dh-daily-mini-progress i,
.cn3dh-daily-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7aa563, #efbf6d);
  transition: width .35s ease;
}
.cn3dh-daily-widget button,
.cn3dh-daily-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #789d5d, #51743e);
  color: #fff9ef;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 9px 18px rgba(58, 92, 42, .18);
  transition: transform .18s ease, filter .18s ease;
}
.cn3dh-daily-widget button:hover,
.cn3dh-daily-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.cn3dh-daily-btn[hidden] { display: none !important; }
.cn3dh-daily-modal {
  position: absolute;
  inset: 0;
  z-index: 78;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(236, 255, 214, .18), transparent 42%), rgba(31, 15, 7, .58);
  backdrop-filter: blur(8px);
}
.cn3dh-daily-modal[hidden] { display: none !important; }
.cn3dh-daily-card {
  width: min(620px, 94vw);
  max-height: min(760px, 92vh);
  overflow: auto;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 34px;
  color: #402713;
  background: linear-gradient(180deg, rgba(255, 252, 242, .99), rgba(240, 250, 224, .96));
  border: 2px solid rgba(135, 170, 90, .42);
  box-shadow: 0 34px 90px rgba(31, 14, 6, .40), inset 0 1px 0 rgba(255,255,255,.76);
}
.cn3dh-daily-kicker {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(112, 151, 94, .16);
  color: #55703c;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cn3dh-daily-card h3 {
  margin: 14px 0 9px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #3c2512;
}
.cn3dh-daily-card p {
  margin: 0;
  color: #6a5038;
  font-size: 16px;
  line-height: 1.48;
}
.cn3dh-daily-progress {
  height: 13px;
  margin-top: 18px;
}
.cn3dh-daily-progress span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  color: #3d2a1d;
  font-size: 11px;
  font-weight: 950;
}
.cn3dh-daily-progress i {
  position: absolute;
  inset: 0 auto 0 0;
}
.cn3dh-daily-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
}
.cn3dh-daily-step {
  width: 100%;
  border: 0;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: "icon title" "icon text";
  gap: 2px 10px;
  padding: 13px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, .62);
  color: #49301f;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(93, 70, 40, .08);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cn3dh-daily-step:hover {
  transform: translateY(-1px);
  background: rgba(255, 248, 229, .86);
}
.cn3dh-daily-step b {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(111, 151, 94, .16);
  color: #5e7b47;
  font-weight: 950;
}
.cn3dh-daily-step span {
  grid-area: title;
  font-size: 15px;
  line-height: 1.18;
  font-weight: 950;
  color: #3b2515;
}
.cn3dh-daily-step small {
  grid-area: text;
  color: #6c523b;
  font-size: 13px;
  line-height: 1.32;
}
.cn3dh-daily-step.is-current {
  background: linear-gradient(180deg, rgba(255, 249, 226, .98), rgba(237, 248, 221, .90));
  box-shadow: inset 0 0 0 1px rgba(122, 165, 90, .26), 0 10px 20px rgba(69, 96, 47, .10);
}
.cn3dh-daily-step.is-current b {
  background: linear-gradient(180deg, #9fc875, #6f9c50);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(113, 156, 81, .16);
}
.cn3dh-daily-step.is-done {
  background: linear-gradient(180deg, rgba(237, 249, 230, .98), rgba(219, 240, 207, .90));
}
.cn3dh-daily-step.is-done b {
  background: linear-gradient(180deg, #9fd384, #6da25b);
  color: #fff;
}
.cn3dh-daily-note {
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(112, 151, 94, .11);
  color: #5e4a36;
  font-size: 13px;
  line-height: 1.38;
}
.cn3dh-daily-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.cn3dh-daily-unlocked .cn3dh-status-pill {
  background: rgba(246, 255, 236, .93) !important;
  color: #476236 !important;
}
.cn3dh-daily-complete .cn3dh-status-pill {
  background: rgba(240, 252, 225, .96) !important;
  color: #3d6b34 !important;
}
.cn3dh-daily-complete .cn3dh-daily-widget {
  background: linear-gradient(180deg, rgba(238, 251, 228, .96), rgba(255, 246, 222, .92));
}
@media (max-width: 860px) {
  .cn3dh-daily-widget {
    display: none !important;
  }
  .cn3dh-daily-card {
    padding: 22px 18px;
    border-radius: 28px;
  }
  .cn3dh-daily-card h3 {
    font-size: 28px;
  }
  .cn3dh-daily-card p {
    font-size: 14px;
  }
}

/* Stage F — real service data widget */
.cn3dh-real-widget {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 248, 236, .92), rgba(244, 221, 188, .82));
  border: 1px solid rgba(154, 100, 47, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 24px rgba(68, 37, 16, .08);
}
.cn3dh-real-widget[hidden] { display: none !important; }
.cn3dh-real-widget span {
  display: block;
  color: #a06a32;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.cn3dh-real-widget strong {
  display: block;
  color: #5a3822;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 5px;
}
.cn3dh-real-widget small {
  display: block;
  color: #715643;
  font-size: 12px;
  line-height: 1.35;
}
.cn3dh-mode-inline:not(.cn3dh-is-fullscreen) .cn3dh-real-widget {
  padding: 10px 12px;
  margin: 8px 0 10px;
}


/* Stage F Fix 1 — normal-view layout correction.
   The daily care meter is moved out of the left visual area and made compact.
   The care path strip is centered over the illustrated room area, not over the whole page. */
@media (min-width: 981px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 86px !important;
    left: calc(50% + 30px) !important;
    right: auto !important;
    width: 224px !important;
    min-height: 0 !important;
    padding: 9px 11px !important;
    border-radius: 17px !important;
    z-index: 15 !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter span {
    margin: 0 0 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-bar {
    height: 7px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 132px !important;
    left: calc(50% - 180px) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(690px, calc(100% - 500px)) !important;
    max-width: 690px !important;
    max-height: 62px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    z-index: 13 !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-path {
    justify-content: center !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 84px !important;
    left: calc(50% + 18px) !important;
    width: 206px !important;
    padding: 8px 10px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 126px !important;
    left: calc(50% - 168px) !important;
    width: min(620px, calc(100% - 456px)) !important;
    max-height: 54px !important;
    padding: 8px 10px !important;
  }
}

.cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter {
  left: 22px !important;
  top: 142px !important;
  width: min(320px, calc(100% - 44px)) !important;
  padding: 14px !important;
}
.cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter span {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  white-space: normal !important;
}
.cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-bar {
  height: 10px !important;
}


/* Stage F Fix 2 — block distribution cleanup.
   Goals:
   1) hide the extra dependent name in the top-left header;
   2) keep the status, care meter and path map from overlapping;
   3) center the path map and make all top blocks visually balanced
      in normal and fullscreen desktop modes. */
.cn3dh-root .cn3dh-dependent {
  display: none !important;
}

@media (min-width: 981px) {
  .cn3dh-root .cn3dh-hero-panel {
    top: 18px !important;
    left: 18px !important;
    right: 18px !important;
    align-items: start !important;
  }
  .cn3dh-root .cn3dh-title {
    margin: 0 !important;
  }
  .cn3dh-root .cn3dh-status-pill {
    align-self: start !important;
    max-width: 320px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
  }

  .cn3dh-root .cn3dh-care-meter,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter {
    top: 88px !important;
    left: 18px !important;
    right: auto !important;
    width: 250px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    z-index: 15 !important;
  }
  .cn3dh-root .cn3dh-care-meter span,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter span {
    margin: 0 0 7px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .cn3dh-root .cn3dh-care-bar,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-bar {
    height: 8px !important;
  }

  .cn3dh-root .cn3dh-family-game-hud,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-game-hud {
    top: 104px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 420px)) !important;
    max-width: 760px !important;
    max-height: 60px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    z-index: 14 !important;
  }
  .cn3dh-root .cn3dh-family-game-head,
  .cn3dh-root .cn3dh-family-rewards,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-game-head,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-rewards {
    display: none !important;
  }
  .cn3dh-root .cn3dh-family-path,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-path {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .cn3dh-root .cn3dh-path-step,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 4px 5px !important;
    border-radius: 14px !important;
  }
  .cn3dh-root .cn3dh-path-step::after,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step::after {
    display: none !important;
  }
  .cn3dh-root .cn3dh-path-step b,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step b {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto 2px !important;
    font-size: 10px !important;
  }
  .cn3dh-root .cn3dh-path-step span,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step span {
    font-size: 9px !important;
    line-height: 1.05 !important;
    max-height: 19px !important;
    overflow: hidden !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .cn3dh-root .cn3dh-status-pill {
    max-width: 270px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .cn3dh-root .cn3dh-care-meter,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter {
    width: 220px !important;
    top: 84px !important;
    padding: 9px 10px !important;
  }
  .cn3dh-root .cn3dh-family-game-hud,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-game-hud {
    top: 100px !important;
    width: min(640px, calc(100% - 370px)) !important;
    max-height: 54px !important;
    padding: 8px 10px !important;
  }
  .cn3dh-root .cn3dh-path-step,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step {
    min-height: 36px !important;
    padding: 4px !important;
  }
  .cn3dh-root .cn3dh-path-step span,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step span {
    display: none !important;
  }
  .cn3dh-root .cn3dh-path-step b,
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step b {
    margin-bottom: 0 !important;
  }
}


/* Stage F Fix 3 — top block reposition in normal and fullscreen modes.
   Normal mode: move the care meter to the centered top slot above the path strip.
   Fullscreen: keep the care meter in the centered top slot, and return the path
   card to the left-side expanded layout. */
@media (min-width: 981px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 78px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 220px !important;
    max-width: 220px !important;
    padding: 9px 11px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 118px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(740px, calc(100% - 420px)) !important;
    max-width: 740px !important;
    max-height: 58px !important;
    padding: 10px 12px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 76px !important;
    width: 208px !important;
    max-width: 208px !important;
    padding: 8px 10px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 112px !important;
    width: min(620px, calc(100% - 380px)) !important;
    max-height: 52px !important;
    padding: 8px 10px !important;
  }
}

@media (min-width: 981px) {
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter {
    top: 78px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 232px !important;
    max-width: 232px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-meter span {
    margin: 0 0 7px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-care-bar {
    height: 8px !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-game-hud {
    top: 154px !important;
    left: 18px !important;
    right: auto !important;
    transform: none !important;
    width: 340px !important;
    max-width: 340px !important;
    max-height: calc(100% - 154px - 136px) !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: auto !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-game-head {
    display: flex !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-rewards {
    display: flex !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-family-path {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    justify-content: initial !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step {
    min-height: 58px !important;
    padding: 8px 6px !important;
    border-radius: 16px !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step::after {
    display: block !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step b {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto 4px !important;
    font-size: 12px !important;
  }
  .cn3dh-root.cn3dh-is-fullscreen .cn3dh-path-step span {
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Stage F Fix 4 — normal view top care meter adjustment.
   Fullscreen layout was accepted, so this override changes only the normal mode.
   The care meter is moved upward into the free top-center slot, on the same visual
   level as the right status pill, without changing the centered path strip. */
@media (min-width: 981px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 22px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 220px !important;
    max-width: 220px !important;
    padding: 9px 11px !important;
    z-index: 18 !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 118px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-care-meter {
    top: 22px !important;
    width: 208px !important;
    max-width: 208px !important;
  }
  .cn3dh-root:not(.cn3dh-is-fullscreen) .cn3dh-family-game-hud {
    top: 112px !important;
  }
}