/* Full viewport layers; only the specimen's transform changes during animation. */
.observe-layer {
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  min-width:0;min-height:0;overflow:hidden;color:#344a3c;
  background:linear-gradient(160deg,#f3f6df,#d7e7bc);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
    env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  overscroll-behavior:contain;touch-action:manipulation;
}
.observe-layer[hidden]{display:none!important}
.observe-header{flex-shrink:0;min-height:106px;padding:24px 96px 12px 28px}
.observe-header h2{font-size:clamp(26px,4vw,38px);line-height:1.4;overflow-wrap:anywhere}
.observe-zhu{font-size:clamp(18px,2.7vw,27px);line-height:1.6;overflow-wrap:anywhere}
.observe-close{
  position:absolute;right:calc(16px + env(safe-area-inset-right,0px));
  top:calc(16px + env(safe-area-inset-top,0px));width:64px;height:64px;
  min-width:56px;min-height:56px;border-radius:50%;font-size:36px;line-height:1;
  color:#344a3c;background:#fffdf5;border:2px solid #81956c;z-index:2;
  box-shadow:0 4px 0 #344a3c15;touch-action:manipulation;
}
.observe-close:active{transform:scale(.96)}
.observe-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
.observe-stage::before{
  content:"";position:absolute;inset:64% 0 0;pointer-events:none;
  background:linear-gradient(180deg,#ffffff18,#344a3c12);border-radius:50% 50% 0 0;
}
.observe-actor{
  position:absolute;left:0;top:0;width:clamp(132px,28vmin,260px);
  height:clamp(132px,28vmin,260px);max-width:45%;max-height:60%;
  background:transparent;padding:0;transform-origin:center;will-change:transform;
  touch-action:none;cursor:pointer;border-radius:24px;
}
.observe-actor .portrait{width:100%;height:100%}
.observe-actor .portrait img{width:100%;height:100%;object-fit:contain}
.observe-actor .emoji-art{font-size:clamp(88px,20vmin,190px)}
.observe-hint{flex-shrink:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;text-align:center;padding:12px 20px 20px;font-size:17px;line-height:1.5}
#observeRewrite{min-height:56px}
.observe-layer[data-scene="park"],.observe-layer[data-scene="dino"]{background:linear-gradient(160deg,#eef4da,#c8ddac)}
.observe-layer[data-scene="garden"]{background:linear-gradient(155deg,#fff0e5,#e7edc9)}
.observe-layer[data-scene="pond"]{background:linear-gradient(160deg,#e4f4f2,#abd4cf)}
.observe-layer[data-scene="farm"]{background:linear-gradient(160deg,#faf2d5,#d6e5b7)}
.observe-layer[data-scene="orchard"]{background:linear-gradient(155deg,#fff0d7,#d3e6bd)}
.observe-layer[data-scene="grassland"]{background:linear-gradient(160deg,#f9eecb,#dacc9d)}
.observe-layer[data-scene="river"]{background:linear-gradient(160deg,#e2f4f8,#b5d9d3)}
.observe-layer[data-scene="ocean"]{background:linear-gradient(170deg,#d5f0f6,#78bdd1 65%,#548fae)}
.observe-layer[data-scene="jungle"]{background:linear-gradient(160deg,#e3edce,#a8c8a2)}
.observe-layer[data-scene="desert"]{background:linear-gradient(160deg,#fff0d4,#e2c692)}
.observe-layer[data-scene="polar"]{background:linear-gradient(160deg,#f1faff,#c5e0e9)}
.observe-layer[data-scene="night_forest"]{background:linear-gradient(155deg,#e0e4f4,#a0b5bd 70%,#8fa9a2)}
.observe-book{z-index:50;background:linear-gradient(150deg,#fffaf0,#e6edd5)}
.observe-book-grid{
  flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  align-content:start;padding:8px 28px 28px;
}
.observe-book-card{
  min-width:0;min-height:180px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;border-radius:22px;background:#fffdf4;
  border:1px solid #cddbbd;padding:12px;touch-action:pan-y;
}
.observe-book-card .portrait{width:100%;height:108px}
.observe-book-card .emoji-art{font-size:76px}
.observe-book-card strong{font-size:20px}
.observe-book-card small{font-size:15px;line-height:1.5;color:#617652}
.observe-book-card strong,.observe-book-card small{max-width:100%;text-align:center;overflow-wrap:anywhere}
.observe-empty{grid-column:1/-1;text-align:center;padding:40px 12px;line-height:1.8}
#observeBookEntry{min-height:56px}
@media(max-width:800px){.observe-book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){
  .observe-header{padding-left:18px}.observe-book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 16px 20px}
  #sceneSelect>.page-heading{flex-wrap:wrap}.observe-book-card{padding:8px}.observe-book-card .portrait{height:88px}
}
@media(prefers-reduced-motion:reduce){.observe-close:active{transform:none}}