/* YEOKJU 2026-10-30 / Mobile ACT scenes: art and story in ONE visual panel.
 * Addresses screenshot where image ends before ACT 01 and the rest of the
 * text falls on a separate dark block. Applies to all eleven shrines / 16 scenes.
 * Scoped and loaded after both previous mobile overrides. */
@media screen and (max-width:680px){
  #yeokjuTempleAtlas .s-chronicle .s-chron-track .s-chron-scene {
    position:relative!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    contain:none!important;
    overflow:visible!important;
    isolation:isolate!important;
    background:#081522!important;
  }
  #yeokjuTempleAtlas .s-chronicle .s-chron-track .s-chron-scene::before {
    display:none!important;
  }
  #yeokjuTempleAtlas .s-chronicle .s-chron-scene .s-chron-scene-sky {
    grid-row:1!important;
    grid-column:1!important;
    position:relative!important;
    inset:auto!important;
    z-index:0!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    pointer-events:none!important;
    isolation:isolate!important;
  }
  #yeokjuTempleAtlas .s-chron-scene .s-chron-scene-sky::before,
  #yeokjuTempleAtlas .s-chron-scene .s-chron-scene-sky::after{
    display:none!important;
  }
  /* The original CSS background enlarged and masked the artwork.
     Hide it on phones in favor of the new complete <img>. */
  #yeokjuTempleAtlas .s-chron-scene .s-chron-scene-art{
    display:none!important;
  }
  #yeokjuTempleAtlas .s-chron-scene .s-chron-scene-visual{
    display:block!important;
    position:relative!important;
    z-index:0!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:top center!important;
    opacity:1!important;
    transform:none!important;
    filter:brightness(.85) contrast(1.04)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  #yeokjuTempleAtlas .s-chron-scene .s-chron-scene-atmosphere{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(180deg,
      transparent 0%,transparent 25%,#06111a16 43%,
      #06111a65 73%,#06111a95 100%)!important;
  }
  #yeokjuTempleAtlas .s-chronicle .s-chron-track .s-chron-scene .s-chron-scene-content{
    grid-row:1!important;
    grid-column:1!important;
    position:relative!important;
    z-index:3!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-end!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:clamp(165px,55vw,300px) clamp(18px,5vw,28px) 34px!important;
    border:0!important;
    background:linear-gradient(180deg,
      transparent 0%,
      #0815220c 14%,#0815225c 33%,
      #081522bf 65%,#081522ed 87%,#081522 100%)!important;
    color:#fff6e5!important;
  }
  #yeokjuTempleAtlas .s-chron-track .s-chron-scene .s-chron-act--inline{
    display:block!important;
    min-height:0!important;
    padding:0!important;
    margin:0 0 17px!important;
    background:transparent!important;
    border:0!important;
  }
  #yeokjuTempleAtlas .s-chron-scene .s-chron-title,
  #yeokjuTempleAtlas .s-chron-scene .s-chron-narration,
  #yeokjuTempleAtlas .s-chron-scene .s-chron-utterance{
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
    text-shadow:0 2px 13px #000e!important;
  }
}
@media screen and (max-width:359px){
  #yeokjuTempleAtlas .s-chronicle .s-chron-track .s-chron-scene .s-chron-scene-content{
    padding:clamp(130px,48vw,225px) 16px 26px!important;
  }
}
@media print{
  #yeokjuTempleAtlas .s-chron-scene-visual{display:none!important}
}