/**
 * Powerball Xs and Os game page.
 *
 * The drawn result is 8 NFL teams. Everywhere a team appears it renders as
 * the site's standard lottery ball (radial-gradient circle + gloss) with the
 * team logo inside and the customer-facing team code labeled underneath,
 * plus a "CODE - Team Name" tooltip (.xoTip).
 *
 * NOTE: the sitewide stylesheet sets .winningNumbers { font-size: 0 } for the
 * ball layouts, so every text size in here must be absolute (px/rem), never em.
 */

/* ------------------------------------------------------------------ */
/* Shared "CODE - Team Name" tooltip, shown on hover and keyboard focus.
   Apply class xoTip + data-team-name anywhere a team image appears.    */
/* ------------------------------------------------------------------ */

.xoTip {
  position: relative;
}

.xoTip[data-team-name]::after {
  content: attr(data-team-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.xoTip[data-team-name]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%) translateY(4px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1a1a1a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.xoTip[data-team-name]:hover::after,
.xoTip[data-team-name]:hover::before,
.xoTip[data-team-name]:focus::after,
.xoTip[data-team-name]:focus::before,
.xoTip[data-team-name]:focus-within::after,
.xoTip[data-team-name]:focus-within::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------------ */
/* Shared team ball: the sitewide lottery-ball look (.ballWrapper .ball
   gradient + gloss) holding a team logo, with the code underneath.     */
/* ------------------------------------------------------------------ */

.teamBall {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 120%, #fffefe, #c5cac7 10%, #f1ecf3 80%, #a0a99c 100%);
  box-shadow: 0 3px 6px rgba(20, 20, 20, 0.3);
}

.teamBall::before {
  content: '';
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  z-index: 2;
  opacity: 0.7;
}

.teamBall .teamLogo {
  position: relative;
  z-index: 3;
  display: block;
  max-width: 58%;
  max-height: 46%;
  object-fit: contain;
}

.teamBall .teamAbbr {
  position: relative;
  z-index: 3;
  font-weight: 700;
  font-size: 15px;
  color: #15315a;
}

.teamCode {
  position: relative;
  z-index: 3;
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  color: #15315a;
}

/* No-logo fallback shows the abbr inside the ball; skip the duplicate code */
.teamBall .teamAbbr + .teamCode {
  display: none;
}

/* The hero header slide carries the game branding, so visually hide the
   page H1 exactly like the other game pages (sitewide .visuallyHidden list
   covers powerball, megabucks, etc. but predates this game). */
.node-type-xs-and-os h1.page__title {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* ------------------------------------------------------------------ */
/* Winning numbers tiles on the game page                              */
/* ------------------------------------------------------------------ */

.winningTeams .teamTileContainer {
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  max-width: 920px;
  margin: 20px auto;
}

.winningTeams .teamTileWrapper,
.teamGeneratorBox .teamTileWrapper {
  min-width: 0;
}

.winningTeams .teamTile,
.teamGeneratorBox .teamTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.winningTeams .teamTile:focus,
.teamGeneratorBox .teamTile:focus {
  outline: 2px solid #15315a;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .winningTeams .teamTileContainer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 360px;
  }
}

/* ------------------------------------------------------------------ */
/* Team generator box on the game page                                 */
/* ------------------------------------------------------------------ */

.teamGeneratorBox .teamGenContainer {
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 420px;
  margin: 16px auto;
}

/* Empty slot: dashed placeholder circle until teams are drawn */
.teamGeneratorBox .teamGenSlot .teamBall:empty {
  background-image: none;
  background: #fff;
  border: 2px dashed #999;
  box-shadow: none;
}

.teamGeneratorBox .teamGenSlot .teamBall:empty::before {
  content: none;
}

.teamGeneratorBox .teamGenSlot.revealed .teamBall {
  animation: xoTileIn 0.25s ease;
}

@keyframes xoTileIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Team picker on the check my numbers page                            */
/* ------------------------------------------------------------------ */

.teamCheckForm {
  text-align: center;
}

/* Match the compact side-by-side date fields of the other check pages
   (the sitewide #datePicker sizing is scoped to the body-embedded forms). */
.teamCheckForm #datePicker {
  display: inline-block;
  width: 340px;
  max-width: 100%;
  font-size: 0;
}

.teamCheckForm #datePicker > div {
  width: 50%;
  display: inline-block;
  margin-top: 10px;
}

