/* The free match scorer (qs-kit.js, qs-score.js, qs-watch.js): phones only. Score on your phone is one phone, centred;
   Let others watch is two phones side by side (the scoring phone and a friend's). Each phone is one plain rounded frame,
   as Live Scoring's (cp.css), its page laid out at 390 px (the scorer's own phone layout). */
.qs-phone { position: absolute; border-radius: 30px; background: #1b1a17;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 22px 50px -18px rgba(27, 26, 23, .45); }
.qs-view { position: absolute; left: 7px; top: 7px; right: 7px; bottom: 7px; overflow: hidden; border-radius: 24px; background: #faf9f3; }
.qs-page { position: absolute; inset: 0; overflow: hidden; background: #faf9f3; }
.qs-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #faf9f3; }
.qs-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.qs-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.qs-loading .qs-page { visibility: hidden; }   /* an empty phone while a page loads: never a page loading on camera */
.qs-label { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font: 600 9px/1 Geist, Arial, sans-serif;
  color: #6e6a60; letter-spacing: .02em; white-space: nowrap; }

/* Score on your phone: one phone, centred. */
.qs-L-one .qs-dev-a { left: 332px; top: 12px; width: 236px; height: 498px; }
[data-mode="narrow"].qs-L-one .qs-dev-a { left: 40px; top: 8px; width: 260px; height: 548px; border-radius: 32px; }
[data-mode="narrow"].qs-L-one .qs-label { display: none; }

/* Let others watch: the two phones side by side. */
.qs-L-pair .qs-dev-a { left: 190px; top: 12px; width: 236px; height: 498px; }
.qs-L-pair .qs-dev-b { left: 474px; top: 12px; width: 236px; height: 498px; }
[data-mode="narrow"].qs-L-pair .qs-phone { top: 8px; width: 158px; height: 398px; border-radius: 22px; }
[data-mode="narrow"].qs-L-pair .qs-view { left: 5px; top: 5px; right: 5px; bottom: 5px; border-radius: 17px; }
[data-mode="narrow"].qs-L-pair .qs-dev-a { left: 8px; }
[data-mode="narrow"].qs-L-pair .qs-dev-b { left: 174px; }
[data-mode="narrow"].qs-L-pair .qs-label { bottom: -16px; font-size: 10px; }

/* A finger, not a mouse (Adam, 28 October 2026: "it's a phone"): the kit's pointer drawn as a soft round dot about a
   fingertip's size on these phones, a little smaller when pressed, and each tap a soft ripple. The kit still places it
   (its transform) and marks it is-on and is-down; only these scenes' canvases (qs-L-*) are dressed so. */
.qs-L-one .cd-pointer, .qs-L-pair .cd-pointer { left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(27, 26, 23, .26); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 3px 8px rgba(27, 26, 23, .22);
  filter: none; transition: opacity .3s, width .12s ease, height .12s ease, left .12s ease, top .12s ease, background-color .12s ease; }
.qs-L-one .cd-pointer path, .qs-L-pair .cd-pointer path { display: none; }
/* pressed: a little smaller about its centre (not `scale`, which would scale the kit's translate too) */
.qs-L-one .cd-pointer.is-down, .qs-L-pair .cd-pointer.is-down { left: -10px; top: -10px; width: 20px; height: 20px; background: rgba(27, 26, 23, .4); }
[data-mode="narrow"].qs-L-pair .cd-pointer { left: -9px; top: -9px; width: 18px; height: 18px; }
[data-mode="narrow"].qs-L-pair .cd-pointer.is-down { left: -7.5px; top: -7.5px; width: 15px; height: 15px; }
.qs-L-one .cd-ring, .qs-L-pair .cd-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 0; background: rgba(27, 26, 23, .2); }

@media (prefers-reduced-motion: reduce) {
  .qs-later, .qs-later.is-on { transition: none; }
  .qs-L-one .cd-pointer, .qs-L-pair .cd-pointer { transition: opacity .3s; }
}