/* FC75 Straffläggning match export.
   Matchreglerna är kopierade från den ordinarie style.css utan ändrade värden. */

.penalty-match-overlay,
.penalty-match-overlay * {
  box-sizing: border-box;
}

.penalty-match-overlay {
  --accent: #bb102f;
  --accent-soft: #c13a44;
  --danger: #dc2626;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html.penalty-match-open,
body.penalty-match-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.penalty-card-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.penalty-game-error {
  color: var(--danger);
}

.penalty-loader {
  width: 28px;
  height: 28px;
  margin: 0 auto 9px;
  border: 3px solid rgba(84, 73, 87, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: penalty-spin 0.8s linear infinite;
}

@keyframes penalty-spin {
  to { transform: rotate(360deg); }
}

.penalty-match-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  color: #fff;
  background: #176b3a;
  isolation: isolate;
}

.penalty-match-overlay.is-presentation-phase .penalty-game-hud,
.penalty-match-overlay.is-presentation-phase .penalty-shot-label,
.penalty-match-overlay.is-presentation-phase .penalty-test-controls {
  display: none;
}

.penalty-match-overlay.is-presentation-phase .penalty-game-stage::before,
.penalty-match-overlay.is-presentation-phase .penalty-game-stage::after {
  display: none;
}

.penalty-match-overlay.is-presentation-phase .penalty-leave-button {
  z-index: 40;
  right: calc(env(safe-area-inset-right, 0px) + 7px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
  min-width: 0;
  min-height: 27px;
  padding: 3px 9px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(28, 18, 24, 0.38);
  font-size: 0.58rem;
  opacity: 0.72;
}

.penalty-pitch,
.penalty-pitch::before,
.penalty-pitch::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.penalty-pitch {
  z-index: -2;
  background: repeating-linear-gradient(90deg, #176b3a 0 12.5%, #1b7540 12.5% 25%);
}

.penalty-pitch::before {
  content: "";
  left: 0;
  right: 37%;
  top: 18%;
  bottom: 0;
  background: radial-gradient(ellipse at 48% 50%, rgba(79, 164, 96, 0.12), rgba(7, 60, 32, 0.12) 58%, rgba(5, 42, 23, 0.24));
}

.penalty-pitch::after {
  content: "";
  left: 3%;
  right: 37%;
  top: auto;
  bottom: 29%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34) 10% 90%, transparent);
}

.penalty-pitch span {
  position: absolute;
  left: 33%;
  top: 88%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.penalty-game-hud {
  position: absolute;
  z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 7px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 82px minmax(250px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(36, 23, 31, 0.88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.penalty-role-copy,
.penalty-match-timer,
.penalty-scoreboard {
  min-width: 0;
}

.penalty-role-copy {
  display: grid;
  align-content: center;
  gap: 2px;
  padding-left: 5px;
}

.penalty-role-copy span,
.penalty-role-copy small,
.penalty-match-timer span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-role-copy strong {
  overflow: hidden;
  font-size: clamp(0.83rem, 2vw, 1.08rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-match-timer {
  display: grid;
  place-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
}

.penalty-match-timer strong {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.penalty-scoreboard {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.2);
}

.penalty-score-line {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) 18px auto auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  font-size: 0.7rem;
}

.penalty-score-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-lamps,
.penalty-sudden-lamps {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.penalty-sudden-lamps {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.54rem;
}

.penalty-lamp {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: #77747a;
}

.penalty-lamp.is-goal { background: #34d268; box-shadow: 0 0 5px rgba(52, 210, 104, 0.6); }
.penalty-lamp.is-miss { background: #ee445b; box-shadow: 0 0 5px rgba(238, 68, 91, 0.55); }

.penalty-game-sidebar {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(7px, 1.5vh, 13px);
  padding: max(20px, env(safe-area-inset-top, 0px)) max(13px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 60px) clamp(14px, 2.2vw, 28px);
  pointer-events: none;
}

.penalty-game-sidebar-widget,
.penalty-compact-match-timer {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(36, 23, 31, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
}

.penalty-game-sidebar-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, 34%);
  gap: 8px;
}

.penalty-game-sidebar-role {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: 10px 12px;
  border-radius: 16px;
}

.penalty-game-sidebar-role span,
.penalty-game-sidebar-timer span,
.penalty-compact-match-timer span {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.penalty-game-sidebar-role strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  font-size: clamp(0.78rem, 1.35vw, 1.05rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-game-sidebar-timer {
  min-width: 0;
  display: grid;
  place-content: center;
  padding: 8px 9px;
  border-radius: 16px;
  text-align: center;
}

.penalty-game-sidebar-timer strong,
.penalty-compact-match-timer strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.penalty-game-sidebar-score {
  min-width: 0;
  padding: 10px 12px 11px;
  border-radius: 18px;
}

.penalty-game-sidebar-score-head {
  margin-bottom: 3px;
}

.penalty-game-sidebar-score-head strong {
  color: #ffd86a;
  font-size: 0.65rem;
  font-weight: 1000;
  letter-spacing: 0.09em;
}

.penalty-game-sidebar .penalty-scoreboard {
  gap: 0;
  padding: 0;
  background: transparent;
}

.penalty-game-sidebar .penalty-score-line {
  min-width: 0;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) 22px auto;
  gap: 6px;
  padding: 5px 1px;
  font-size: 0.76rem;
}

.penalty-game-sidebar .penalty-score-line + .penalty-score-line {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.penalty-game-sidebar .penalty-score-name {
  min-width: 0;
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
}

.penalty-game-sidebar .penalty-score-line > strong {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  text-align: center;
}

.penalty-game-sidebar .penalty-lamps {
  gap: clamp(2px, 0.38vw, 4px);
  white-space: nowrap;
}

.penalty-game-sidebar .penalty-lamp {
  width: clamp(8px, 1vw, 11px);
  height: clamp(8px, 1vw, 11px);
}

.penalty-game-sidebar .penalty-sudden-lamps {
  grid-column: 1 / -1;
  justify-self: end;
}

.penalty-compact-match-timer {
  position: absolute;
  z-index: 45;
  top: max(20px, env(safe-area-inset-top, 0px));
  right: calc(env(safe-area-inset-right, 0px) + 13px);
  min-width: 102px;
  padding: 8px 13px;
  border-radius: 16px;
  text-align: center;
  pointer-events: none;
}

.penalty-match-overlay.has-game-sidebar .penalty-selected-skill {
  top: 50%;
  right: max(13px, env(safe-area-inset-right, 0px));
  left: calc(62% + clamp(14px, 2.2vw, 28px));
  width: auto;
  padding: 11px 13px;
  border-radius: 17px;
}

.penalty-match-overlay.has-game-sidebar .penalty-selected-skill > span {
  font-size: 0.72rem;
}

.penalty-match-overlay.has-game-sidebar .penalty-result-callout {
  top: 50%;
  right: max(13px, env(safe-area-inset-right, 0px));
  left: calc(62% + clamp(14px, 2.2vw, 28px));
  width: auto;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  text-align: center;
  white-space: nowrap;
}

.penalty-match-overlay.has-game-sidebar .penalty-shot-label,
.penalty-match-overlay.has-compact-match-timer .penalty-shot-label {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
}

.penalty-shot-label {
  position: absolute;
  z-index: 15;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  top: calc(env(safe-area-inset-top, 0px) + 89px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(36, 23, 31, 0.7);
  font-size: 0.67rem;
  font-weight: 900;
}

.penalty-leave-button {
  position: absolute;
  z-index: 25;
  right: calc(env(safe-area-inset-right, 0px) + 13px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 9px);
  min-width: 58px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(36, 23, 31, 0.64);
  font-size: 0.67rem;
  font-weight: 800;
}

.penalty-game-stage {
  position: absolute;
  inset: 0;
}

.penalty-game-stage::before,
.penalty-game-stage::after {
  content: "";
  position: absolute;
  left: 0.5%;
  bottom: 0;
  width: 62%;
  height: 30vh;
  pointer-events: none;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.penalty-game-stage::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5, 49, 27, 0.24), transparent 29%, rgba(101, 188, 105, 0.16) 44% 56%, transparent 71%, rgba(5, 49, 27, 0.24)),
    linear-gradient(180deg, rgba(5, 42, 23, 0.5), rgba(70, 169, 88, 0.05) 72%),
    linear-gradient(135deg, transparent 0 19%, #126536 19% 25%, transparent 25% 33%, #126536 33% 39%, transparent 39% 100%),
    linear-gradient(225deg, transparent 0 19%, #126536 19% 25%, transparent 25% 33%, #126536 33% 39%, transparent 39% 100%);
  background-color: #2a904d;
  box-shadow: inset 0 10px 20px rgba(5, 39, 21, 0.2);
}

.penalty-game-stage::after {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.72) 0 3px, transparent 4px),
    linear-gradient(to bottom right, transparent 48.5%, rgba(255, 255, 255, 0.54) 49% 51%, transparent 51.5%) 0 0 / 22% 100% no-repeat,
    linear-gradient(to bottom left, transparent 48.5%, rgba(255, 255, 255, 0.54) 49% 51%, transparent 51.5%) 100% 0 / 22% 100% no-repeat,
    linear-gradient(180deg, transparent 0 34%, rgba(255, 255, 255, 0.44) 34.5% 36%, transparent 36.5%);
}

.penalty-goal-wrap {
  --penalty-goal-post: clamp(5px, 0.8vw, 9px);
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 28%;
  width: min(47vw, 550px);
  height: min(44vh, 265px);
  min-height: 150px;
  transform: perspective(800px) rotateX(-1deg);
}

.penalty-goal-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: var(--penalty-goal-post) 1.5% 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(7, 24, 15, 0.08) 0 38%, rgba(7, 24, 15, 0.34) 100%),
    linear-gradient(180deg, rgba(12, 42, 25, 0.3), rgba(28, 86, 50, 0.08) 58%, rgba(7, 24, 15, 0.22));
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}

.penalty-goal-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: var(--penalty-goal-post);
  right: var(--penalty-goal-post);
  left: var(--penalty-goal-post);
  height: 15%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.27) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(245, 250, 247, 0.12), rgba(6, 28, 16, 0.26));
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
}

.penalty-goal-shadow {
  position: absolute;
  z-index: 0;
  right: -2%;
  bottom: -3%;
  left: -2%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.34) 0 38%, rgba(0, 0, 0, 0) 74%);
  filter: blur(4px);
  pointer-events: none;
}

.penalty-goal-net,
.penalty-goal-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.penalty-goal-net {
  z-index: 1;
  inset: 14% 11% 8%;
  border: 1px solid rgba(250, 250, 250, 0.34);
  background-color: rgba(238, 246, 241, 0.08);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, rgba(5, 25, 14, 0.38), rgba(255, 255, 255, 0.02) 58%, rgba(5, 25, 14, 0.26));
  box-shadow:
    inset 0 12px 22px rgba(5, 22, 13, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.18);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}

.penalty-goal-frame {
  z-index: 5;
  background:
    linear-gradient(180deg, #fff 0%, #f5f3ec 42%, #bbb9b2 100%) 0 0 / 100% var(--penalty-goal-post) no-repeat,
    linear-gradient(90deg, #fff 0%, #e5e3dc 54%, #aaa8a2 100%) 0 0 / var(--penalty-goal-post) 100% no-repeat,
    linear-gradient(270deg, #fff 0%, #e5e3dc 54%, #aaa8a2 100%) 100% 0 / var(--penalty-goal-post) 100% no-repeat;
  filter:
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.2))
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.3));
}

