/* Coach App Match Day field proportions and compact player cards.
   Isolated to the dedicated .camd app screen. */

.camd .camd-oval {
  box-sizing: border-box !important;
}

.camd .camd-player {
  min-height: 72px !important;
  border-radius: 8px !important;
}

.camd .camd-player > small {
  padding: 2px 5px !important;
  font-size: 7px !important;
}

.camd .camd-player > strong {
  min-width: 27px !important;
  padding: 2px 5px !important;
  font-size: 12px !important;
}

.camd .camd-player > span {
  min-height: 20px !important;
  padding: 3px 4px 0 !important;
  padding-right: 28px !important;
  font-size: 8px !important;
}

.camd .player-data {
  padding: 0 5px 1px !important;
}

.camd .player-data em {
  font-size: 7px !important;
}

.camd .player-score {
  gap: 3px !important;
  padding: 0 3px !important;
}

.camd .player-score button {
  min-height: 18px !important;
  font-size: 8px !important;
}

/* The field-markings div is the first div inside the oval, so the forward
   line is the second div of its type. Target it explicitly instead of using
   :first-of-type, which never matched the forward row. */
.camd .camd-row.edge-row {
  width: 100% !important;
  margin-left: 0 !important;
}

.camd .camd-oval > .camd-row.edge-row:nth-of-type(2) .camd-player:nth-child(1),
.camd .camd-oval > .camd-row.edge-row:nth-of-type(2) .camd-player:nth-child(3),
.camd .camd-oval > .camd-row.edge-row:last-child .camd-player:nth-child(1),
.camd .camd-oval > .camd-row.edge-row:last-child .camd-player:nth-child(3) {
  transform: none !important;
}

/* Mirror the full-back arrangement: FF and FB sit the same distance from
   their pocket row, in opposite directions. */
.camd .camd-oval > .camd-row.edge-row:nth-of-type(2) .camd-player:nth-child(2) {
  transform: translateY(-30px) !important;
}

.camd .camd-oval > .camd-row.edge-row:last-child .camd-player:nth-child(2) {
  transform: translateY(30px) !important;
}

/* Interchange timer presentation mirrors the existing website Match Day.
   The timer state itself remains in CoachAppMatchDay and is saved with the
   existing Match Day record. */
.camd .camd-bench .camd-player {
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 22px !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease !important;
}

.camd .camd-bench .camd-player.bench-red {
  border-color: #ef233c !important;
  outline: 3px solid #ef233c !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(239,35,60,.38), 0 0 14px rgba(239,35,60,.34) !important;
}

.camd .camd-bench .camd-player.bench-orange {
  border-color: #ff9f1c !important;
  outline: 3px solid #ff9f1c !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(255,159,28,.38), 0 0 14px rgba(255,159,28,.34) !important;
}

.camd .camd-bench .camd-player.bench-green {
  border-color: #16c784 !important;
  outline: 3px solid #16c784 !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(22,199,132,.38), 0 0 14px rgba(22,199,132,.30) !important;
}

.camd .camd-bench .bench-timer {
  position: absolute !important;
  z-index: 22 !important;
  right: 4px !important;
  bottom: 3px !important;
  top: auto !important;
  min-width: 46px !important;
  padding: 4px 6px !important;
  border-radius: 7px !important;
  background: rgba(5,13,22,.96) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  pointer-events: none !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.4) !important;
}

.camd .camd-bench .bench-red .bench-timer { color: #ff5668 !important; }
.camd .camd-bench .bench-orange .bench-timer { color: #ffb13b !important; }
.camd .camd-bench .bench-green .bench-timer { color: #39e69b !important; }

.camd .camd-interchange {
  position: relative !important;
  z-index: 3 !important;
  padding-bottom: 4px !important;
}

/* Portrait uses the tall coaches-board AFL oval shape. */
@media (orientation: portrait) and (max-width: 900px) {
  .camd .camd-ground {
    overflow: visible !important;
  }

  .camd .camd-oval {
    width: 78% !important;
    min-height: 675px !important;
    margin-top: 7px !important;
    padding: 48px 4px !important;
    overflow: visible !important;
    border-radius: 50% / 24% !important;
  }

  .camd .camd-field-markings {
    overflow: hidden !important;
    border-radius: 50% / 24% !important;
  }

  .camd .camd-row {
    gap: 4px !important;
  }

  .camd .camd-row.edge-row {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .camd .camd-player {
    min-height: 68px !important;
  }

  .camd .camd-oval > .camd-row.edge-row:nth-of-type(2) .camd-player:nth-child(2) {
    transform: translateY(-42px) !important;
  }

  .camd .camd-oval > .camd-row.edge-row:last-child .camd-player:nth-child(2) {
    transform: translateY(42px) !important;
  }

  .camd .camd-bench {
    gap: 4px !important;
  }

  .camd .camd-bench .camd-player {
    min-height: 76px !important;
    padding-bottom: 22px !important;
  }

  .camd .camd-bench .bench-timer {
    min-width: 42px !important;
    font-size: 9px !important;
  }
}

/* Landscape stays a wide AFL oval and lets the field dominate the screen. */
@media (orientation: landscape) and (min-width: 900px) {
  .camd .camd-ground {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .camd .camd-oval {
    width: min(99%, 1180px) !important;
    height: calc(100% - 89px) !important;
    min-height: 410px !important;
    max-height: 500px !important;
    padding: 23px 58px !important;
    overflow: visible !important;
    border-radius: 50% / 34% !important;
  }

  .camd .camd-field-markings {
    overflow: hidden !important;
    border-radius: 50% / 34% !important;
  }

  .camd .camd-row {
    gap: 9px !important;
  }

  .camd .camd-row.edge-row {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .camd .camd-player {
    min-height: 57px !important;
  }

  .camd .camd-player > span {
    min-height: 16px !important;
    font-size: 7px !important;
  }

  .camd .player-score button {
    min-height: 15px !important;
    font-size: 7px !important;
  }

  .camd .camd-oval > .camd-row.edge-row:nth-of-type(2) .camd-player:nth-child(2) {
    transform: translateY(-24px) !important;
  }

  .camd .camd-oval > .camd-row.edge-row:last-child .camd-player:nth-child(2) {
    transform: translateY(24px) !important;
  }

  .camd .camd-interchange {
    height: 82px !important;
    margin-top: 2px !important;
  }

  .camd .camd-bench .camd-player {
    min-height: 68px !important;
    padding-bottom: 20px !important;
  }

  .camd .camd-bench .bench-timer {
    min-width: 42px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }
}