/* Recompose the existing landscape artwork for phones. The quiet centre stays
   beneath play; only masked corner crops are added. No layout or hit areas move. */
@media (max-width:600px) and (orientation:portrait) {
  :root:not([data-theme="plain"]) {
    /* Landscape source is 3:2. Cap each copy at half the viewport height so
       the upper and lower crops cannot cover one another in a wide portrait. */
    --portrait-art-size:min(150vw, 75svh) auto;
    --portrait-art-position:left top, right bottom;
    --portrait-art-opacity:.9;
    --portrait-corner-width:clamp(90px, 26vw, 148px);
    --portrait-corner-height:clamp(116px, 22svh, 190px);
    --portrait-corners:
      radial-gradient(ellipse var(--portrait-corner-width) var(--portrait-corner-height) at left top, #000 12%, transparent 85%),
      radial-gradient(ellipse var(--portrait-corner-width) var(--portrait-corner-height) at right bottom, #000 12%, transparent 85%);
  }

  /* Bring the original lower-left clay collage into the lower-right frame. */
  :root[data-theme="paper"] {
    --portrait-art-position:left top, left calc(100vw - var(--portrait-corner-width)) bottom 0px;
  }

  /* A softly lit material can reach further into the corners. */
  :root[data-theme="glass"] {
    --portrait-corner-width:clamp(120px, 36vw, 200px);
    --portrait-corner-height:clamp(150px, 28svh, 235px);
    --portrait-art-opacity:1;
  }

  /* Keep upright leaves and a little moss, away from the playable dot field. */
  :root[data-theme="spores"] {
    --portrait-art-position:right top, right bottom;
    --portrait-art-opacity:.75;
    --portrait-corner-width:clamp(90px, 27vw, 150px);
    --portrait-corners:
      radial-gradient(ellipse var(--portrait-corner-width) 120px at right top, #000 12%, transparent 85%),
      radial-gradient(ellipse var(--portrait-corner-width) 140px at right bottom, #000 12%, transparent 85%);
  }

  @supports (mask-image:linear-gradient(#000, transparent)) or (-webkit-mask-image:linear-gradient(#000, transparent)) {
    :root:not([data-theme="plain"]) body {isolation:isolate;}
    :root:not([data-theme="plain"]) body::after,
    :root:not([data-theme="plain"]) .title-screen::after {
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      background-image:var(--room-image), var(--room-image);
      background-size:var(--portrait-art-size);
      background-position:var(--portrait-art-position);
      background-repeat:no-repeat;
      -webkit-mask-image:var(--portrait-corners);
      mask-image:var(--portrait-corners);
      opacity:var(--portrait-art-opacity);
      pointer-events:none;
    }
    :root:not([data-theme="plain"]) .title-screen::after {position:absolute;z-index:0;}
    :root:not([data-theme="plain"]) .title-start {z-index:1;}
  }
}