/* Phone-only illustrated sanctuary; SVG/DOM baseline needs no WebGL. */
body:has(.sanctuary-home){background:#111e26}
#app:has(.sanctuary-home){background:#203136;color:#f3e4c3;max-width:430px}
#app:has(.sanctuary-home) header{padding:10px 16px 0}
#app:has(.sanctuary-home) .brand{color:#e8cb96}
#app:has(.sanctuary-home) .brand span{font-size:15px}
#app:has(.sanctuary-home) .food{background:#324044;color:#ecd3a4;border-color:#65716a;padding:7px 10px}
.sanctuary-heading{padding:12px 22px 0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sanctuary-heading p{font-size:9px;letter-spacing:2.5px;color:#b9c8b9;margin:0 0 8px}
.sanctuary-heading h1{font-family:Georgia,serif;font-size:27px;font-weight:normal;letter-spacing:-.5px;margin:0}
.home-sound{flex:none;width:44px;min-height:44px;border-radius:50%;border:1px solid #7f8879;color:#f4dca9;background:#304246;font-size:24px}
.home-sound[aria-pressed=true]{background:#736346}
.scene.sanctuary{height:auto;aspect-ratio:390/520;max-height:none;min-height:0;margin:12px 0 0;border-radius:0;background:#243438;isolation:isolate;overflow:hidden}
.cave-art{position:absolute;inset:0;width:100%;height:100%}
.cave-companion{position:absolute;width:57%;height:46%;left:24%;top:32%;z-index:2;pointer-events:none}
.sanctuary .cave-companion .dragon{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;transform:none;filter:drop-shadow(0 12px 8px #10202488);animation:companion-breathe 6s ease-in-out infinite;transform-origin:50% 95%}
.sanctuary.respond-crystal .cave-companion .dragon{filter:drop-shadow(0 0 15px #67cbb877)}
.sanctuary.respond-pool .cave-companion{transform:translate(-6px,4px) rotate(-3deg)}
.sanctuary .cave-companion.fed .dragon{filter:drop-shadow(0 0 20px #f6c570)}
.world-object{position:absolute;z-index:4;display:flex;align-items:center;flex-direction:column;justify-content:end;background:transparent;border:0;padding:0;color:#fff0cb;min-width:65px;filter:drop-shadow(0 5px 5px #0d2028aa)}
.world-object svg{width:100%;height:calc(100% - 26px);overflow:visible;transition:filter .4s}
.world-object span{display:block;white-space:nowrap;font-size:12px;line-height:24px;background:#172c33e8;border:1px solid #a29d7566;padding:0 8px;border-radius:12px;min-height:26px}
.object-lantern{left:11%;top:19%;width:19%;height:28%}
.object-crystal{right:5%;top:51%;width:21%;height:24%}
.object-pool{left:7%;top:76%;width:31%;height:16%}
.world-object:active svg{transform:scale(.95)}
.world-object:focus-visible{outline:2px solid #ffe4ac;outline-offset:4px;border-radius:10px}
.warm-light{opacity:.18;transition:opacity .8s}
.warm .warm-light{opacity:1}
.warm .object-lantern svg{filter:drop-shadow(0 0 13px #ffce74)}
.warm .lamp-glass{fill:#ffd782}
.ceiling-stars{opacity:0;transition:opacity .7s}
.starlit .ceiling-stars{opacity:1}
.starlit .object-crystal svg{filter:drop-shadow(0 0 13px #7af7e3)}
.respond-crystal .ceiling-stars{animation:star-reveal 1.3s ease-out}
.companion-thought{position:absolute;z-index:3;left:29%;top:28%;margin:0;font-size:12px;color:#fce8bb;text-shadow:0 2px 4px #000;background:#263639ba;border-radius:20px;padding:6px 10px;pointer-events:none}
.scene-caption{position:absolute;z-index:5;bottom:0;left:0;right:0;padding:9px 15px 10px;min-height:42px;text-align:center;font-size:12px;line-height:1.5;background:linear-gradient(transparent,#172b32 35%);color:#ebddbc;pointer-events:none}
.water-ripples{position:absolute;top:78.5%;left:12%;width:21%;height:7%;z-index:5;pointer-events:none;opacity:0}
.water-ripples i{position:absolute;inset:20%;border:2px solid #dcfff1;border-radius:50%}
.respond-pool .water-ripples{opacity:1}
.respond-pool .water-ripples i{animation:ripple 2.2s ease-out infinite}
.respond-pool .water-ripples i:nth-child(2){animation-delay:.7s}
.respond-pool .water-ripples i:nth-child(3){animation-delay:1.4s}
.sanctuary .garden-decoration{left:auto;right:8%;bottom:9%;transform:scale(.6);transform-origin:bottom right;pointer-events:none}
.sanctuary-paths{padding:14px 24px 0;display:grid;grid-template-columns:1fr;gap:9px;background:linear-gradient(#172b32,#203136)}
.sanctuary-paths button{margin:0;width:100%;border-radius:24px;min-height:48px}
.sanctuary-paths .primary{background:linear-gradient(#e3bb77,#c18b4f);color:#2e302a;border:1px solid #eed3a1;box-shadow:0 4px 0 #101f25;font-size:16px}
.sanctuary-paths .word-path{background:transparent;border:1px solid #7e8d82;color:#e4e6c9;font-size:15px}
.sanctuary-paths .feed{background:transparent;color:#efd29b;border:0;font-size:14px}
.sanctuary-paths .feed:disabled{color:#a0b0a7;opacity:1}
.sanctuary-paths .tiny{color:#bdc8b9;margin:0;font-size:11px}
#app:has(.sanctuary-home) nav{background:#203136;border-color:#52625c;margin-top:12px}
#app:has(.sanctuary-home) nav button{color:#d4d8be}
#app:has(.sanctuary-home) nav button.active{background:#3d4d49;color:#ffdc97}
#app:has(.sanctuary-home) dialog{color:#334b3d}
@keyframes companion-breathe{50%{transform:translateY(-3px) rotate(.6deg)}}
@keyframes star-reveal{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes ripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.sanctuary *, .sanctuary *::before,.sanctuary *::after{animation:none!important;transition:none!important}.respond-pool .water-ripples i:nth-child(2){inset:5%}.respond-pool .water-ripples i:nth-child(3){inset:35%}}
@media(max-width:350px){.sanctuary-heading{padding:10px 16px 0}.sanctuary-heading h1{font-size:24px}.companion-thought{font-size:11px;left:26%;padding:5px 8px}.world-object span{font-size:11px}.scene-caption{font-size:11px;min-height:40px}.sanctuary-paths{padding:12px 18px 0}}