/* Pickle Kids, on top of the arena and Soccer Kids styles: the serving dot on the scoreboard, the
   swing legend along the bottom, and the two-kid team picker. */

/* ---- Scoreboard: a ball beside the team that's serving ---------------------------------- */
.serve-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #e9f04c;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.serve-dot.on {
  opacity: 1;
  transform: scale(1);
}
.pickle .clock {
  min-width: 7.5em;
  text-align: center;
}

/* ---- The swing legend -------------------------------------------------------------------- */
.legend {
  position: absolute;
  left: 50%;
  bottom: calc(12px + var(--safe-b));
  z-index: 4;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: legend-in 300ms ease both;
}
.legend[hidden] {
  display: none;
}
@keyframes legend-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.92);
  box-shadow: 2px 2px 0 var(--ink);
  font: 600 13px/1.2 var(--mono);
  white-space: nowrap;
}
.legend b {
  font: 800 15px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Little gesture glyphs: a dot for a tap, an arrow for each swipe. */
.legend .g {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.legend .g::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: #e9f04c;
}
.legend .tap::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.legend .side::after,
.legend .up::after,
.legend .down::after {
  width: 0;
  height: 0;
  background: none;
  border: 5px solid transparent;
}
.legend .side::after {
  border-left: 8px solid #e9f04c;
  border-right: 0;
  margin-left: 7px;
}
.legend .up::after {
  border-bottom: 8px solid #e9f04c;
  border-top: 0;
  margin-top: 5px;
}
.legend .down::after {
  border-top: 8px solid #e9f04c;
  border-bottom: 0;
  margin-top: 7px;
}
/* With a keyboard the legend names keys instead. */
.legend[data-input='keys'] span:nth-child(1) b::before { content: '← '; }
.legend[data-input='keys'] span:nth-child(2) b::before { content: '→ '; }
.legend[data-input='keys'] span:nth-child(3) b::before { content: '↑ '; }
.legend[data-input='keys'] span:nth-child(4) b::before { content: '↓ '; }
.legend[data-input='keys'] .g {
  display: none;
}
.legend[data-input='keys'] span:nth-child(1) b,
.legend[data-input='keys'] span:nth-child(2) b,
.legend[data-input='keys'] span:nth-child(3) b,
.legend[data-input='keys'] span:nth-child(4) b {
  font-size: 0;
}
.legend[data-input='keys'] b::before {
  font-size: 15px;
}

@media (max-width: 560px) {
  .legend {
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px;
  }
  .legend span {
    padding: 3px 7px 3px 4px;
    font-size: 11px;
  }
  .legend b {
    font-size: 13px;
  }
  .legend .g {
    width: 16px;
    height: 16px;
  }
}

/* ---- Two kids a team on the picker ------------------------------------------------------- */
.pickle .kids-row canvas {
  width: 58px;
  height: 58px;
}
@media (max-height: 560px) and (orientation: landscape) {
  .pickle .kids-row canvas {
    width: 42px;
    height: 42px;
  }
}
.pickle .opts .seg[data-key='camera'] {
  grid-column: 1 / -1;
}

@media (max-height: 500px) and (orientation: landscape) {
  /* A phone on its side: a slimmer legend, so the court gets the height. */
  .legend {
    gap: 4px;
    bottom: calc(6px + var(--safe-b));
  }
  .legend span {
    padding: 2px 8px 2px 3px;
    font-size: 11px;
    box-shadow: 1.5px 1.5px 0 var(--ink);
  }
  .legend b {
    font-size: 13px;
  }
  .legend .g {
    width: 15px;
    height: 15px;
  }
}

/* ---- Touch: HIT where the right thumb rests, DINK to its left, LOB above it --------------- */
/* A moment after a game starts the buttons fade to see-through, so the court shows through them;
   a pressed button comes back solid, so HIT's power ring stays easy to read. */
.pickle .touch .act {
  animation: see-through 700ms ease 1.4s both;
  transition: opacity 120ms ease;
}
.pickle .touch .act.down {
  animation: none;
  opacity: 0.92;
}
@keyframes see-through {
  from { opacity: 1; }
  to { opacity: 0.42; }
}
.pickle .act.hit {
  right: calc(22px + var(--safe-r));
  bottom: calc(24px + var(--safe-b));
  width: 96px;
  height: 96px;
  font-size: 20px;
  background: conic-gradient(var(--yellow) calc(var(--charge) * 360deg), var(--red) 0);
}
.pickle .act.hit span {
  width: 72px;
  height: 72px;
  background: var(--red);
}
.pickle .act.dink,
.pickle .act.lob {
  width: 70px;
  height: 70px;
  font-size: 16px;
}
.pickle .act.dink span,
.pickle .act.lob span {
  width: 52px;
  height: 52px;
}
.pickle .act.dink {
  right: calc(130px + var(--safe-r));
  bottom: calc(20px + var(--safe-b));
  background: #2f9e58;
}
.pickle .act.dink span {
  background: #2f9e58;
}
.pickle .act.lob {
  right: calc(32px + var(--safe-r));
  bottom: calc(132px + var(--safe-b));
  background: #7a4fc4;
}
.pickle .act.lob span {
  background: #7a4fc4;
}
/* Simple: one HIT button. Auto run: HIT and DINK (swipes do the rest). */
.touch[data-controls='simple'] .act.dink,
.touch[data-controls='simple'] .act.lob,
.touch[data-controls='auto'] .act.lob,
.touch[data-controls='auto'] .stick,
.touch[data-controls='auto'] .stick-hint {
  display: none;
}
.pickle .opts .seg[data-key='controls'] {
  grid-column: 1 / -1;
}
@media (max-height: 500px) and (orientation: landscape) {
  .pickle .act.hit {
    width: 82px;
    height: 82px;
    font-size: 18px;
    right: calc(16px + var(--safe-r));
    bottom: calc(14px + var(--safe-b));
  }
  .pickle .act.hit span {
    width: 60px;
    height: 60px;
  }
  .pickle .act.dink,
  .pickle .act.lob {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
  .pickle .act.dink span,
  .pickle .act.lob span {
    width: 44px;
    height: 44px;
  }
  .pickle .act.dink {
    right: calc(110px + var(--safe-r));
    bottom: calc(12px + var(--safe-b));
  }
  .pickle .act.lob {
    right: calc(26px + var(--safe-r));
    bottom: calc(108px + var(--safe-b));
  }
}

/* A phone on its side: the four option rows go two to a line so the title card fits. */
@media (max-height: 500px) and (orientation: landscape) {
  .pickle .opts .seg[data-key='controls'],
  .pickle .opts .seg[data-key='camera'] {
    grid-column: auto;
  }
}