main {
  margin-top: var(--nav-height);
  padding: 0;
  --ab-x-sharks-bg-color: #131212;
  --lightning-position: -50%;
}

.squad-grid {
  width: 80vw;
  margin: auto;
  margin-bottom: 3rem;
  display: grid;
  gap: var(--grid-gap); /* spacing between items */
  grid-template-columns: 1fr;
  justify-content: center; /* <-- center the whole grid */
  justify-items: center; /* <-- center items inside each cell */
  align-items: center;

  --home-shirt-background: url(../../img/shirts/green.png);
  --home-shirt-outline: var(--background-blue);
  --away-shirt-background: url(../../img/shirts/black.png);
  --away-shirt-outline: white;
  --player-size: 340px;
  --grid-gap: 3rem;
}

.squad-grid .player {
  width: var(--player-size);
  height: var(--player-size);
  background: var(--home-shirt-background);
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* border: rgba(0, 0, 0, 1) solid 2px; */
  border-radius: 12px;
  box-shadow: inset 0px 0px 15px 8px black;

  font-family: var(--secondary-font);
  font-optical-sizing: auto;
  font-style: normal;

  cursor: pointer;
}

.player.away {
  background: url(../../img/shirts/black.png);
  box-shadow: inset 0px 0px 15px 18px rgb(50, 50, 50);
}

.player .shirt-neck,
.player .left-block,
.player .right-block {
  left: 50%;
  top: -22%;
  width: 80%;
  height: 100%;
  background-color: rgba(247, 247, 250, 1);
}

.player .shirt-neck {
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: 2;
  border: solid 10px var(--home-shirt-outline);
}

.player.away .shirt-neck {
  border: solid 2px var(--neon-color);
  outline: 7px solid var(--away-shirt-outline);
}

.player .left-block,
.player .right-block {
  display: block;
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%) rotateZ(70deg);
  z-index: 2;
}

.player .right-block {
  transform: translate(-50%, -50%) rotateZ(-70deg);
  left: 100%;
}

.player .left-arm,
.player .right-arm {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 0;
  top: 35%;
  background-color: rgba(247, 247, 250, 1);
  border-radius: 100%;
  width: 15%;
  height: 55%;
  border: solid 10px var(--home-shirt-outline);
}

.player.away .left-arm,
.player.away .right-arm {
  border: solid 2px var(--neon-color);
  outline: 7px solid var(--away-shirt-outline);
}

.player .right-arm {
  left: 100%;
}

.player .player-position {
  position: absolute;
  background-color: transparent;
  font-size: 1.3rem;
  font-family: var(--main-font);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  z-index: 5;
  background-color: #e47041;
  color: white;
  padding: 5px;
  width: 5rem;
  border-bottom-right-radius: 7px;
  box-shadow: 0 0 5px 3px black;
}

.player .player-name {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 600;
  top: 48%;
  left: 50%;
  color: var(--home-shirt-outline);
  text-shadow: -2px -2px 0 var(--neon-color), 2px -2px 0 var(--neon-color),
    -2px 2px 0 var(--neon-color), 2px 2px 0 var(--neon-color);
  font-family: var(--main-font);
  font-optical-sizing: auto;
}

.player .player-name.long {
  font-size: 2rem;
}

.player.away .player-name {
  color: var(--away-shirt-outline);
  text-shadow: none;
}

.player .player-number {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 12rem;
  top: 88%;
  left: 50%;
  color: var(--home-shirt-outline);
  text-shadow: -2px -2px 0 var(--neon-color), 2px -2px 0 var(--neon-color),
    -2px 2px 0 var(--neon-color), 2px 2px 0 var(--neon-color);
}

.player.away .player-number {
  color: var(--away-shirt-outline);
  text-shadow: none;
}

.ab-player-logo {
  position: absolute;
  transform: translate(-50%, 0);
  left: 90%;
  top: 1px;
  height: 2.45rem;
  z-index: 5;
}

.player .player-view {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5.5px;
  --player-view-index-size: 6px;
}

.player .player-view::before,
.player .player-view::after {
  content: "";
  display: block;
  width: var(--player-view-index-size);
  height: var(--player-view-index-size);
  border-radius: 50px;
  margin: 0 0.3rem;
  background-color: rgb(140, 140, 140);
  border: 1.5px rgba(40, 40, 40, 0.3) solid;
  z-index: 5;
}

.player:not(.details) .player-view::before {
  background-color: var(--neon-color);
}

.player.details .player-view::after {
  background-color: var(--neon-color);
}

