#cinematic-observation {position:absolute;inset:0;z-index:45;overflow:hidden;background:#071b1d;color:#f5ead1;}
#cinematic-observation[hidden] {display:none;}
.observation-main-layer,.observation-cloud-layer,.observation-foreground-layer {position:absolute;inset:0;pointer-events:none;}
#observation-main {display:block;width:100%;height:100%;object-fit:contain;transform:scale(1);opacity:0;transition:opacity .5s ease;}
.observation-ready #observation-main {opacity:1;}
.observation-ui-layer {position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;padding:2.5%;gap:12px;background:linear-gradient(0deg,#071b1d80,transparent 20%);}
#observation-status {margin:0;color:#f5ead1;font:clamp(13px,1.6vw,21px)/1.5 'Microsoft JhengHei',sans-serif;text-shadow:0 2px 5px #071b1d;}
#observation-back,#observation-record {pointer-events:auto;min-height:48px;padding:10px 22px;border:1px solid #c7ac72;outline:1px solid #c7ac7255;outline-offset:3px;background:#123333ed;color:#faf3e2;font:600 clamp(14px,1.5vw,20px)/1.5 'Microsoft JhengHei',sans-serif;cursor:pointer;}
.observation-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
#observation-record:disabled{opacity:.5;cursor:default;}
#observation-record[hidden],.memory-mode #observation-feedback{display:none;}
#observation-record:focus-visible{outline:2px solid #ead6a0;}
#observation-record:hover:not(:disabled){background:#214b45;}
#observation-feedback{position:absolute;left:50%;top:7%;transform:translateX(-50%);padding:9px 22px;background:#123333e8;border-block:1px solid #d7c59a;color:#faf3e2;font:600 clamp(14px,1.7vw,24px) 'Microsoft JhengHei',sans-serif;}
.observation-recorded::after{content:'';position:absolute;inset:2%;border:1px solid #fff2cf99;pointer-events:none;animation:observation-record 1s ease-out both;}
@keyframes observation-record{from{opacity:1;}to{opacity:0;}}
@media(max-width:700px){.observation-ui-layer{align-items:flex-end;padding:3%;}#observation-status{display:none;}#observation-back,#observation-record{padding:8px 12px;font-size:14px;}}
#observation-back:hover {background:#214b45;box-shadow:0 0 14px #c7ac7233;}
#observation-back:focus-visible {outline:2px solid #ead6a0;}
#observation-back:active {transform:translateY(1px);}
.observation-active :is(#joystick,.touch-action,.quest-hud,#momo-bubble,#lushan-book,#lushan-world,#lushan-scholar-label,#lushan-discovery,#interact-hint,#vista-debug,#walkable-debug-control,#walkable-debug-overlay,#tixilinbi-test-reset) {visibility:hidden;}
@media(prefers-reduced-motion:reduce) {.observation-ready #observation-main {animation:none;}#observation-main {transition:none;}}