/* Robot Rescue. */
:root {
  --meter-size: clamp(72px, 8.5vw, 108px);
  --camera-small: clamp(130px, 15vw, 230px);
}

#sights {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hands-bar {
  left: 0;
  right: 0;
  transform: none;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
}

body[data-hands='right'] .hands-bar { justify-content: flex-end; }
body[data-hands='left'] .hands-bar { justify-content: flex-start; }
.meter-caption { font-size: clamp(11px, 1vw, 13px); }

/* The mirror goes up by the gear while playing, as the middle of the view is where the robots are. */
body[data-screen='playing'] .camera-frame,
body[data-screen='countdown'] .camera-frame {
  left: auto;
  right: 68px;
  transform: none;
}

/* Prompts go between the chips and the mirror, and don't cover either. */
body[data-screen='playing'] .prompt,
body[data-screen='playing']:has(.story.is-visible) .prompt {
  top: 12px;
  left: 50%;
  width: max-content;
  max-width: min(52vw, 700px);
  padding: 8px 22px 10px;
  font-size: clamp(16px, 2.2vw, 30px);
}

.chip-hearts .chip-value {
  display: flex;
  gap: 2px;
  height: 1.1em;
  align-items: center;
}

.heart {
  width: 1em;
  height: 1em;
  fill: #ff5a6e;
  stroke: var(--ink);
  stroke-width: 2.4;
  transition: transform 0.2s ease;
}

