/* ============================================================
   responsive.css - window-shape adjustments.
   Loaded last so it can override the module defaults.
   ============================================================ */

/* ---------- tall / portrait windows ---------- */
/* A taller window needs a proportionally WIDER character for the art to
   still reach the bottom edge. */
@media (orientation:portrait){
  :root{
    --ny-w: min(92vw, 80vh);
    --duo-left:2vw;
  }

  .duo-wrap{
    --py-w: calc(var(--ny-w) * 0.45);
    /* ぴよち is proportionally smaller here, so it has to sit lower on
       にゅるち to still reach the stage floor */
    --py-drop: 0.68;
  }

  .char-block.piyochi{
    left:calc(var(--ny-w) * 0.50);
  }

  /* A phone is narrower than the curtain art is wide at full height, so
     here it cannot both stay uncropped and leave a stage to look at.
     The box is capped and the art cover-fitted from its own left edge,
     which keeps the drape and the hem and trims the outer fringe. */
  .curtain{
    width:min(46vh, 24vw);
    object-fit:cover;
    object-position:left top;
  }
  .curtain.left{ left:-1%; }
  .curtain.right{ right:-1%; }
}

/* ---------- narrow windows ---------- */
/* Loaded after the portrait block on purpose: a phone matches both, and
   these rules have to win.

   The whole -30deg idea depends on having width for the diagonal to run
   across. At 375px it does not: the edge drops 216px over the width of
   the screen, so the scrim swallows the duo and every rotated block
   lands on top of the next one. So here the angle is eased to -10deg
   and the copy is laid flat in the bottom band instead. */
@media (max-width:820px){
  /* the pair is pulled in and lifted so it finishes above the band
     rather than being cut in half by it */
  :root{
    --duo-left:4vw;
    --ny-w: min(80vw, 62vh);
  }

  /* the px term does the work on short screens, where a purely
     proportional lift leaves ぴよち sitting in the copy */
  .duo-wrap{ --duo-shift:calc(-12vh - 44px); }

  .curtain{ width:min(46vh, 22vw); }

  /* a shallow angle drops only ~66px across the screen, which leaves a
     clean band under the pair instead of a wedge through it */
  .music-float{
    --sheen-angle:-10deg;
    --sheen-tan:0.1763;
    --sheen-top:56vh;
  }

  .music-sheen{
    /* in front of the duo here: the copy has to lie over the costume,
       so the scrim has to be behind its own text. It eases off a little
       as well, so the pair reads through it instead of going black. */
    z-index:18;
    background:linear-gradient(180deg,
      rgba(2,1,7,0) 0%, rgba(2,1,7,0.82) 0.6%, rgba(2,1,7,0.82) 100%);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 4%, rgba(0,0,0,0.7) 18%, #000 30%);
    mask-image:linear-gradient(90deg,
      transparent 4%, rgba(0,0,0,0.7) 18%, #000 30%);
  }

  /* ---- the copy ---- */
  /* It drops the rotation and the solved-from-the-diagonal top, and is
     hung off the bottom edge instead. */
  .stage-copy{
    left:5vw;
    right:5vw;
    top:auto;
    bottom:10.5vh;
    transform:none;
    white-space:normal;
  }

  /* Flush left reads better than a staircase once the block is flat.
     The lead needs the two-class selector to outweigh the per-line
     nth-child indents in copy.css. */
  .copy-romaji,
  .copy-type{ margin-left:0; }

  .copy-lead .lead-line{ margin-left:0; }

  .copy-romaji{ margin-bottom:0.2em; }
  .copy-type{ gap:1.4em; margin-top:0.3em; }
  .copy-lead{ margin-top:0.7em; line-height:1.45; }
  .lead-line{ margin-bottom:0.22em; }

  /* ---- the furniture ---- */
  .sns-dock .label{ display:none; }

  .music-control{
    width:clamp(150px,42vw,200px);
    right:4vw;
    bottom:2vh;
  }

  /* the meter gives way to the copy: fewer, smaller bars in the corner */
  .equalizer{
    left:2vw;
    bottom:2vh;
    height:clamp(38px, 7vh, 62px);
    gap:3px;
  }
  .equalizer i{ width:5px; }
  .equalizer i:nth-child(n+9){ display:none; }

  /* the pill sits on にゅるち's chest, clear of both ぴよち and the band */
  .click-hint{ top:-14vh; }
}

/* ---------- short screens (landscape phones) ---------- */
/* 375px of height is not enough for a band AND a stack under it: any
   angled scrim either buries the art or leaves the text sitting on the
   lit stage. So here the scrim is dropped, the pair keeps the left at
   full height, and the text becomes its own plate on the right. */
@media (max-width:820px) and (max-height:520px){
  :root{
    --ny-w: min(42vw, 70vh);
    --duo-left:2vw;
  }

  .duo-wrap{ --duo-shift:0vh; }

  .music-sheen{ display:none; }

  .stage-copy{
    left:auto;
    right:3vw;
    width:min(54vw, 420px);
    bottom:16vh;
    padding:0.7em 1em;
    background:linear-gradient(90deg,
      rgba(4,2,12,0.9) 0%, rgba(4,2,12,0.62) 100%);
    border-left:3px solid var(--gold);
  }

  .copy-romaji{ display:none; }

  .click-hint{ top:14vh; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .curtain,
  .character-img,
  .particle,
  .sparkle,
  .click-hint{
    animation:none !important;
  }
}