/* =========================================================
   TEST COMPONENT
   Comes after the Prototype section. Inline SVG scene (assets/test/test.svg)
   with a hoverable cup that plays a straw sound. Behaviour: js/test/main.js
   ========================================================= */

.test-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;
  overflow-x: clip;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.test-wrap {
  position: relative;           /* the title image is positioned against this box */
  width: calc(min(100%, var(--scene-max-width)) * var(--test-scale)); /* same visible width as empathize */
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#test-scene {
  width: 100%;
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#test-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

.test-status {
  text-align: center;
  padding: 2rem;
  color: #444;
}
.test-status.error { color: #b00020; }

/* ---------- Handwritten "Test" title (an <img>, outside the scene box so the script can't wipe it) ----------
   Position / size are % of the 1280 x 1000 scene: empty top-left corner. Same visible height as the
   Empathize title (45.5 tall, see define.css); the values already allow for this scene's drawing scale. */
.test-title {
  position: absolute;
  left: 150px; top: 150px;
  rotate: -25deg;
  width: 7.33%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}