/* =========================================================
   STAGES ON PHONES: ONE BIG OVERLAPPING PILE PER STAGE
   Empathize, Define, Ideate, Prototype and Test are wide (landscape) artworks with the
   pieces spread out. On a phone held upright they would be tiny, so here:
   - Empathize, Define, Ideate, Prototype: all the pieces of a stage are gathered into ONE
     overlapping pile, upright (nothing is turned), as wide as the screen. Where each piece
     goes and how big it is lives in js/stages-mobile/main.js (the LAYOUT tables).
   - Test: its six pieces are separate pictures (assets/test/pieces/), piled up the same way.
     No script needed: each piece's spot and size is a few numbers in the "Test" part at the
     bottom of this file.
   Desktop / tablet / landscape are not touched (the whole file is inside the media query).
   Loaded after the five stage stylesheets so it can override them.

   The pile box is always 1000 units wide. Its height (--box-h) is set once per stage below;
   js/stages-mobile/main.js reads it, so this is the only place to change a box height.
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait) {

  /* a thinner frame so the artwork can be as wide as possible */
  .empathize-section,
  .define-section,
  .ideation-section,
  .prototype-section,
  .test-section {
    padding: 8px;
  }

  /* ---- height of each pile box (width is always 1000) ---- */
  .empathize-wrap { --box-h: 1500; }
  .define-fit     { --box-h: 1400; }
  .ideation-wrap  { --box-h: 1600; }
  .prototype-wrap { --box-h: 1450; }
  .test-wrap      { --box-h: 1550; }

  /* ---- Empathize, Ideate, Prototype: a plain portrait box, as wide as the section ---- */
  .empathize-wrap,
  .ideation-wrap,
  .prototype-wrap,
  .test-wrap {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 1000 / var(--box-h);
  }
  #ideation-scene,
  #prototype-scene {
    aspect-ratio: 1000 / var(--box-h);
  }
  /* pieces / shadows may reach the edge of the box without being cut */
  #ideation-scene svg,
  #prototype-scene svg {
    overflow: visible;
  }

  /* ---- Define: a 1000 x --box-h artboard (js/define/main.js scales it to the screen width) ---- */
  .define-fit {
    width: calc(1000px * var(--define-fit, 1));
    height: calc(var(--box-h) * 1px * var(--define-fit, 1));
  }
  .define-stage {
    width: 1000px;
    height: calc(var(--box-h) * 1px);
    overflow: visible;       /* pieces may reach the edge of the artboard without being cut */
  }

  /* Define: only the knight and the target react to touch (sound / spin); the rest is click-through */
  .define-notepaper,
  .define-compass,
  .define-card,
  .define-title {
    pointer-events: none;
  }

  /* ---- Handwritten titles (images outside the scenes) ----
     left / top / width are % of the pile box, so they follow the pile on every phone. */
  .ideation-title  { left: 4%;  top: 1%;   width: 17%; }
  .prototype-title { left: 5%;  top: 1.5%; width: 22%; }

  /* ---- Test: six separate pictures piled up (index.html: .test-pile) ----
     The flattened scene is switched off on a phone and the pile is switched on.
     Each piece has four numbers (the rows below):
       --w   width of the piece on desktop, in pile units. Leave as is.
       --cx  centre x in the pile, 0..1000 (left..right)
       --cy  centre y in the pile, 0..--box-h (top..bottom)
       --s   scale, 1 = desktop size
     The stacking order is the order of the pictures in index.html (last = on top). */
  #test-scene { display: none; }

  .test-pile {
    display: block;
    position: absolute;       /* fills .test-wrap, which is the 1000 x --box-h box */
    inset: 0;
  }

  .test-piece {
    position: absolute;
    left: calc(var(--cx) * 0.1%);
    top: calc(var(--cy) / var(--box-h) * 100%);
    width: calc(var(--w) * var(--s) * 0.1%);
    height: auto;
    translate: -50% -50%;     /* --cx / --cy are the CENTRE of the piece */
    pointer-events: none;     /* decoration is click-through, only the cup reacts (below) */
    -webkit-user-select: none;
    user-select: none;
  }

  .test-piece--notes     { --w: 737.2; --cx: 630; --cy: 930;  --s: 1;    }  /* grey film-strip note "Game of perspective" */
  .test-piece--checklist { --w: 503.7; --cx: 370; --cy: 380;  --s: 1.15; }  /* checklist */
  .test-piece--puzzle    { --w: 416.6; --cx: 730; --cy: 1320; --s: 1.15; }  /* crumpled paper with the puzzle pieces */
  .test-piece--coffee    { --w: 409.6; --cx: 790; --cy: 480;  --s: 1.15; }  /* the cup (tap = straw sound, js/test/main.js) */
  .test-piece--glass     { --w: 506.7; --cx: 290; --cy: 1150; --s: 1.15; }  /* cardboard magnifying glass */
  .test-piece--chat      { --w: 508.2; --cx: 300; --cy: 700;  --s: 1.15; }  /* chat bubble "Watch what they do..." */

  .test-piece--coffee {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* the handwritten "Test" title: same spot and same size as before (top right), now upright.
     left / top / width are % of the pile box. Its own tilt (-25deg, css/test.css) is kept. */
  .test-title {
    left: 83.5%;
    top: 8.7%;
    width: 12.3%;
  }
}