.heart.is-gone { fill: #d9e3ec; stroke: #93a3b3; transform: scale(0.82); }

/* A closed hand is doing something useful here, so the meter says so, rather than asking it to open. */
body[data-shield='up'] .meter-word { font-size: 0; }
body[data-shield='up'] .meter-word::after { content: 'Shield'; font-size: clamp(11px, 1vw, 13px); }

/* A little film: an open hand aims and fires at a robot, then a closed hand puts up the shield. */
.film-sky { fill: #cfeeff; }
.film-robot-body { fill: #3cc2b4; stroke: var(--ink); stroke-width: 3; }
.film-robot-face { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.film-robot-eye { fill: var(--ink); }
.film-crosshair circle { fill: none; stroke: #35e07a; stroke-width: 6; }
.film-crosshair path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.film-shots circle { fill: #ff7eb6; stroke: var(--ink); stroke-width: 1.5; }
.film-bits path, .film-bits circle { fill: #ffd23f; stroke: var(--ink); stroke-width: 2; }
.film-goo { fill: #8fe03a; stroke: #4c8f1c; stroke-width: 3; }
.film-shield-glass { fill: rgb(90 180 240 / 0.45); stroke: #3f8fe0; stroke-width: 8; }
.film-shield-star { fill: #ffd23f; stroke: var(--ink); stroke-width: 2; }
.film-hand rect { fill: #3ddc84; stroke: var(--ink); stroke-width: 3; }
.film-hand path { fill: none; stroke: #3ddc84; stroke-width: 10; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom center; }
.film-hand .film-thumb { transform-origin: bottom left; }

/* The picture is a mirror, so a right hand has its thumb on the left. */
.film-hand-shape { transform-box: fill-box; transform-origin: center; }
body[data-hands='right'] .film-hand-shape { transform: scaleX(-1); }

/* The film keeps out of the way of the meter, which is on the side of the hand in play. */
body[data-hands='left'] .film { left: auto; right: 16px; }

.film-hand { animation: film-hand 8s ease-in-out infinite; }
.film-hand rect { animation: film-palm 8s step-end infinite; }
.film-hand path { animation: film-fingers 8s ease-in-out infinite, film-finger-colour 8s step-end infinite; }
.film-crosshair { animation: film-crosshair 8s ease-in-out infinite; }
.film-crosshair circle { animation: film-crosshair-colour 8s step-end infinite; }
.film-crosshair path { animation: film-crosshair-marks 8s step-end infinite; }
.film-shots { animation: film-shots 8s linear infinite; }
.film-shots circle { animation: film-shot 0.45s linear infinite; }
.film-shots circle:nth-child(2) { animation-delay: -0.15s; }
.film-shots circle:nth-child(3) { animation-delay: -0.3s; }
.film-robot { animation: film-robot 8s linear infinite; }
.film-bits { animation: film-bits 8s ease-out infinite; }
.film-shield { animation: film-shield 8s ease-in-out infinite; }
.film-goo { animation: film-goo 8s ease-in infinite; }

/* Moves up and across with the crosshair, then waits below, closed, for the goo. */
@keyframes film-hand {
  0%, 6% { transform: translate(0, 0); }
  24%, 46% { transform: translate(44px, -22px); }
  54%, 100% { transform: translate(30px, 0); }
}

@keyframes film-crosshair {
  0%, 6% { transform: translate(-58px, 44px); }
  24%, 46% { transform: translate(0, 0); }
  54%, 100% { transform: translate(-10px, 30px); }
}

/* Green, orange while firing, and gone while the hand's closed, as the shield has taken over. */
@keyframes film-crosshair-colour {
  0%, 24% { stroke: #35e07a; opacity: 1; }
  24.01%, 44% { stroke: #ffb02e; opacity: 1; }
  44.01%, 50% { stroke: #35e07a; opacity: 1; }
  50.01%, 96% { stroke: #35e07a; opacity: 0; }
  96.01%, 100% { stroke: #35e07a; opacity: 1; }
}

@keyframes film-crosshair-marks {
  0%, 50% { opacity: 1; }
  50.01%, 96% { opacity: 0; }
  96.01%, 100% { opacity: 1; }
}

@keyframes film-shots {
  0%, 25% { opacity: 0; }
  25.01%, 40% { opacity: 1; }
  40.01%, 100% { opacity: 0; }
}

@keyframes film-shot {
  from { transform: translate(-74px, 118px) scale(1.2); }
  to { transform: translate(0, 0) scale(0.6); }
}

@keyframes film-robot {
  0%, 38% { opacity: 1; transform: translate(0, 0); }
  27%, 31%, 35% { transform: translate(-3px, 0) rotate(-3deg); }
  29%, 33%, 37% { transform: translate(3px, 0) rotate(3deg); }
  40%, 92% { opacity: 0; transform: translate(0, 0); }
  100% { opacity: 1; }
}

@keyframes film-bits {
  0%, 38% { opacity: 0; transform: translateY(0) scale(0.2); }
  39% { opacity: 1; transform: translateY(0) scale(0.6); }
  48% { opacity: 1; transform: translateY(18px) scale(1.2); }
  54%, 100% { opacity: 0; transform: translateY(40px) scale(1.2); }
}

/* Opening and closing, with the hand closed from a little past the half way mark. */
@keyframes film-fingers {
  0%, 48% { transform: scale(1); }
  54%, 94% { transform: scale(0.38); }
  100% { transform: scale(1); }
}

@keyframes film-finger-colour {
  0%, 50% { stroke: #3ddc84; }
  50.01%, 96% { stroke: #ffc21a; }
  96.01%, 100% { stroke: #3ddc84; }
}

@keyframes film-palm {
  0%, 50% { fill: #3ddc84; }
  50.01%, 96% { fill: #ffc21a; }
  96.01%, 100% { fill: #3ddc84; }
}

@keyframes film-shield {
  0%, 52% { opacity: 0; transform: translateY(70px); }
  58%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(70px); }
}

@keyframes film-goo {
  0%, 60% { opacity: 0; transform: translate(62px, -66px) scale(0.3); }
  61% { opacity: 1; transform: translate(62px, -66px) scale(0.3); }
  78% { opacity: 1; transform: translate(0, 0) scale(1); }
  88%, 100% { opacity: 0; transform: translate(0, 18px) scale(1.25, 0.7); }
}

/* On a narrow screen there isn't room for it all along the top. */
@media (max-width: 760px) {
  :root { --camera-small: 112px; }

  body[data-screen='playing'] .camera-frame,
  body[data-screen='countdown'] .camera-frame {
    top: 66px;
    right: 12px;
  }

  body[data-screen='playing'] .prompt,
  body[data-screen='playing']:has(.story.is-visible) .prompt {
    top: auto;
    bottom: calc(var(--meter-size) + 40px);
    max-width: calc(100vw - 24px);
  }

  .story { width: min(62vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .film-hand, .film-hand rect, .film-hand path, .film-crosshair, .film-crosshair circle, .film-shots, .film-robot, .film-bits, .film-shield, .film-goo { animation-duration: 12s; }
  .film-shots circle { animation-duration: 0.7s; }
}