/* mirror.css: Play-IT 01, "Kladda ner badrumsspegeln" (Nora, 12 Nov).
   Same rules as the Play-IT page: black, dot grid, everything on the grid. Desktop positions are Play-IT
   frame px (1440 wide, dots every 60 px) × --u, which mirror.js sets (the same scale as Play-IT, so the
   whole mirror fits on the first screen). Left edge 120, right edge 1320, rows on multiples of 60. */
.mr { position: relative; width: calc(var(--u, 1px) * 1440); height: calc(var(--u, 1px) * 1380);
  margin-left: var(--ox, 0px); color: var(--white); }
.mr > * { position: absolute; left: calc(var(--u) * 120); margin: 0; }

.mr-kicker { top: calc(var(--u) * 110); font: 700 calc(var(--u) * 12)/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; }
.mr-back { color: var(--white); text-decoration: none; }
.mr-back:hover, .mr-back:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.mr-title { top: calc(var(--u) * 171); font: 700 calc(var(--u) * 86)/1 var(--font-heading); white-space: nowrap; }   /* capitals between rows 180 and 240 */
.mr-lead { top: calc(var(--u) * 283); font: 400 calc(var(--u) * 21)/1 var(--font-body); }                              /* baseline on row 300 */

.mr-stage { top: calc(var(--u) * 360); width: calc(var(--u) * 1200); height: calc(var(--u) * 540);                      /* rows 360–900 */
  border: 1px solid var(--white); box-sizing: border-box; background: #000; overflow: hidden; }
.mr-stage video { display: none; }
.mr-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.mr-stage.is-mouse canvas { cursor: crosshair; }
.mr-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center; background: rgba(0, 0, 0, .55); }
.mr-consent[hidden] { display: none; }
.mr-privacy { max-width: 520px; margin: 0 0 8px; font: 400 18px/1.5 var(--font-body); }
/* status line: under the camera box (not on the picture), white, on its own dot row (960) */
.mr-status { top: calc(var(--u) * 960 - max(6px, calc(var(--u) * 7.5))); width: calc(var(--u) * 1200); text-align: center; pointer-events: none;
  font: 600 max(12px, calc(var(--u) * 15))/1 var(--font-body); color: var(--white); }

.mr-btn { min-height: max(32px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 22); border: 1px solid var(--white); border-radius: 999px; background: transparent;
  color: var(--white); font: 700 max(12px, calc(var(--u) * 15))/1 var(--font-heading); cursor: pointer; }
.mr-btn:hover, .mr-btn:focus-visible { background: var(--white); color: var(--black); }
.mr-btn-main { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.mr-btn-main:hover, .mr-btn-main:focus-visible { background: var(--white); border-color: var(--white); }
.mr-btn-link { border: 0; min-height: 0; padding: 4px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mr-btn-link:hover, .mr-btn-link:focus-visible { background: transparent; color: var(--yellow); }

.mr-controls { top: calc(var(--u) * 1020 - max(16px, calc(var(--u) * 22))); display: flex; gap: 12px; }                                             /* centred on row 960 */
.mr-how { top: calc(var(--u) * 1140); width: calc(var(--u) * 1200); list-style: none; padding: 0;                        /* line on row 1080 */
  display: grid; grid-template-columns: repeat(3, calc(var(--u) * 360)); column-gap: calc(var(--u) * 60);
  border-top: 1px solid var(--white); padding-top: calc(var(--u) * 24); }
.mr-how li { font: 400 max(12px, calc(var(--u) * 16))/1.5 var(--font-body); }
.mr-how strong { display: block; margin-bottom: 6px; font: 700 max(13px, calc(var(--u) * 18))/1.2 var(--font-heading); }
.mr-credit { top: calc(var(--u) * 1307); font: 400 13px/1 var(--font-body); color: rgba(255, 255, 255, .6); }        /* baseline on row 1260 */

@media (max-width: 760px) {
  /* mobile: ordinary flow on the 20 px grid */
  .mr-status { width: auto; margin: 12px 0 0; font-size: 13px; }
  .mr-btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
  .mr-how li { font-size: 15px; } .mr-how strong { font-size: 17px; }
  .mr { width: auto; height: auto; margin: 0; padding: calc(64px + 20px) 20px 60px; }
  .mr > * { position: static; }
  .mr-kicker { margin-bottom: 20px; font-size: 11px; }
  .mr-title { white-space: normal; font-size: 40px; line-height: 1; margin-bottom: 20px; }
  .mr-lead { font-size: 17px; line-height: 1.4; margin-bottom: 20px; }
  .mr-stage { width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .mr-privacy { font-size: 15px; }
  .mr-controls { margin: 20px 0 40px; flex-wrap: wrap; }
  .mr-how { width: auto; grid-template-columns: 1fr; row-gap: 20px; padding-top: 20px; }
  .mr-credit { margin-top: 40px; }
}