.teamCheckForm #datePicker > div:first-child {
  padding-right: 10px;
}

.teamCheckForm #datePicker > div:last-child {
  padding-left: 10px;
}

.teamCheckForm #datePicker input {
  width: 100%;
  padding: 0 20px;
  font-size: 14px;
}

.teamCheckForm .teamPickerStatus {
  font-size: 15px;
  margin: 12px 0 6px;
}

.teamCheckForm .teamPicker {
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  max-width: 780px;
  margin: 0 auto 16px;
}

@media (max-width: 600px) {
  .teamCheckForm .teamPicker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.teamCheckForm .teamPick {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
}

.teamCheckForm .teamPick .teamCode {
  font-size: 12px;
}

.teamCheckForm .teamPick.selected .teamBall {
  box-shadow: 0 0 0 3px #007a33, 0 3px 6px rgba(20, 20, 20, 0.3);
}

.teamCheckForm .teamPick.selected .teamCode {
  color: #007a33;
}

.teamCheckForm .teamPick:focus-visible {
  outline: 2px solid #15315a;
  outline-offset: 2px;
}

/* Check button + reset link. The sitewide rules that give the submit input
   its white text and space the reset link are scoped to the body-embedded
   .checkMyNumbers forms of the other games, so restate them here. */
.teamCheckForm .submitButton {
  display: inline-block;
  margin-top: 10px;
  width: auto;
}

.teamCheckForm .submitButton input.greenButton {
  border: none;
  color: #fff;
  cursor: pointer;
}

.teamCheckForm .resetHolder {
  display: inline-block;
  padding-left: 24px;
  vertical-align: middle;
}

.teamCheckForm .resetButton {
  font-size: 15px;
  line-height: 50px;
  color: #15315a;
  text-decoration: underline;
}

.teamCheckForm .resetButton:hover,
.teamCheckForm .resetButton:focus {
  color: #007a33;
}

/* ------------------------------------------------------------------ */
/* Result rows: past winning numbers and check-my-numbers matches.
   8 balls with the code captioned underneath, all on ONE line.

   The sitewide ball rules (.drawGameNumbers .matchingNumbers .numberRow
   .number) set width: 30-50px and margin: 0 calc(8.3% - 27px) !important,
   sized for 5-6 balls -- with 8 cells those margins exceed the row width
   and collapse everything. The desktop variant uses !important on margin,
   so ours must too. */
/* ------------------------------------------------------------------ */

.drawGameNumbers .matchingNumbers.teamRow .numberRow {
  font-size: 16px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  height: auto;
  padding: 10px 0;
}

.drawGameNumbers .matchingNumbers.teamRow .numberRow .number.teamCell {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  max-width: 84px;
  height: auto;
  margin: 0 !important;
  line-height: normal;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0 2px;
  border-radius: 0;
}

.drawGameNumbers .matchingNumbers.teamRow .teamCell .teamCode {
  font-size: 11px;
}

.drawGameNumbers .matchingNumbers.teamRow .numberRow .number.teamCell.match .teamBall {
  box-shadow: 0 0 0 3px #007a33, 0 3px 6px rgba(20, 20, 20, 0.3);
}

.drawGameNumbers .matchingNumbers.teamRow .numberRow .number.teamCell.match .teamCode {
  color: #007a33;
}

.drawGameNumbers .matchingNumbers.teamRow .matchCount {
  flex: 0 0 auto;
  font-size: 14px;
  align-self: center;
  margin-left: 8px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .drawGameNumbers .matchingNumbers.teamRow .numberRow {
    gap: 4px;
  }
  .drawGameNumbers .matchingNumbers.teamRow .teamCell .teamCode {
    font-size: 8px;
  }
  .teamCode {
    font-size: 9px;
  }
}