.penalty-goal-frame::before,
.penalty-goal-frame::after {
  content: "";
  position: absolute;
  top: var(--penalty-goal-post);
  bottom: 0;
  width: 11%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(8deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(82deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, rgba(5, 24, 13, 0.24), rgba(238, 246, 241, 0.05));
}

.penalty-goal-frame::before {
  left: var(--penalty-goal-post);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  clip-path: polygon(0 0, 100% 14%, 100% 92%, 0 100%);
}

.penalty-goal-frame::after {
  right: var(--penalty-goal-post);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  background-image:
    repeating-linear-gradient(-8deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12px),
    linear-gradient(270deg, rgba(5, 24, 13, 0.24), rgba(238, 246, 241, 0.05));
  clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 92%);
}

.penalty-match-overlay:not(.is-presentation-phase) .penalty-pitch {
  background: #176b3a;
}

.penalty-match-overlay:not(.is-presentation-phase) .penalty-pitch::before {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 62%;
  background: url("../images/penalty/penalty_game_goal_background.webp") center center / cover no-repeat;
}

.penalty-match-overlay:not(.is-presentation-phase) .penalty-pitch::after {
  left: 59%;
  right: auto;
  top: 0;
  bottom: 0;
  width: 5%;
  height: auto;
  background: linear-gradient(90deg, rgba(23, 107, 58, 0), #176b3a 76%);
}

.penalty-match-overlay:not(.is-presentation-phase) .penalty-pitch span,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-game-stage::before,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-game-stage::after,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-wrap::before,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-wrap::after,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-shadow,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-net,
.penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-frame {
  display: none;
}

.penalty-goalkeeper {
  --penalty-keeper-x: 0%;
  --penalty-keeper-y: 0%;
  --penalty-keeper-rotation: 0deg;
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 1%;
  width: 42px;
  height: 94px;
  transform: translateX(-50%);
  transform-origin: 50% 90%;
  transition: transform 1.15s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.penalty-goalkeeper-asset {
  position: absolute;
  display: block;
  left: 50%;
  bottom: -7px;
  width: 120px;
  height: 120px;
  max-width: none;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  user-select: none;
}

.penalty-goalkeeper-asset--center-idle {
  transform: translateX(-50%) scale(0.828, 0.9568);
}

.penalty-goalkeeper-asset--left-high,
.penalty-goalkeeper-asset--right-high {
  transform: translateX(-50%) scale(0.94);
}

.penalty-goalkeeper--lowerLeft {
  --penalty-keeper-x: -155%;
  --penalty-keeper-y: 0%;
}

.penalty-goalkeeper--upperLeft {
  --penalty-keeper-x: -145%;
  --penalty-keeper-y: -48%;
}

.penalty-goalkeeper--lowerRight {
  --penalty-keeper-x: 155%;
  --penalty-keeper-y: 0%;
}

.penalty-goalkeeper--upperRight {
  --penalty-keeper-x: 145%;
  --penalty-keeper-y: -48%;
}

.penalty-goalkeeper--center {
  --penalty-keeper-y: -3%;
}

.penalty-goal-wrap:is(.is-animating, .is-settled) .penalty-goalkeeper {
  transform: translateX(-50%) translate(var(--penalty-keeper-x), var(--penalty-keeper-y)) rotate(var(--penalty-keeper-rotation));
}

.penalty-goal-wrap.is-animating .penalty-goalkeeper {
  animation: penalty-keeper-dive 1.15s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

.penalty-goal-wrap.is-animating .penalty-goalkeeper--center {
  animation-name: penalty-keeper-center;
}

@keyframes penalty-keeper-dive {
  0% { transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1); }
  16% { transform: translateX(-50%) translate(0, 5%) rotate(0deg) scale(1.03, 0.94); }
  100% { transform: translateX(-50%) translate(var(--penalty-keeper-x), var(--penalty-keeper-y)) rotate(var(--penalty-keeper-rotation)) scale(1); }
}

@keyframes penalty-keeper-center {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  18% { transform: translateX(-50%) translateY(6%) scale(1.04, 0.93); }
  58% { transform: translateX(-50%) translateY(-9%) scale(1.03); }
  100% { transform: translateX(-50%) translateY(-3%) scale(1); }
}

.penalty-ball {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 130%;
  width: clamp(18px, 3vw, 30px);
  aspect-ratio: 1;
  border: 2px solid #25252a;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, #222 0 18%, transparent 19%), #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.32);
}

.penalty-goal-wrap.is-animating .penalty-ball {
  animation: penalty-ball-flight 1.25s cubic-bezier(0.22, 0.62, 0.28, 1) forwards;
}

.penalty-goal-wrap.is-settled .penalty-ball {
  left: var(--penalty-ball-x);
  top: var(--penalty-ball-y);
}

@keyframes penalty-ball-flight {
  0% { left: 50%; top: 130%; transform: translate(-50%, -50%) scale(1.45) rotate(0deg); }
  100% { left: var(--penalty-ball-x); top: var(--penalty-ball-y); transform: translate(-50%, -50%) scale(0.76) rotate(420deg); }
}

.penalty-target-layer {
  position: absolute;
  z-index: 12;
  inset: 6%;
}

.penalty-target {
  position: absolute;
  width: clamp(36px, 5.4vw, 56px);
  height: clamp(36px, 5.4vw, 56px);
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(187, 16, 47, 0.65);
  box-shadow: 0 0 0 5px rgba(187, 16, 47, 0.16);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.penalty-target::after {
  content: "";
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: #fff;
}

.penalty-target:disabled { cursor: default; opacity: 0.38; }
.penalty-target.is-selected { opacity: 1; background: #171820; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.25); }
.penalty-target--tl { left: 12%; top: 18%; }
.penalty-target--tc { left: 50%; top: 18%; }
.penalty-target--tr { left: 88%; top: 18%; }
.penalty-target--bfl { left: 7%; top: 81%; }
.penalty-target--bl { left: 31%; top: 81%; }
.penalty-target--bc { left: 50%; top: 81%; }
.penalty-target--br { left: 69%; top: 81%; }
.penalty-target--bfr { left: 93%; top: 81%; }

.penalty-target-layer.is-keeper {
  inset: 2%;
}

.penalty-target.is-keeper {
  width: 31%;
  height: 46%;
  border-width: 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: none;
}

.penalty-target.is-keeper::after { display: none; }
.penalty-target.is-keeper.penalty-target--tl { left: 17%; top: 24%; }
.penalty-target.is-keeper.penalty-target--bl { left: 17%; top: 75%; }
.penalty-target.is-keeper.penalty-target--c { left: 50%; top: 50%; height: 96%; }
.penalty-target.is-keeper.penalty-target--tr { left: 83%; top: 24%; }
.penalty-target.is-keeper.penalty-target--br { left: 83%; top: 75%; }

.penalty-selected-skill {
  position: absolute;
  z-index: 14;
  right: calc(env(safe-area-inset-right, 0px) + 5%);
  top: 33%;
  width: min(34vw, 410px);
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(36, 23, 31, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.penalty-kicker-layer {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 94px) calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 46px) calc(env(safe-area-inset-left, 0px) + 18px);
  background: rgba(18, 29, 23, 0.48);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.penalty-kicker-card {
  width: min(720px, 82vw);
  max-height: 100%;
  padding: 18px 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 17px;
  background: rgba(46, 31, 40, 0.95);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
  text-align: center;
  pointer-events: auto;
}

.penalty-kicker-layer.is-reveal .penalty-kicker-card {
  pointer-events: none;
}

.penalty-kicker-card h2 {
  margin: 0 0 13px;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
}

.penalty-kicker-status,
.penalty-kicker-hint {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  line-height: 1.25;
}

.penalty-kicker-status {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  margin: -5px 0 10px;
}

.penalty-kicker-status .penalty-loader {
  width: 14px;
  height: 14px;
  margin: 0;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #ffd86a;
}

.penalty-skill-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.penalty-skill {
  position: relative;
  min-width: 0;
  min-height: 128px;
  display: grid;
  gap: 9px;
  align-items: center;
  justify-items: center;
  padding: 12px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

button.penalty-skill:not(:disabled):hover {
  border-color: rgba(255, 216, 106, 0.72);
  background: rgba(255, 255, 255, 0.17);
  transform: translateY(-2px);
}

.penalty-skill:not(button) {
  cursor: default;
}

.penalty-skill.is-used {
  opacity: 0.34;
  cursor: default;
}

.penalty-skill.is-selected {
  z-index: 1;
  border-color: #ffd86a;
  background: rgba(255, 216, 106, 0.15);
  box-shadow: 0 0 0 2px rgba(255, 216, 106, 0.3), 0 0 24px rgba(255, 216, 106, 0.28);
  transform: scale(1.045);
}

.penalty-skill.is-unselected {
  opacity: 0.36;
}

.penalty-skill:focus-visible {
  outline: 2px solid #ffd86a;
  outline-offset: 2px;
}

.penalty-kicker-player {
  position: relative;
  display: block;
  width: 44px;
  height: 58px;
}

.penalty-kicker-player i,
.penalty-kicker-player b {
  position: absolute;
  display: block;
}

.penalty-kicker-player i {
  left: 13px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eec29f;
}

.penalty-kicker-player b {
  left: 7px;
  top: 19px;
  width: 30px;
  height: 35px;
  border-radius: 10px 10px 5px 5px;
  background: #f1eee8;
}

.penalty-kicker-player b::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 29px;
  width: 20px;
  height: 11px;
  border: solid #28282d;
  border-width: 0 6px;
}

.penalty-kicker-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #2e1f28;
  background: #ffd86a;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  font-weight: 900;
}

.penalty-skill-stars {
  position: relative;
  display: inline-block;
  width: max-content;
  overflow: hidden;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.penalty-skill-stars-empty {
  color: rgba(255, 255, 255, 0.25);
}

.penalty-skill-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--penalty-skill-fill);
  overflow: hidden;
  color: #ffd86a;
  white-space: nowrap;
}

.penalty-skill.is-used .penalty-skill-stars-fill {
  color: rgba(255, 255, 255, 0.42);
}

.penalty-selected-skill {
  top: 36%;
  width: min(25vw, 260px);
  display: grid;
  gap: 2px;
  text-align: center;
}

.penalty-selected-skill > span { color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; }
.penalty-selected-skill strong { display: flex; justify-content: center; margin-top: 5px; }
.penalty-selected-skill .penalty-skill-stars { font-size: clamp(1rem, 2.1vw, 1.35rem); }
.penalty-stage-badge { color: #ffd86a !important; font-weight: 900; text-transform: uppercase; }

.penalty-lock-note {
  position: absolute;
  z-index: 14;
  left: 8%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 7px);
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(36, 23, 31, 0.7);
  font-size: 0.7rem;
  font-weight: 800;
}

.penalty-role-reveal,
.penalty-finish-layer,
.penalty-pause-layer {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 86px) calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 18px);
  background: rgba(18, 29, 23, 0.58);
  backdrop-filter: blur(5px);
}

.penalty-role-reveal section,
.penalty-pause-layer section,
.penalty-finish-card {
  width: min(430px, 72vw);
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 17px;
  background: rgba(46, 31, 40, 0.94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
  text-align: center;
}

.penalty-role-reveal h2,
.penalty-pause-layer h2,
.penalty-finish-card h2 {
  margin: 7px 0;
}

.penalty-role-reveal p,
.penalty-pause-layer p,
.penalty-finish-card p {
  margin: 7px 0;
  color: rgba(255, 255, 255, 0.72);
}

.penalty-presentation-layer {
  --penalty-presentation-safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(var(--penalty-presentation-safe-x) + 14px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(var(--penalty-presentation-safe-x) + 14px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, transparent 12.5% 25%, rgba(255, 255, 255, 0.035) 25% 37.5%, transparent 37.5% 50%, rgba(255, 255, 255, 0.035) 50% 62.5%, transparent 62.5% 75%, rgba(255, 255, 255, 0.035) 75% 87.5%, transparent 87.5%),
    radial-gradient(circle at 50% 24%, rgba(73, 204, 124, 0.16), transparent 36%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.25), transparent 60%),
    linear-gradient(180deg, #16864a 0%, #0e653c 58%, #0b4d2e 100%);
  backdrop-filter: none;
}

.penalty-presentation-card,
.penalty-role-reveal .penalty-presentation-card {
  width: 100%;
  max-width: 1080px;
  max-height: 100%;
  overflow: hidden;
  padding: 18px 28px 20px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  background: linear-gradient(160deg, #704157 0%, #583345 44%, #402534 100%);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
}

.penalty-presentation-top {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.penalty-presentation-badge {
  min-height: 52px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 8px 18px;
  border: 3px solid rgba(255, 213, 90, 0.28);
  border-radius: 999px;
  color: #ffe06a;
  background: rgba(255, 218, 97, 0.08);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.1em;
}

.penalty-presentation-badge-icon,
.penalty-presentation-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4a2c07;
  background: linear-gradient(#fff0a4, #ffd24e);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  font-weight: 1000;
  letter-spacing: 0;
}

.penalty-presentation-badge-icon {
  width: 34px;
  height: 34px;
}

.penalty-presentation-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  font-size: 19px;
}

.penalty-presentation-timer {
  min-width: 138px;
  padding: 8px 14px;
  border-radius: 20px;
  color: #4a2c08;
  background: linear-gradient(180deg, #ffefa1, #ffd14c);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.penalty-presentation-timer small {
  display: block;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.penalty-presentation-timer strong {
  display: block;
  margin-top: 1px;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.penalty-presentation-header {
  margin: 10px 0 12px;
  text-align: center;
}

.penalty-presentation-header h2,
.penalty-role-reveal .penalty-presentation-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4.3vw, 47px);
  font-weight: 1000;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.penalty-presentation-header p,
.penalty-role-reveal .penalty-presentation-header p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(13px, 1.8vw, 18px);
  font-weight: 650;
}

.penalty-presentation-card .penalty-presentation-cta {
  width: min(620px, 70%);
  min-height: 62px;
  padding: 8px 20px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(180deg, #f64b64 0%, #d1173e 100%);
  box-shadow: 0 9px 0 #96132f, 0 17px 26px rgba(0, 0, 0, 0.27);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 1000;
}

.penalty-presentation-card .penalty-presentation-cta:disabled {
  box-shadow: 0 5px 0 rgba(89, 33, 48, 0.75), 0 10px 18px rgba(0, 0, 0, 0.2);
}

.penalty-coin-ready-layer {
  pointer-events: none;
}

.penalty-role-reveal .penalty-coin-ready-card {
  pointer-events: auto;
}

.penalty-role-reveal .penalty-coin-ready-intro {
  margin-top: 7px;
}

.penalty-coin-ready-symbol {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 4px auto 11px;
  border: 6px double rgba(103, 59, 5, 0.72);
  border-radius: 50%;
  color: #5a3606;
  background: radial-gradient(circle at 34% 27%, #fff3b0 0 9%, #ffd860 31%, #dfa021 69%, #9a6007 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 246, 181, 0.4), inset -7px -7px 13px rgba(90, 48, 0, 0.22), 0 10px 20px rgba(0, 0, 0, 0.26);
  font-size: 16px;
  font-weight: 1000;
}

.penalty-coin-ready-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.penalty-coin-ready-player {
  min-width: 0;
  min-height: 64px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(90deg, rgba(25, 14, 21, 0.58), rgba(35, 20, 29, 0.35));
}

.penalty-presentation-player-name {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(20px, 2.8vw, 29px);
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-coin-ready-vs {
  color: rgba(255, 255, 255, 0.58);
  font-size: 16px;
  font-weight: 900;
}

.penalty-coin-ready-actions {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-top: 15px;
}

.penalty-role-reveal .penalty-coin-ready-status,
.penalty-role-reveal .penalty-coin-ready-help {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.penalty-role-reveal .penalty-coin-ready-status {
  display: grid;
  gap: 3px;
  color: #ffe06a;
  font-size: 13px;
  font-weight: 900;
}

.penalty-coin-ready-status span {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.penalty-coin-ready-status .penalty-loader {
  width: 13px;
  height: 13px;
  margin: 0;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #ffd86a;
}

.penalty-coin-toss-card {
  text-align: center;
}

.penalty-coin-toss-card .penalty-presentation-header {
  margin: 5px 0 1px;
}

.penalty-coin-toss-card .penalty-presentation-header p {
  font-size: 13px;
}

.penalty-coin-toss-arena {
  position: relative;
  height: clamp(108px, 28vh, 155px);
  display: grid;
  place-items: center;
  perspective: 850px;
}

.penalty-coin-glow {
  position: absolute;
  width: 180px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 215, 83, 0.28), transparent 70%);
  filter: blur(7px);
  transform: translateY(43px);
}

.penalty-coin {
  position: relative;
  width: clamp(92px, 13vw, 120px);
  aspect-ratio: 1;
  animation: penalty-coin-flight var(--penalty-coin-duration, 4000ms) var(--penalty-coin-delay, 0ms) both cubic-bezier(0.2, 0.72, 0.22, 1);
}

.penalty-coin-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.penalty-coin-toss-layer.is-winner-a .penalty-coin-inner {
  animation: penalty-coin-spin-a var(--penalty-coin-duration, 4000ms) var(--penalty-coin-delay, 0ms) both cubic-bezier(0.15, 0.68, 0.2, 1);
}

.penalty-coin-toss-layer.is-winner-b .penalty-coin-inner {
  animation: penalty-coin-spin-b var(--penalty-coin-duration, 4000ms) var(--penalty-coin-delay, 0ms) both cubic-bezier(0.15, 0.68, 0.2, 1);
}

.penalty-coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 7px double rgba(105, 61, 6, 0.72);
  border-radius: 50%;
  color: #5c3705;
  background: radial-gradient(circle at 35% 28%, #fff1a8 0 10%, #ffd86a 31%, #d89918 70%, #9c6107 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 245, 178, 0.42), inset -8px -8px 14px rgba(111, 60, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.32);
  backface-visibility: hidden;
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(255, 250, 207, 0.62);
}

.penalty-coin-face--b {
  transform: rotateY(180deg);
}

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

.penalty-coin-player {
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 56px;
  gap: 11px;
  margin: 0;
  padding: 7px 14px;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(90deg, rgba(25, 14, 21, 0.58), rgba(35, 20, 29, 0.35));
  text-align: left;
}

.penalty-coin-player strong {
  flex: 0 0 auto;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #3b2608;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(#fff0a4, #ffd24e);
  font-size: 17px;
}

.penalty-coin-player span {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(20px, 2.7vw, 27px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-coin-result {
  display: grid;
  gap: 3px;
  justify-items: center;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(5px);
  visibility: hidden;
  animation: penalty-coin-result var(--penalty-coin-duration, 4000ms) var(--penalty-coin-delay, 0ms) both ease-out;
}

.penalty-coin-result-chip {
  padding: 5px 14px;
  border-radius: 999px;
  color: #4c2d08 !important;
  background: #ffda61;
  font-size: 10px !important;
  font-weight: 1000;
  letter-spacing: 0.11em;
}

.penalty-coin-result strong {
  max-width: 100%;
  overflow: hidden;
  color: #ffd86a;
  font-size: clamp(22px, 3.3vw, 32px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-coin-result span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
}

@keyframes penalty-coin-flight {
  0% { transform: translateY(10px) scale(0.92); }
  18% { transform: translateY(-18px) scale(1.04); }
  58% { transform: translateY(-12px) scale(1.02); }
  76% { transform: translateY(2px) scale(1); }
  82% { transform: translateY(-4px) scale(1); }
  88%, 100% { transform: translateY(0) scale(1); }
}

@keyframes penalty-coin-spin-a {
  0% { transform: rotateX(18deg) rotateY(0deg); }
  62% { transform: rotateX(-8deg) rotateY(1260deg); }
  78%, 100% { transform: rotateX(0deg) rotateY(1440deg); }
}

@keyframes penalty-coin-spin-b {
  0% { transform: rotateX(18deg) rotateY(0deg); }
  62% { transform: rotateX(-8deg) rotateY(1440deg); }
  78%, 100% { transform: rotateX(0deg) rotateY(1620deg); }
}

@keyframes penalty-coin-result {
  0%, 76% { opacity: 0; transform: translateY(5px); visibility: hidden; }
  82%, 100% { opacity: 1; transform: translateY(0); visibility: visible; }
}

.penalty-pause-layer section > strong {
  display: block;
  margin-top: 10px;
  color: #ffd86a;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.penalty-grace-warning {
  position: absolute;
  z-index: 24;
  right: 28%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  left: 28%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 216, 106, 0.55);
  border-radius: 10px;
  color: #281d13;
  background: #ffd86a;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.penalty-result-callout {
  position: absolute;
  z-index: 18;
  right: 8%;
  top: 43%;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4.7rem);
  font-weight: 1000;
  letter-spacing: -0.05em;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: scale(0.6) rotate(-4deg);
  animation: none;
}

.penalty-result-callout.is-revealed {
  animation: penalty-result-pop 0.3s both;
}

.penalty-result-callout.is-settled {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
  animation: none;
}

@keyframes penalty-result-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(-2deg); }
}

.penalty-round-summary-layer {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.penalty-round-summary-card {
  pointer-events: auto;
}

.penalty-round-summary-card .penalty-presentation-header {
  margin-bottom: 14px;
}

.penalty-round-summary-results {
  display: grid;
  gap: 12px;
}

.penalty-round-summary-row {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 11px 18px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-radius: 21px;
  background: linear-gradient(90deg, rgba(29, 16, 24, 0.55), rgba(66, 42, 55, 0.42));
  text-align: left;
}

.penalty-round-summary-player {
  min-width: 0;
  display: flex;
  gap: 15px;
  align-items: center;
}

.penalty-round-summary-player .penalty-presentation-avatar {
  width: 54px;
  height: 54px;
  border-width: 3px;
  font-size: 22px;
}

.penalty-round-summary-player-copy {
  min-width: 0;
  display: grid;
}

.penalty-round-summary-player-copy strong {
  overflow: hidden;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty-round-summary-player-copy small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 800;
}

.penalty-round-summary-lamps {
  display: inline-flex;
  gap: 11px;
  align-items: center;
}

.penalty-round-summary-lamps .penalty-lamp {
  width: 34px;
  height: 34px;
  border-width: 4px;
  background: #828487;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.penalty-round-summary-lamps .penalty-lamp.is-goal {
  border-color: #8dffb7;
  background: #3bdd7a;
  box-shadow: 0 0 15px rgba(59, 221, 122, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.penalty-round-summary-lamps .penalty-lamp.is-miss {
  border-color: #ff96aa;
  background: #ff5571;
  box-shadow: 0 0 15px rgba(255, 85, 113, 0.65), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.penalty-round-summary-actions {
  min-height: 143px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  margin-top: 14px;
  text-align: center;
}

.penalty-round-summary-prompt,
.penalty-round-summary-ready {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.penalty-round-summary-ready {
  color: #ffd86a;
  font-weight: 800;
}

.penalty-winner-card {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 215, 83, 0.08), transparent 31%),
    linear-gradient(160deg, #704157 0%, #583345 44%, #402534 100%);
}

.penalty-winner-card .penalty-presentation-top,
.penalty-winner-main,
.penalty-winner-actions {
  position: relative;
  z-index: 3;
}

.penalty-winner-main {
  display: grid;
  justify-items: center;
  margin-top: -3px;
}

.penalty-winner-kicker {
  margin: 0 0 1px;
  color: #ffe06a;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.penalty-winner-trophy-wrap {
  position: relative;
  width: 118px;
  height: 108px;
  display: grid;
  place-items: center;
}

.penalty-winner-trophy-glow {
  position: absolute;
  width: 130px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 213, 76, 0.28), transparent 70%);
  filter: blur(8px);
}

.penalty-winner-trophy {
  position: relative;
  z-index: 2;
  font-size: 74px;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 14px rgba(255, 211, 72, 0.2));
  animation: penalty-winner-trophy-in 0.65s cubic-bezier(0.18, 0.75, 0.25, 1.2) both;
}

@keyframes penalty-winner-trophy-in {
  from { opacity: 0; transform: translateY(10px) scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

.penalty-winner-label {
  margin-top: -3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.penalty-winner-name {
  width: 100%;
  max-width: 85%;
  margin: 2px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 1000;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-overflow: ellipsis;
  text-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.penalty-winner-score {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 17px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(28, 16, 23, 0.38);
  font-size: 14px;
  font-weight: 800;
}

.penalty-winner-score strong {
  color: #ffe06a;
  font-size: 19px;
  font-weight: 1000;
}

.penalty-winner-actions {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-top: 11px;
}

.penalty-winner-card .penalty-winner-button {
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 18px;
  box-shadow: 0 4px 0 #96132f, 0 9px 15px rgba(0, 0, 0, 0.23);
  font-size: clamp(20px, 2.7vw, 27px);
  line-height: 1.05;
}

.penalty-winner-card .penalty-winner-button:disabled {
  box-shadow: 0 4px 0 rgba(89, 33, 48, 0.75), 0 9px 15px rgba(0, 0, 0, 0.18);
}

.penalty-winner-auto {
  margin: 0;
  color: rgba(255, 255, 255, 0.77);
  font-size: 12px;
  font-weight: 700;
}

.penalty-winner-auto strong {
  color: #ffe06a;
  font-variant-numeric: tabular-nums;
}

.penalty-winner-confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.penalty-winner-confetti span {
  position: absolute;
  top: -12%;
  width: 9px;
  height: 18px;
  border-radius: 3px;
  opacity: 0.9;
  animation: penalty-winner-confetti-fall 4.3s linear infinite;
}

.penalty-winner-confetti span:nth-child(1) { left: 7%; background: #ffd64f; animation-delay: -0.4s; }
.penalty-winner-confetti span:nth-child(2) { left: 14%; background: #ff536d; animation-delay: -2.3s; }
.penalty-winner-confetti span:nth-child(3) { left: 22%; background: #5ce491; animation-delay: -1.2s; }
.penalty-winner-confetti span:nth-child(4) { left: 31%; background: #fff0a0; animation-delay: -3.1s; }
.penalty-winner-confetti span:nth-child(5) { left: 40%; background: #ff536d; animation-delay: -0.8s; }
.penalty-winner-confetti span:nth-child(6) { left: 49%; background: #ffd64f; animation-delay: -2.7s; }
.penalty-winner-confetti span:nth-child(7) { left: 58%; background: #62e799; animation-delay: -1.5s; }
.penalty-winner-confetti span:nth-child(8) { left: 67%; background: #fff0a0; animation-delay: -3.5s; }
.penalty-winner-confetti span:nth-child(9) { left: 76%; background: #ff536d; animation-delay: -1.8s; }
.penalty-winner-confetti span:nth-child(10) { left: 84%; background: #ffd64f; animation-delay: -0.1s; }
.penalty-winner-confetti span:nth-child(11) { left: 91%; background: #5ce491; animation-delay: -2.1s; }
.penalty-winner-confetti span:nth-child(12) { left: 96%; background: #fff0a0; animation-delay: -3.8s; }

@keyframes penalty-winner-confetti-fall {
  from { transform: translateY(-20px) rotate(0deg); }
  to { transform: translateY(620px) rotate(620deg); }
}

@media (prefers-reduced-motion: reduce) {
  .penalty-winner-trophy,
  .penalty-winner-confetti span {
    animation: none;
  }

  .penalty-winner-confetti {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .penalty-coin,
  .penalty-coin-inner,
  .penalty-coin-result {
    animation: none !important;
  }

  .penalty-coin-toss-layer.is-winner-a .penalty-coin-inner { transform: rotateY(0deg); }
  .penalty-coin-toss-layer.is-winner-b .penalty-coin-inner { transform: rotateY(180deg); }
  .penalty-coin-result { opacity: 1; transform: none; visibility: visible; }

  .penalty-goal-wrap.is-animating .penalty-ball,
  .penalty-goal-wrap.is-animating .penalty-goalkeeper,
  .penalty-result-callout {
    animation-duration: 0.01ms;
    animation-delay: 0.01ms;
  }
}

.penalty-final-score {
  color: #fff !important;
  font-size: 2.4rem;
  font-weight: 1000;
  line-height: 1;
}

.penalty-final-lamps {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  text-align: left;
}

.penalty-finish-note,
.penalty-test-note {
  font-size: 0.72rem;
}

.penalty-test-note { color: #ffd86a !important; font-weight: 900; }

.penalty-test-controls {
  position: absolute;
  z-index: 40;
  right: calc(env(safe-area-inset-right, 0px) + 82px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 7px);
  display: grid;
  gap: 3px;
  padding: 4px;
  border-radius: 9px;
  background: rgba(36, 23, 31, 0.84);
  font-size: 0.54rem;
  text-align: center;
}

.penalty-test-controls strong { color: #ffd86a; }
.penalty-test-controls > div { display: flex; gap: 2px; }
.penalty-test-controls button { min-width: 48px; min-height: 34px; padding: 0 7px; border: 0; border-radius: 6px; color: #fff; background: rgba(255,255,255,.12); font-size: .62rem; font-weight: 800; }
.penalty-test-controls button.is-active { color: #2e1f28; background: #ffd86a; }

.penalty-game-error {
  position: absolute;
  z-index: 45;
  top: 92px;
  right: 16px;
  max-width: 48%;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 245, 245, 0.94);
  font-size: 0.67rem;
  font-weight: 800;
}

.penalty-orientation-guard {
  display: none;
  position: absolute;
  z-index: 100;
  inset: 0;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: linear-gradient(145deg, #33212a, #68152d);
}

.penalty-rotate-card {
  text-align: center;
}

.penalty-rotate-card > span {
  position: relative;
  display: block;
  width: 54px;
  height: 86px;
  margin: 0 auto 22px;
  border: 4px solid #fff;
  border-radius: 10px;
  animation: penalty-phone-rotate 1.8s ease-in-out infinite;
}

.penalty-rotate-card > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.penalty-rotate-card h1 { margin: 0 0 7px; font-size: 1.65rem; }
.penalty-rotate-card p { margin: 0; color: rgba(255, 255, 255, 0.72); }

@keyframes penalty-phone-rotate {
  0%, 25% { transform: rotate(0); }
  65%, 100% { transform: rotate(90deg); }
}

@media (orientation: portrait) and (max-width: 900px) {
  .penalty-match-overlay > :not(.penalty-orientation-guard) { visibility: hidden; }
  .penalty-orientation-guard { display: grid; visibility: visible; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .penalty-game-hud {
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    min-height: 58px;
    grid-template-columns: minmax(0, 1.2fr) 68px minmax(225px, 1fr);
    padding: 5px;
  }

  .penalty-role-copy small { display: none; }
  .penalty-role-copy strong { font-size: 0.82rem; }
  .penalty-score-line { font-size: 0.62rem; }
  .penalty-lamp { width: 7px; height: 7px; }
  .penalty-shot-label { top: calc(env(safe-area-inset-top, 0px) + 69px); }
  .penalty-game-stage::before,
  .penalty-game-stage::after { height: 29vh; }
  .penalty-goal-wrap { top: 26%; width: min(46.5vw, 520px); height: 45vh; min-height: 128px; }
  .penalty-kicker-layer { padding-top: calc(env(safe-area-inset-top, 0px) + 72px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); }
  .penalty-kicker-card { padding: 13px 16px 12px; }
  .penalty-kicker-card h2 { margin-bottom: 10px; font-size: 1rem; }
  .penalty-kicker-status { margin-bottom: 8px; }
  .penalty-kicker-hint { margin-top: 7px; }
  .penalty-skill-grid { gap: 8px; }
  .penalty-skill { min-height: 108px; padding: 8px 5px; }
  .penalty-selected-skill { top: 34%; padding: 10px; }
  .penalty-role-reveal,
  .penalty-coin-toss-layer,
  .penalty-finish-layer,
  .penalty-pause-layer { padding-top: calc(env(safe-area-inset-top, 0px) + 68px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7px); }
  .penalty-role-reveal section,
  .penalty-pause-layer section,
  .penalty-finish-card { padding: 11px 16px; }
  .penalty-finish-card h2 { margin: 3px 0; font-size: 1.1rem; }
  .penalty-final-score { margin: 3px 0 !important; font-size: 1.7rem; }
  .penalty-final-lamps { margin: 6px 0; padding: 7px; }
  .penalty-finish-note { margin: 3px 0 !important; }
  .penalty-finish-card .action-btn { min-height: 38px; }
  .penalty-test-controls { bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }

  .penalty-game-sidebar {
    gap: 6px;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(9px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 54px) 12px;
  }
  .penalty-game-sidebar-top { grid-template-columns: minmax(0, 1fr) 82px; gap: 6px; }
  .penalty-game-sidebar-role { padding: 7px 9px; border-radius: 13px; }
  .penalty-game-sidebar-role strong { margin-top: 3px; font-size: 0.82rem; }
  .penalty-game-sidebar-timer { padding: 6px 7px; border-radius: 13px; }
  .penalty-game-sidebar-timer strong { font-size: 1.25rem; }
  .penalty-game-sidebar-score { padding: 8px 9px 9px; border-radius: 15px; }
  .penalty-game-sidebar-score-head { margin-bottom: 2px; }
  .penalty-game-sidebar-score-head strong { font-size: 0.70rem; }
  .penalty-game-sidebar .penalty-score-line { min-height: 32px; padding-block: 4px; }
  .penalty-game-sidebar .penalty-score-name { font-size: 0.78rem; }
  .penalty-match-overlay.has-game-sidebar .penalty-selected-skill { top: 50%; right: max(9px, env(safe-area-inset-right, 0px)); left: calc(62% + 12px); padding: 7px 11px; }
  .penalty-match-overlay.has-game-sidebar .penalty-result-callout { top: 50%; right: max(9px, env(safe-area-inset-right, 0px)); left: calc(62% + 12px); }
  .penalty-compact-match-timer { top: max(20px, env(safe-area-inset-top, 0px)); min-width: 94px; padding: 6px 10px; border-radius: 13px; }
  .penalty-compact-match-timer strong { font-size: 1.3rem; }

  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(var(--penalty-presentation-safe-x) + 12px) calc(env(safe-area-inset-bottom, 0px) + 6px) calc(var(--penalty-presentation-safe-x) + 12px);
  }

  .penalty-presentation-card,
  .penalty-role-reveal .penalty-presentation-card {
    width: 100%;
    max-width: 1080px;
    max-height: 100%;
    padding: 10px 22px 12px;
    border-radius: 25px;
  }

  .penalty-presentation-badge { min-height: 42px; padding: 5px 15px; font-size: 11px; }
  .penalty-presentation-badge-icon { width: 29px; height: 29px; }
  .penalty-presentation-timer { min-width: 120px; padding: 6px 12px; }
  .penalty-presentation-timer strong { font-size: 27px; }
  .penalty-presentation-header { margin: 5px 0 7px; }
  .penalty-presentation-header h2,
  .penalty-role-reveal .penalty-presentation-header h2 { font-size: 34px; }
  .penalty-presentation-header p,
  .penalty-role-reveal .penalty-presentation-header p { margin-top: 4px; font-size: 13px; }
  .penalty-presentation-card .penalty-presentation-cta { min-height: 45px; border-radius: 16px; box-shadow: 0 6px 0 #96132f, 0 11px 18px rgba(0, 0, 0, 0.24); font-size: 21px; }
  .penalty-coin-ready-card .penalty-presentation-cta { height: 41px; min-height: 41px; padding: 0 20px; box-shadow: 0 3px 0 #96132f, 0 7px 12px rgba(0, 0, 0, 0.22); font-size: 20px; line-height: 1.05; }
  .penalty-coin-ready-card .penalty-presentation-cta:disabled { box-shadow: 0 3px 0 rgba(89, 33, 48, 0.75), 0 7px 12px rgba(0, 0, 0, 0.18); }

  .penalty-winner-main { margin-top: -10px; }
  .penalty-winner-kicker { font-size: 10px; }
  .penalty-winner-trophy-wrap { width: 85px; height: 75px; }
  .penalty-winner-trophy-glow { width: 105px; height: 60px; }
  .penalty-winner-trophy { font-size: 54px; }
  .penalty-winner-label { font-size: 10px; }
  .penalty-winner-name { font-size: clamp(34px, 5vw, 46px); }
  .penalty-winner-score { margin-top: 5px; padding: 4px 13px; font-size: 11px; }
  .penalty-winner-score strong { font-size: 15px; }
  .penalty-winner-actions { gap: 5px; margin-top: 8px; }
  .penalty-winner-card .penalty-winner-button { height: 41px; min-height: 41px; padding: 0 20px; border-radius: 15px; box-shadow: 0 3px 0 #96132f, 0 7px 12px rgba(0, 0, 0, 0.22); font-size: 20px; }
  .penalty-winner-card .penalty-winner-button:disabled { box-shadow: 0 3px 0 rgba(89, 33, 48, 0.75), 0 7px 12px rgba(0, 0, 0, 0.18); }
  .penalty-winner-auto { font-size: 10px; }

  .penalty-coin-ready-symbol { width: 55px; height: 55px; margin: 2px auto 7px; border-width: 4px; font-size: 13px; }
  .penalty-coin-ready-player { min-height: 48px; padding: 6px 12px; }
  .penalty-coin-ready-player .penalty-presentation-avatar { width: 34px; height: 34px; font-size: 16px; }
  .penalty-presentation-player-name { font-size: 22px; }
  .penalty-coin-ready-actions { gap: 4px; margin-top: 8px; }
  .penalty-role-reveal .penalty-coin-ready-status { font-size: 11px; }
  .penalty-role-reveal .penalty-coin-ready-help { font-size: 11px; }

  .penalty-coin-toss-card .penalty-presentation-header { margin: 3px 0 0; }
  .penalty-coin-toss-card .penalty-presentation-header p { margin-top: 3px; font-size: 11px; }
  .penalty-coin-toss-arena { height: 96px; }
  .penalty-coin { width: 76px; }
  .penalty-coin-face { border-width: 5px; font-size: 35px; }
  .penalty-coin-player { min-height: 44px; padding: 5px 11px; }
  .penalty-coin-player strong { width: 31px; height: 31px; }
  .penalty-coin-player span { font-size: 20px; }
  .penalty-coin-result { margin-top: 5px; }
  .penalty-coin-result strong { font-size: 23px; }
  .penalty-coin-result span { font-size: 11px; }

  .penalty-round-summary-card .penalty-presentation-header { margin: 3px 0 4px; }
  .penalty-round-summary-results { gap: 5px; }
  .penalty-round-summary-row { min-height: 48px; padding: 3px 13px; border-radius: 17px; }
  .penalty-round-summary-player { gap: 10px; }
  .penalty-round-summary-player .penalty-presentation-avatar { width: 37px; height: 37px; font-size: 17px; }
  .penalty-round-summary-player-copy strong { font-size: 21px; }
  .penalty-round-summary-player-copy small { font-size: 10px; }
  .penalty-round-summary-lamps { gap: 7px; }
  .penalty-round-summary-lamps .penalty-lamp { width: 24px; height: 24px; border-width: 3px; }
  .penalty-round-summary-actions { min-height: 90px; gap: 2px; margin-top: 3px; }
  .penalty-round-summary-prompt,
  .penalty-round-summary-ready { font-size: 10px; }
  .penalty-round-summary-card .penalty-presentation-cta { min-height: 41px; box-shadow: 0 3px 0 #96132f, 0 7px 12px rgba(0, 0, 0, 0.22); font-size: 20px; }
  .penalty-round-summary-card .penalty-presentation-cta:disabled { box-shadow: 0 2px 0 rgba(89, 33, 48, 0.75), 0 6px 10px rgba(0, 0, 0, 0.18); }
  .penalty-round-summary-card .penalty-presentation-cta + .penalty-round-summary-ready { margin-top: 4px; }
}

@media (display-mode: standalone) and (orientation: landscape) {
  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    --penalty-presentation-safe-y: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    padding: calc(var(--penalty-presentation-safe-y) + 14px) calc(var(--penalty-presentation-safe-x) + 14px) calc(var(--penalty-presentation-safe-y) + 14px) calc(var(--penalty-presentation-safe-x) + 14px);
  }
}

@media (display-mode: standalone) and (orientation: landscape) and (max-height: 520px) {
  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    padding: calc(var(--penalty-presentation-safe-y) + 6px) calc(var(--penalty-presentation-safe-x) + 12px) calc(var(--penalty-presentation-safe-y) + 6px) calc(var(--penalty-presentation-safe-x) + 12px);
  }
}

@media (display-mode: standalone) and (orientation: landscape) and (max-height: 440px) {
  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    padding: calc(var(--penalty-presentation-safe-y) + 5px) calc(var(--penalty-presentation-safe-x) + 10px) calc(var(--penalty-presentation-safe-y) + 5px) calc(var(--penalty-presentation-safe-x) + 10px);
  }

  .penalty-presentation-card,
  .penalty-role-reveal .penalty-presentation-card {
    padding: 8px 20px 10px;
    border-radius: 23px;
  }

  .penalty-presentation-badge { min-height: 38px; padding: 4px 13px; font-size: 10px; }
  .penalty-presentation-badge-icon { width: 26px; height: 26px; }
  .penalty-presentation-timer { min-width: 112px; padding: 5px 11px; border-radius: 17px; }
  .penalty-presentation-timer small { font-size: 10px; }
  .penalty-presentation-timer strong { font-size: 24px; }
  .penalty-presentation-header { margin: 4px 0 5px; }
  .penalty-presentation-header h2,
  .penalty-role-reveal .penalty-presentation-header h2 { font-size: 31px; }
  .penalty-presentation-header p,
  .penalty-role-reveal .penalty-presentation-header p { margin-top: 3px; font-size: 12px; }
  .penalty-presentation-card .penalty-presentation-cta { min-height: 42px; font-size: 20px; }
  .penalty-coin-ready-card .penalty-presentation-cta { height: 40px; min-height: 40px; padding: 0 18px; box-shadow: 0 3px 0 #96132f, 0 7px 11px rgba(0, 0, 0, 0.2); font-size: 19px; line-height: 1.05; }
  .penalty-coin-ready-card .penalty-presentation-cta:disabled { box-shadow: 0 3px 0 rgba(89, 33, 48, 0.75), 0 7px 11px rgba(0, 0, 0, 0.17); }

  .penalty-winner-main { margin-top: -12px; }
  .penalty-winner-trophy-wrap { width: 78px; height: 68px; }
  .penalty-winner-trophy-glow { width: 96px; height: 54px; }
  .penalty-winner-trophy { font-size: 50px; }
  .penalty-winner-name { font-size: clamp(32px, 5vw, 42px); }
  .penalty-winner-score { margin-top: 4px; padding-block: 3px; }
  .penalty-winner-actions { gap: 3px; margin-top: 5px; }
  .penalty-winner-card .penalty-winner-button { height: 40px; min-height: 40px; padding: 0 18px; font-size: 19px; }
  .penalty-winner-auto { font-size: 9px; }

  .penalty-coin-ready-symbol { width: 49px; height: 49px; margin: 1px auto 6px; }
  .penalty-coin-ready-matchup { gap: 11px; }
  .penalty-coin-ready-player { min-height: 45px; padding: 5px 10px; }
  .penalty-coin-ready-player .penalty-presentation-avatar { width: 32px; height: 32px; font-size: 15px; }
  .penalty-presentation-player-name { font-size: 20px; }
  .penalty-coin-ready-actions { gap: 3px; margin-top: 6px; }
  .penalty-role-reveal .penalty-coin-ready-status,
  .penalty-role-reveal .penalty-coin-ready-help { font-size: 10px; }

  .penalty-coin-toss-card .penalty-presentation-header { margin: 2px 0 0; }
  .penalty-coin-toss-card .penalty-presentation-header p { margin-top: 2px; font-size: 10px; }
  .penalty-coin-toss-arena { height: 86px; }
  .penalty-coin { width: 70px; }
  .penalty-coin-face { border-width: 5px; font-size: 32px; }
  .penalty-coin-player { min-height: 40px; padding: 4px 9px; }
  .penalty-coin-player strong { width: 29px; height: 29px; font-size: 15px; }
  .penalty-coin-player span { font-size: 18px; }
  .penalty-coin-result { margin-top: 4px; }
  .penalty-coin-result-chip { padding: 4px 11px; font-size: 9px !important; }
  .penalty-coin-result strong { font-size: 22px; }
  .penalty-coin-result span { font-size: 10px; }

  .penalty-round-summary-card .penalty-presentation-header { margin: 4px 0; }
  .penalty-round-summary-results { gap: 5px; }
  .penalty-round-summary-row { min-height: 46px; gap: 11px; padding: 3px 11px; }
  .penalty-round-summary-player { gap: 9px; }
  .penalty-round-summary-player .penalty-presentation-avatar { width: 35px; height: 35px; font-size: 16px; }
  .penalty-round-summary-player-copy strong { font-size: 20px; }
  .penalty-round-summary-player-copy small { margin-top: 0; font-size: 9px; }
  .penalty-round-summary-lamps { gap: 6px; }
  .penalty-round-summary-lamps .penalty-lamp { width: 22px; height: 22px; border-width: 3px; }
  .penalty-round-summary-actions { min-height: 86px; gap: 2px; margin-top: 4px; }
  .penalty-round-summary-prompt,
  .penalty-round-summary-ready { font-size: 9px; }
  .penalty-round-summary-card .penalty-presentation-cta { min-height: 40px; box-shadow: 0 3px 0 #96132f, 0 7px 11px rgba(0, 0, 0, 0.2); font-size: 19px; }
  .penalty-round-summary-card .penalty-presentation-cta:disabled { box-shadow: 0 2px 0 rgba(89, 33, 48, 0.75), 0 5px 9px rgba(0, 0, 0, 0.17); }
  .penalty-round-summary-card .penalty-presentation-cta + .penalty-round-summary-ready { margin-top: 3px; }

  .penalty-match-overlay.is-presentation-phase .penalty-leave-button {
    right: calc(env(safe-area-inset-right, 0px) + 5px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
    min-height: 24px;
    padding: 2px 7px;
    font-size: 0.54rem;
    opacity: 0.62;
  }
}

@media (orientation: landscape) and (max-height: 380px) {
  .penalty-game-hud { grid-template-columns: minmax(0, 1fr) 62px minmax(205px, 1fr); }
  .penalty-pitch::after { bottom: 26%; }
  .penalty-game-stage::before,
  .penalty-game-stage::after { height: 26vh; }
  .penalty-goal-wrap { top: 25%; width: min(47vw, 500px); height: 49vh; }
  .penalty-match-overlay:not(.is-presentation-phase) .penalty-goal-wrap { top: 26%; width: min(46.5vw, 520px); height: 45%; }
  .penalty-target { width: 34px; height: 34px; }
  .penalty-target-layer.is-keeper { inset: 2% 3%; }
  .penalty-game-sidebar { gap: 4px; padding: max(20px, env(safe-area-inset-top, 0px)) max(7px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 50px) 10px; }
  .penalty-game-sidebar-top { grid-template-columns: minmax(0, 1fr) 76px; gap: 5px; }
  .penalty-game-sidebar-role { padding: 5px 7px; border-radius: 11px; }
  .penalty-game-sidebar-role span,
  .penalty-game-sidebar-timer span { font-size: 0.54rem; }
  .penalty-game-sidebar-role strong { margin-top: 2px; font-size: 0.76rem; }
  .penalty-game-sidebar-timer { padding: 5px 6px; border-radius: 11px; }
  .penalty-game-sidebar-timer strong { font-size: 1.08rem; }
  .penalty-game-sidebar-score { padding: 8px 9px 9px; border-radius: 13px; }
  .penalty-game-sidebar-score-head { margin-bottom: 2px; }
  .penalty-game-sidebar-score-head strong { font-size: 0.64rem; }
  .penalty-game-sidebar .penalty-score-line { min-height: 31px; gap: 4px; padding-block: 4px; font-size: 0.74rem; }
  .penalty-game-sidebar .penalty-score-name { font-size: 0.76rem; }
  .penalty-game-sidebar .penalty-score-line > strong { font-size: 1.02rem; }
  .penalty-game-sidebar .penalty-lamp { width: 8px; height: 8px; }
  .penalty-match-overlay.has-game-sidebar .penalty-selected-skill { top: calc(49% + 16px); right: max(7px, env(safe-area-inset-right, 0px)); left: calc(62% + 10px); padding: 5px 9px; }
  .penalty-match-overlay.has-game-sidebar .penalty-result-callout { top: calc(49% + 16px); right: max(7px, env(safe-area-inset-right, 0px)); left: calc(62% + 10px); }
  .penalty-compact-match-timer { top: max(20px, env(safe-area-inset-top, 0px)); min-width: 86px; padding: 5px 8px; border-radius: 11px; }
  .penalty-compact-match-timer span { font-size: 0.5rem; }
  .penalty-compact-match-timer strong { font-size: 1.12rem; }
  .penalty-kicker-layer { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); padding-right: calc(env(safe-area-inset-right, 0px) + 14px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); padding-left: calc(env(safe-area-inset-left, 0px) + 14px); }
  .penalty-kicker-card { width: min(720px, 86vw); padding: 8px 12px; }
  .penalty-kicker-card h2 { margin-bottom: 7px; font-size: 0.92rem; }
  .penalty-kicker-status { margin: -3px 0 6px; font-size: 0.66rem; }
  .penalty-kicker-hint { display: none; }
  .penalty-skill-grid { gap: 6px; }
  .penalty-skill { min-height: 88px; gap: 4px; padding: 5px 3px; border-radius: 10px; }
  .penalty-kicker-player { width: 36px; height: 45px; transform: scale(0.78); transform-origin: center bottom; }
  .penalty-skill-stars { font-size: 0.9rem; }
  .penalty-role-reveal section,
  .penalty-pause-layer section,
  .penalty-finish-card { max-height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px)); }
  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(var(--penalty-presentation-safe-x) + 8px) calc(env(safe-area-inset-bottom, 0px) + 6px) calc(var(--penalty-presentation-safe-x) + 8px);
  }

  .penalty-presentation-card,
  .penalty-role-reveal .penalty-presentation-card { padding: 6px 18px 8px; border-radius: 21px; }
  .penalty-presentation-badge { min-height: 35px; padding: 4px 12px; font-size: 9px; }
  .penalty-presentation-badge-icon { width: 24px; height: 24px; }
  .penalty-presentation-timer { min-width: 104px; padding: 4px 10px; border-radius: 15px; }
  .penalty-presentation-timer small { font-size: 9px; }
  .penalty-presentation-timer strong { font-size: 22px; }
  .penalty-presentation-header { margin: 3px 0 4px; }
  .penalty-presentation-header h2,
  .penalty-role-reveal .penalty-presentation-header h2 { font-size: 28px; }
  .penalty-presentation-header p,
  .penalty-role-reveal .penalty-presentation-header p { margin-top: 2px; font-size: 11px; }
  .penalty-presentation-card .penalty-presentation-cta { min-height: 39px; font-size: 18px; }
  .penalty-coin-ready-card .penalty-presentation-cta { height: 38px; min-height: 38px; padding: 0 16px; box-shadow: 0 2px 0 #96132f, 0 5px 9px rgba(0, 0, 0, 0.18); font-size: 18px; line-height: 1.05; }
  .penalty-coin-ready-card .penalty-presentation-cta:disabled { box-shadow: 0 2px 0 rgba(89, 33, 48, 0.75), 0 5px 9px rgba(0, 0, 0, 0.16); }

  .penalty-winner-main { margin-top: -13px; }
  .penalty-winner-trophy-wrap { width: 68px; height: 60px; }
  .penalty-winner-trophy-glow { width: 86px; height: 48px; }
  .penalty-winner-trophy { font-size: 45px; }
  .penalty-winner-name { font-size: 34px; }
  .penalty-winner-score { margin-top: 3px; }
  .penalty-winner-actions { margin-top: 5px; }
  .penalty-winner-card .penalty-winner-button { height: 38px; min-height: 38px; padding: 0 16px; font-size: 18px; }

  .penalty-coin-ready-symbol { width: 45px; height: 45px; margin-bottom: 5px; }
  .penalty-coin-ready-matchup { gap: 9px; }
  .penalty-coin-ready-player { min-height: 42px; padding: 4px 9px; }
  .penalty-coin-ready-player .penalty-presentation-avatar { width: 29px; height: 29px; font-size: 14px; }
  .penalty-presentation-player-name { font-size: 18px; }
  .penalty-coin-ready-actions { gap: 2px; margin-top: 5px; }
  .penalty-role-reveal .penalty-coin-ready-status,
  .penalty-role-reveal .penalty-coin-ready-help { font-size: 9px; }

  .penalty-coin-toss-card .penalty-presentation-header { margin: 1px 0 0; }
  .penalty-coin-toss-arena { height: 76px; }
  .penalty-coin { width: 62px; }
  .penalty-coin-face { border-width: 4px; font-size: 29px; }
  .penalty-coin-player { min-height: 36px; padding: 3px 8px; }
  .penalty-coin-player strong { width: 27px; height: 27px; font-size: 14px; }
  .penalty-coin-player span { font-size: 17px; }
  .penalty-coin-result { margin-top: 3px; }
  .penalty-coin-result-chip { padding: 3px 10px; font-size: 8px !important; }
  .penalty-coin-result strong { font-size: 20px; }
  .penalty-coin-result span { font-size: 9px; }

  .penalty-round-summary-card .penalty-presentation-header { margin-bottom: 3px; }
  .penalty-round-summary-results { gap: 5px; }
  .penalty-round-summary-row { min-height: 43px; gap: 9px; padding: 3px 10px; }
  .penalty-round-summary-player { gap: 8px; }
  .penalty-round-summary-player .penalty-presentation-avatar { width: 33px; height: 33px; font-size: 15px; }
  .penalty-round-summary-player-copy strong { font-size: 19px; }
  .penalty-round-summary-player-copy small { margin-top: 0; font-size: 9px; }
  .penalty-round-summary-lamps { gap: 5px; }
  .penalty-round-summary-lamps .penalty-lamp { width: 21px; height: 21px; }
  .penalty-round-summary-actions { min-height: 82px; gap: 2px; margin-top: 3px; }
  .penalty-round-summary-prompt,
  .penalty-round-summary-ready { font-size: 9px; }
  .penalty-round-summary-card .penalty-presentation-cta { min-height: 38px; box-shadow: 0 2px 0 #96132f, 0 5px 9px rgba(0, 0, 0, 0.18); font-size: 18px; }
  .penalty-round-summary-card .penalty-presentation-cta:disabled { box-shadow: 0 2px 0 rgba(89, 33, 48, 0.75), 0 4px 8px rgba(0, 0, 0, 0.16); }
  .penalty-round-summary-card .penalty-presentation-cta + .penalty-round-summary-ready { margin-top: 3px; }
}

@media (display-mode: standalone) and (orientation: landscape) and (max-height: 380px) {
  .penalty-presentation-layer,
  .penalty-role-reveal.penalty-presentation-layer,
  .penalty-coin-toss-layer.penalty-presentation-layer,
  .penalty-round-summary-layer.penalty-presentation-layer {
    padding: calc(var(--penalty-presentation-safe-y) + 6px) calc(var(--penalty-presentation-safe-x) + 8px) calc(var(--penalty-presentation-safe-y) + 6px) calc(var(--penalty-presentation-safe-x) + 8px);
  }
}

.penalty-match-overlay .action-btn {
  min-height: 42px;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.92rem;
}

.penalty-match-overlay .primary-btn {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  color: #fff8f7;
  box-shadow: 0 10px 24px rgba(187, 16, 47, 0.24);
}

.penalty-match-overlay .action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}