/* 山居图鉴. Load after the application stylesheet. No remote fonts or assets. */
.xiuxian-capy { display:block; width: min(100%, 260px); height:auto; overflow:visible; filter:none; flex:none; }
.xiuxian-scene { position:absolute; inset:0; isolation:isolate; overflow:hidden; background:#edf0de; color:#4e6652; }
.xiuxian-landscape { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.xiuxian-scene-caption { position:absolute; z-index:2; left:32px; top:26px; display:flex; align-items:center; gap:9px; color:#586d4e; user-select:none; pointer-events:none; }
.xiuxian-scene-caption span { font-size:11px; letter-spacing:3px; font-weight:600; }
.xiuxian-scene-caption i { display:block; width:20px; height:1px; background:#a6af8e; }
.xiuxian-scene-caption small { font-size:10px; letter-spacing:1px; color:#687759; }
.xiuxian-companion { position:absolute; z-index:3; left:49%; bottom:4%; width:clamp(200px, 43%, 285px); transform:translateX(-50%); }
.xiuxian-companion .xiuxian-pat { display:block; padding:0; width:100%; border:0; background:none; box-shadow:none; border-radius:44%; line-height:0; -webkit-tap-highlight-color:transparent; }
.xiuxian-companion .xiuxian-pat .xiuxian-capy { width:100%; max-width:none; filter:none; transform:none; }
.xiuxian-pat:hover { filter:none; }
.xiuxian-pat:hover .xiuxian-character { transform:translateY(-3px); }
.xiuxian-pat:focus-visible { outline:2px solid #fff7dc; outline-offset:2px; box-shadow:0 0 0 5px #344f45; background:#ffffff10; }
.xiuxian-character { transform-origin:50% 91%; transition:transform .35s ease; }
.xiuxian-pat .xiuxian-character { animation:xiuxian-breathe 6s ease-in-out infinite; }
.xiuxian-pat.patted .xiuxian-character { animation:xiuxian-pat .52s ease-in-out 2; }
.xiuxian-pat.patted .xiuxian-capy { transform:none; }
.xiuxian-scene .xiuxian-speech { position:absolute; left:35%; right:auto; top:33%; bottom:auto; z-index:4; width:max-content; max-width:190px; padding:9px 13px; border:1px solid #b8b99380; border-radius:12px 12px 12px 3px; background:#fffbedeb; box-shadow:0 4px 12px #5c6b4e08; font-family:inherit; font-size:11px; font-weight:500; line-height:1.5; color:#586447; pointer-events:none; animation:none; }
.xiuxian-speech::after { content:''; position:absolute; width:6px; height:6px; left:17px; bottom:-4px; background:#fffbed; border-bottom:1px solid #b8b99380; border-right:1px solid #b8b99380; transform:rotate(45deg); }
.xiuxian-clouds { animation:xiuxian-cloud-drift 24s ease-in-out infinite alternate; }
.xiuxian-mist { animation:xiuxian-mist-drift 20s ease-in-out infinite alternate; }
.xiuxian-fireflies { animation:xiuxian-light 5s ease-in-out infinite; }
.xiuxian-meditation { transform-origin:50% 50%; animation:xiuxian-light 5s ease-in-out infinite; }
.xiuxian-empty-art { display:block; width:136px; height:auto; max-width:100%; margin:0 auto 6px; }
.auth-card > .xiuxian-capy, .timer-screen > .xiuxian-capy { margin-inline:auto; }
@keyframes xiuxian-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes xiuxian-pat { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-5px) rotate(-2deg); } 70% { transform:translateY(-2px) rotate(2deg); } }
@keyframes xiuxian-cloud-drift { from { transform:translateX(-7px); } to { transform:translateX(8px); } }
@keyframes xiuxian-mist-drift { from { transform:translateX(-8px); opacity:.36; } to { transform:translateX(9px); opacity:.52; } }
@keyframes xiuxian-light { 0%,100% { opacity:.56; } 50% { opacity:1; } }
@media (max-width:760px) {
  .xiuxian-landscape { width:100%; height:100%; }
  .xiuxian-scene-caption { left:19px; top:18px; gap:7px; }
  .xiuxian-scene-caption small { display:none; }
  .xiuxian-scene-caption span { font-size:10px; letter-spacing:2px; }
  .xiuxian-companion { left:48%; bottom:1%; width:185px; }
  .xiuxian-scene .xiuxian-speech { top:15%; left:34%; font-size:10px; max-width:165px; padding:8px 10px; }
  .xiuxian-empty-art { width:118px; }
}
@media (prefers-reduced-motion:reduce) {
  .xiuxian-scene *, .xiuxian-capy, .xiuxian-capy * { animation:none !important; transition:none !important; }
}
/* Prevent the previous CSS-only landscape pseudo-elements from overlaying the art. */
.world-cave-stage:has(> .xiuxian-scene)::before,
.world-cave-stage:has(> .xiuxian-scene)::after { content:none; display:none; }
/* The scene chooses its composition from its own width, not the whole viewport.
   Panorama spreads only the land relief: sun, trees and pavilion keep proportions. */
.xiuxian-scene { container-type:inline-size; container-name:xiuxian-retreat; }
.xiuxian-landscape-panorama { display:none; }
@container xiuxian-retreat (min-width:680px) {
  .xiuxian-landscape-portrait { display:none; }
  .xiuxian-landscape-panorama { display:block; }
  .xiuxian-companion { left:61%; bottom:3%; width:24cqw; min-width:220px; max-width:254px; }
  .xiuxian-scene-caption { left:30px; top:24px; }
  .xiuxian-scene .xiuxian-speech { position:absolute; left:62%; top:29%; max-width:195px; font-size:11px; }
}

/* Picturebook study v2. Geometry and all app hooks intentionally unchanged.
   Grain is a sparse, static vector pattern inside the artwork, not a filter. */
.xiuxian-scene-night { background:#536e77; }
.xiuxian-scene-night .xiuxian-scene-caption { color:#f4ecd4; }
.xiuxian-scene-night .xiuxian-scene-caption small { color:#e6e8d2; }
.xiuxian-scene-night .xiuxian-scene-caption i { background:#c4d0b4; }
/* Keep the speech bubble bright, calm and readable in every scene. */
.xiuxian-scene-night .xiuxian-speech { color:#455840; background:#fffbedf5; border-color:#d5d6b7; }

/* Home retreat: separate scene width, compact character size and information space. */
.retreat-hero .xiuxian-companion {
  left:48%; bottom:1%; width:185px; min-width:0; max-width:none;
}
.retreat-hero .xiuxian-scene .xiuxian-speech {
  left:34%; top:13%; font-size:10px; max-width:165px;
  padding:8px 10px;
}
.retreat-hero .xiuxian-scene-caption { left:19px; top:18px; gap:7px; }
.retreat-hero .xiuxian-scene-caption span { font-size:10px; letter-spacing:2px; }
.retreat-hero .xiuxian-scene-caption small { display:none; }
@container home-retreat (min-width:480px) {
  .retreat-hero .xiuxian-landscape-portrait { display:none; }
  .retreat-hero .xiuxian-landscape-panorama { display:block; }
}
@media (width > 760px) {
  @container home-retreat (min-width:680px) {
    .retreat-hero .xiuxian-companion {
      left:61%; bottom:3%; width:24cqw; min-width:220px; max-width:254px;
    }
    .retreat-hero .xiuxian-scene .xiuxian-speech {
      left:62%; top:20%; font-size:11px; max-width:195px;
      padding:9px 13px;
    }
    .retreat-hero .xiuxian-scene-caption { left:30px; top:24px; gap:9px; }
    .retreat-hero .xiuxian-scene-caption span { font-size:11px; letter-spacing:3px; }
    .retreat-hero .xiuxian-scene-caption small { display:block; }
  }
}