.penalty-page {
  background:
    linear-gradient(145deg, rgba(5, 10, 15, 0.98), rgba(10, 39, 31, 0.96) 48%, rgba(7, 11, 18, 0.98)),
    linear-gradient(90deg, rgba(210, 230, 255, 0.08), rgba(52, 119, 84, 0.12));
}

.penalty-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(245px, 0.76fr) minmax(360px, 1.58fr) minmax(250px, 0.76fr);
  margin: 0 auto;
  max-width: 1480px;
  padding: 0 clamp(16px, 3vw, 34px) 30px;
}

.penalty-panel,
.penalty-stadium {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.penalty-panel {
  align-content: start;
  background: linear-gradient(180deg, rgba(245, 248, 245, 0.98), rgba(224, 233, 226, 0.98));
  display: grid;
  gap: 14px;
  padding: 16px;
}

.penalty-title p {
  color: #e73e43;
  font-size: 12px;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}

.penalty-title h1,
.penalty-title h2 {
  color: #14171d;
  line-height: 1;
  margin: 8px 0 0;
}

.penalty-title h1 {
  font-size: clamp(34px, 4vw, 52px);
}

.penalty-title h2 {
  font-size: 28px;
}

.rival-title {
  margin-top: 10px;
}

.penalty-teams {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.penalty-team {
  background:
    linear-gradient(90deg, var(--team-a) 0 48%, var(--team-b) 48% 100%);
  border: 1px solid rgba(20, 23, 29, 0.18);
  border-radius: 8px;
  color: #111820;
  min-height: 50px;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.penalty-team::after {
  background: rgba(255, 255, 255, 0.78);
  content: "";
  inset: 6px;
  position: absolute;
}

.penalty-team strong,
.penalty-team span {
  display: block;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}

.penalty-team strong {
  font-size: 13px;
  padding: 9px 8px 0;
}

.penalty-team span {
  color: rgba(20, 23, 29, 0.68);
  font-size: 11px;
  font-weight: 900;
  padding: 1px 8px 8px;
}

.penalty-team.active {
  border-color: #1f6feb;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.22);
}

.penalty-button {
  background: linear-gradient(180deg, #f8fafc, #dce6ef);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 5px 0 #9aa8b5;
  color: #101821;
  min-height: 48px;
  padding: 0 16px;
}

.penalty-button.secondary {
  background: linear-gradient(180deg, #ffffff, #edf2f1);
  box-shadow: 0 5px 0 #b8c3c0;
  color: #233023;
}

.penalty-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.penalty-stadium {
  background: #03080b;
  min-height: 620px;
  overflow: hidden;
}

.penalty-scoreboard {
  align-items: center;
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  padding: 16px;
}

.score-team,
.score-round {
  align-items: center;
  background: rgba(6, 12, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
}

.score-team {
  background:
    linear-gradient(90deg, var(--team-a, #d52b1e), var(--team-b, #0039a6));
  justify-content: space-between;
}

.score-team.rival {
  background:
    linear-gradient(90deg, var(--rival-a, #ffdf00), var(--rival-b, #009c3b));
}

.score-team span,
.score-round span {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.score-team strong {
  font-size: 38px;
  line-height: 1;
}

.score-round {
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-width: 138px;
  text-align: center;
}

.score-round strong {
  color: #d9ecff;
  font-size: 18px;
}

.penalty-canvas-frame {
  height: min(62vh, 610px);
  min-height: 430px;
}

#penaltyCanvas {
  display: block;
  height: 100%;
  touch-action: none;
  width: 100%;
}

.shootout-row {
  color: #fff;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding: 0 16px 16px;
}

.shootout-row > div {
  background: rgba(8, 14, 20, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px;
}

.shootout-row span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.shot-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shot-dots i {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: block;
  height: 18px;
  width: 18px;
}

.shot-dots i.goal {
  background: #2fa65a;
  box-shadow: 0 0 0 3px rgba(47, 166, 90, 0.18);
}

.shot-dots i.miss {
  background: #c63b35;
  box-shadow: 0 0 0 3px rgba(198, 59, 53, 0.18);
}

.aim-card,
.power-box,
.penalty-message {
  background: #fff;
  border: 1px solid #d8e4dc;
  border-radius: 8px;
  padding: 13px;
}

.aim-card span,
.power-box span {
  color: #66716b;
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.aim-card strong {
  display: block;
  font-size: 20px;
  margin-top: 4px;
}

.penalty-target-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.target-button {
  background: linear-gradient(180deg, #fff, #eef2f4);
  border: 1px solid #cad5d9;
  border-radius: 8px;
  color: #172017;
  min-height: 58px;
}

.target-button span {
  display: block;
  font-size: 15px;
  font-weight: 900;
}

.target-button small {
  color: #62706a;
  display: block;
  font-size: 10px;
  font-weight: 900;
  margin-top: 3px;
  text-transform: uppercase;
}

.target-button.active {
  background: linear-gradient(180deg, #dbeafe, #9cc7ff);
  border-color: #1f6feb;
}

.power-box {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) 36px;
}

.power-box input {
  accent-color: #1f6feb;
  width: 100%;
}

.power-box b {
  text-align: right;
}

.curve-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.curve-button {
  background: linear-gradient(180deg, #fff, #edf2f4);
  border: 1px solid #cad5d9;
  border-radius: 8px;
  color: #223024;
  min-height: 42px;
}

.curve-button.active {
  background: linear-gradient(180deg, #dbeafe, #9cc7ff);
  border-color: #1f6feb;
}

.penalty-message strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

.penalty-message p {
  color: #617070;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  margin: 7px 0 0;
}

@media (max-width: 1120px) {
  .penalty-layout {
    grid-template-columns: 1fr;
  }

  .penalty-panel {
    order: 2;
  }

  .penalty-stadium {
    order: 1;
  }

  .control-panel {
    order: 3;
  }

  .penalty-teams {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .penalty-scoreboard {
    grid-template-columns: 1fr 1fr;
  }

  .score-round {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .penalty-canvas-frame {
    height: 58vh;
    min-height: 360px;
  }

  .penalty-teams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shootout-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .penalty-layout {
    padding-left: 12px;
    padding-right: 12px;
  }

  .penalty-scoreboard {
    gap: 8px;
    padding: 10px;
  }

  .score-team,
  .score-round {
    min-height: 54px;
    padding: 8px 10px;
  }

  .score-team strong {
    font-size: 30px;
  }

  .target-button {
    min-height: 52px;
  }
}