.player .player-details {
  display: none;
  justify-content: center;
  flex-wrap: nowrap;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 2rem 0;
  z-index: 4;
  background-color: rgba(60, 60, 60, 0.98);
  background: linear-gradient(48deg, #333 20%, rgba(10, 10, 10, 1) 80%);
}

.player.details .player-details {
  display: block;
  font-family: var(--aggressive-font);
  font-weight: 400;
  font-style: normal;
}

.player .player-details img {
  position: absolute;
  left: -70px;
  top: 89px;
  height: 16rem;
}

.player .player-details .details-content {
  position: absolute;
  right: 0;
  top: 50px;
  display: flex;

  width: fit-content;
  color: white;
  font-size: 1.1rem;
}

.player .player-details .details-content .name {
  column-span: all;
}

.player .player-details .details-content .name > span {
  margin: 0 8px;
  color: var(--neon-color);
}

.player table tr:not(:first-child) td:first-child {
  color: rgb(200, 200, 200);
  width: 5rem;
  text-align: left;
}

.player table tr:first-child td {
  width: 12.5rem;
  padding-bottom: 0.6rem;
  border-bottom: rgba(70, 70, 70, 0.54) solid 1px;
}

.player table tr:nth-child(2) td {
  padding-top: 1rem;
}

.player table tr td:nth-child(2) {
  width: 5rem;
}

.squad-title {
  text-align: center;
  font-size: 1.8rem;
  font-family: var(--main-font);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.kit-selection-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-family: var(--main-font);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  margin: 2rem 0 3rem 0;
}

.kit-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  padding: 0;
  background: none;
  border: none;
  margin: 0 1rem;
  cursor: pointer;
  z-index: 1;
}

.kit-toggle img {
  width: 100%;
  cursor: pointer;
}

.zaharias-wrap {
  display: none;
  position: fixed;
  width: 10rem;
  height: auto;
  right: 0;
  bottom: -2rem;
  z-index: 20;
}

.zaharias {
  width: 100%;
}

.text-bubble {
  position: absolute;
  left: -1rem;
  top: -2rem;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.text-bubble img {
  width: 100%;
}

.text-bubble .zaharias-text {
  position: absolute;
  left: 50%;
  top: 45%;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  font-family: var(--main-font);
  font-optical-sizing: auto;
  font-weight: 600;
}

.ab-x-sharks-banner {
  position: relative;
  text-align: center;
  width: 100%;
  height: 15rem;
  background-color: var(--ab-x-sharks-bg-color);
  overflow: hidden;
}

.ab-x-sharks-banner img {
  height: 100%;
}

.ab-x-sharks-banner::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  left: 50%;
  height: 100%;
  width: 200px;
  opacity: 0.1;
  background: url(../../img/auxilary/lightning.png);
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(var(--lightning-position), 0) scale(1.3) rotateZ(10deg);
  z-index: 3;
  animation: lightning-strike 7s infinite;
}

/* Sorting select */

.sort-wrapper {
  display: flex;
  position: relative;
  margin-bottom: 4rem;
}

select,
::picker(select) {
  appearance: base-select;
  width: 11.5rem;
  cursor: pointer;
  font-family: var(--aggressive-font);
  font-weight: 400;
  font-style: normal;
}

#smartphone-sort-select {
  width: 11.5rem;
  cursor: pointer;
  font-family: var(--aggressive-font);
  font-weight: 400;
  font-style: normal;
}

select {
  position: relative;
  opacity: 0;
  z-index: 1;
}

select .icon {
  display: none;
}

select,
#smartphone-sort-select {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
  margin: 0 auto;
}

select:hover,
select:focus,
#smartphone-sort-select:hover,
#smartphone-sort-select:focus {
  background: #dddddd;
}

select::picker-icon {
  color: #999999;
  transition: 0.4s rotate;
  display: none;
}

select:open::picker-icon {
  rotate: 180deg;
}

::picker(select) {
  border: none;
}

option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

option:nth-of-type(odd) {
  background: white;
}

option:hover,
option:focus {
  background: #dddddd;
}

option .icon {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0d243f;
  width: 3rem;
  text-box: trim-both cap alphabetic;
}

selectedcontent .icon,
#smartphone-sort-select .selected-content .icon {
  display: none;
}

selectedcontent,
#smartphone-sort-select .selected-content {
  width: 100%;
  text-align: center;
}

option:checked {
  font-weight: bold;
}

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "🏀";
}

::picker(select) {
  opacity: 0;
  transition: all 0.4s allow-discrete;
}

::picker(select):popover-open {
  opacity: 1;
}

select > button > span,
#smartphone-sort-select > span {
  padding-right: 1rem;
  border-right: 2px solid rgba(200, 200, 200, 0.6);
  white-space: normal;
}

#smartphone-sort-select {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

#smartphone-sort-select > span {
  font-size: 1rem;
  line-height: 1rem; /* match font size to kill extra ascent/descent */
  vertical-align: middle;
  /* text-box: trim-both cap alphabetic; */
}

#smartphone-sort-select > .selected-content {
  flex-grow: 1;
}

@keyframes lightning-strike {
  0%,
  80% {
    opacity: 0;
    filter: brightness(1) hue-rotate(0deg);
  }

  /* ⚡ Sudden flash */
  81% {
    opacity: 1;
    filter: brightness(3) hue-rotate(0deg);
  }

  /* ⚡ Bounce #1 */
  82% {
    opacity: 0.6;
    filter: brightness(2.2) hue-rotate(20deg);
  }

  /* ⚡ Bounce #2 */
  83% {
    opacity: 1;
    filter: brightness(3) hue-rotate(-20deg);
  }

  /* ⚡ Bounce #3 */
  84% {
    opacity: 0.7;
    filter: brightness(2.4) hue-rotate(15deg);
  }

  /* ⚡ Bounce #4 (final flicker) */
  85% {
    opacity: 1;
    filter: brightness(3) hue-rotate(-15deg);
  }

  /* 🌙 Smooth after-glow fade */
  95% {
    opacity: 0;
    filter: brightness(1.3) hue-rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: brightness(1) hue-rotate(0deg);
  }
}