/* Soccer Kids, on top of the Sports Arena styles (arena.css): an outdoor page color, team
   colors on the scoreboard, the restart note, the team picker, and Pass and Shoot buttons. */
:root {
  --grass: #2f6b33;
  --team-blue: #2e63c9;
  --team-red: #e5452c;
}

html,
body {
  background: var(--grass);
}

/* ---- Scoreboard ------------------------------------------------------------------------- */
.kids .team[data-team='blue'] .name {
  color: var(--team-blue);
}
.kids .team[data-team='red'] .name {
  color: var(--team-red);
}
.kids .team[data-team='blue'] .face {
  background: #b9d0f5;
}
.kids .team[data-team='red'] .face {
  background: #f8c9bf;
}
.kids .clock {
  min-width: 6.4em;
  text-align: center;
}

/* ---- The restart note under the clock --------------------------------------------------- */
.toast {
  position: absolute;
  left: 50%;
  top: calc(98px + var(--safe-t));
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 14px 5px;
  border: 2.5px solid var(--ink);
  border-left-width: 9px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font: 800 16px/1.2 var(--cond);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast[data-team='blue'] {
  border-left-color: var(--team-blue);
}
.toast[data-team='red'] {
  border-left-color: var(--team-red);
}
.toast[data-team='blue'] b {
  color: var(--team-blue);
}
.toast[data-team='red'] b {
  color: var(--team-red);
}
.toast small {
  font: 600 11px/1.3 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* ---- Title card: pick a team -------------------------------------------------------------- */
.kids .panel.title .card {
  width: min(100%, 600px);
}
.teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 6px 0 12px;
}
.team-pick {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 8px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #fffaf0;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease, background 120ms ease;
}
.team-pick:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.kids-row {
  display: flex;
  justify-content: center;
  gap: 0;
}
.kids-row canvas {
  width: 56px;
  height: 56px;
  margin: 0 -3px;
}
.team-name {
  font: 800 24px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-pick[data-team='blue'] .team-name {
  color: var(--team-blue);
}
.team-pick[data-team='red'] .team-name {
  color: var(--team-red);
}
.team-pick small {
  font: 600 11px/1.3 var(--mono);
  color: var(--ink-2);
}
.team-pick[aria-checked='true'] {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.team-pick[data-team='blue'][aria-checked='true'] {
  background: #cfe0fb;
}
.team-pick[data-team='red'][aria-checked='true'] {
  background: #fbd7cf;
}
.team-pick[aria-checked='true']::after {
  content: 'Your team';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 9px;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: var(--yellow);
  color: var(--ink);
  font: 800 12px/1.3 var(--cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Touch: Pass up and to the right, Shoot below and to its left ------------------------- */
.act {
  --charge: 0;
  position: absolute;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  color: #fffaf0;
  font: 800 19px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 4;
  touch-action: none;
  padding: 0;
}
.act span {
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  border: 3px solid rgba(27, 31, 28, 0.35);
}
.act.pass {
  right: calc(18px + var(--safe-r));
  bottom: calc(112px + var(--safe-b));
  width: 92px;
  height: 92px;
  background: var(--team-blue);
}
.act.pass span {
  width: 70px;
  height: 70px;
  background: var(--team-blue);
}
.act.shoot {
  right: calc(118px + var(--safe-r));
  bottom: calc(22px + var(--safe-b));
  width: 100px;
  height: 100px;
  background: conic-gradient(var(--yellow) calc(var(--charge) * 360deg), var(--red) 0);
}
.act.shoot span {
  width: 76px;
  height: 76px;
  background: var(--red);
}
.act.down {
  transform: translate(3px, 3px) scale(0.96);
  box-shadow: 1px 1px 0 var(--ink);
}

@media (max-width: 560px) {
  .teams {
    gap: 8px;
  }
  .kids-row canvas {
    width: 40px;
    height: 40px;
    margin: 0 -2px;
  }
  .team-name {
    font-size: 20px;
  }
  .team-pick small {
    display: none;
  }
  .toast {
    top: calc(88px + var(--safe-t));
    font-size: 14px;
  }
  .act.pass {
    width: 82px;
    height: 82px;
    bottom: calc(100px + var(--safe-b));
  }
  .act.pass span {
    width: 62px;
    height: 62px;
  }
  .act.shoot {
    width: 88px;
    height: 88px;
    right: calc(104px + var(--safe-r));
  }
  .act.shoot span {
    width: 66px;
    height: 66px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  /* A phone on its side: the title card has to fit without scrolling, so the long lines go.
     The buttons on screen say what they do, and the stick shows a hint. */
  .kids .panel.title .tag,
  .kids .panel.title .how,
  .team-pick small {
    display: none;
  }
  .kids .panel.title .foot {
    position: static;
    margin-top: 6px;
  }
  .kids .panel.title {
    align-content: center;
  }
  .kids-row canvas {
    width: 38px;
    height: 38px;
  }
  .teams {
    margin: 4px 0 6px;
  }
  .act.pass {
    width: 78px;
    height: 78px;
    bottom: calc(96px + var(--safe-b));
  }
  .act.pass span {
    width: 58px;
    height: 58px;
  }
  .act.shoot {
    width: 84px;
    height: 84px;
    right: calc(100px + var(--safe-r));
    bottom: calc(14px + var(--safe-b));
  }
  .act.shoot span {
    width: 62px;
    height: 62px;
  }
  .toast {
    top: calc(84px + var(--safe-t));
  }
}

/* ---- Sideline tips: a shout that pops up mid-field --------------------------------------- */
.tip {
  position: absolute;
  left: 50%;
  top: 64%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font: 800 22px/1.1 var(--cond);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-3deg);
}
.tip svg {
  flex: none;
  width: 26px;
  height: 26px;
  fill: var(--ink);
}
.tip svg .wave {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.tip.show {
  animation: tip 2.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes tip {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-6deg); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1.07) rotate(-2deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  86% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(0.98) rotate(-2deg); }
}
@media (max-width: 560px) {
  .tip {
    top: 60%;
    font-size: 17px;
    padding: 6px 14px 6px 10px;
  }
  .tip svg {
    width: 21px;
    height: 21px;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .tip {
    top: 72%;
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tip.show {
    animation-name: tip-still;
  }
}
@keyframes tip-still {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg); }
  8%, 86% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg); }
}

/* ---- Learning mode: the coach card and the stars ------------------------------------------ */
.coach {
  position: absolute;
  left: 50%;
  top: calc(98px + var(--safe-t));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(92vw, 560px);
  padding: 8px 14px 9px 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fffaf0;
  box-shadow: 4px 4px 0 var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease, background 200ms ease;
}
.coach.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.coach.done {
  background: #d9f2c9;
}
.coach svg {
  flex: none;
  width: 34px;
  height: 34px;
  fill: var(--green);
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.coach svg .cord {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
}
.coach div {
  display: grid;
  gap: 1px;
  text-align: left;
}
.coach b {
  font: 800 13px/1.2 var(--cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.coach span {
  font: 800 19px/1.2 var(--cond);
  letter-spacing: 0.01em;
  color: var(--ink);
}
@media (max-width: 560px) {
  .coach {
    top: calc(88px + var(--safe-t));
  }
  .coach span {
    font-size: 16px;
  }
  .coach svg {
    width: 28px;
    height: 28px;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .coach span {
    font-size: 16px;
  }
}
.lessons {
  margin: 4px auto 6px;
  max-width: 28em;
  text-align: left;
}
.lessons[hidden] {
  display: none;
}
.lessons .stars-total {
  margin: 0 0 4px;
  text-align: center;
  font: 800 20px/1.2 var(--cond);
  color: var(--ink);
}
.lessons ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 14px;
  font: 600 12px/1.5 var(--mono);
  color: var(--ink-2);
}
.lessons li.got {
  color: var(--ink);
}
.lessons li span {
  color: #c7a12a;
}
@media (max-width: 560px) {
  .lessons ul {
    columns: 1;
  }
}

/* The Miles Media credit beside Sound on (as on every ziggy.games page). */
.foot .made {
  color: #fffaf0;
  font: 600 13px/1.4 var(--mono);
}
.foot .made a {
  color: inherit;
}