.role-badge {
  position: absolute;
  z-index: 12;
  left: 13px;
  bottom: 39px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid #d8f36b66;
  border-radius: 3px;
  background: #091a15d9;
  color: var(--lime);
  font: 700 9px "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: .04em;
}
.role-mark { font: 12px ui-monospace, "Cascadia Mono", monospace; }
.role-badge.keeper-role { color: #ffc08f; border-color: #f2815570; }
.role-badge.waiting-role { color: #d6e0d7; border-color: #d6e0d755; }

.kicker.uniform-blue .kicker-body { background: #388be0; }
.kicker.uniform-blue .kicker-body i { background: #d5e9ff; }
.kicker.uniform-red .kicker-body { background: #e65353; }
.kicker.uniform-red .kicker-body i { background: #ffe0dc; }
.keeper.uniform-blue .keeper-shirt { background: #388be0; color: #f5f8ff; }
.keeper.uniform-red .keeper-shirt { background: #e65353; color: #fff5f2; }

.keeper.dive-left-top { left: 18%; transform: translate(-50%,-7px) rotate(-40deg) scale(1.04); }
.keeper.dive-left-bottom { left: 18%; transform: translate(-50%,13px) rotate(-52deg) scale(1.08); }
.keeper.dive-center { left: 50%; transform: translate(-50%,10px) scale(1.12); }
.keeper.dive-right-top { left: 82%; transform: translate(-50%,-7px) rotate(40deg) scale(1.04); }
.keeper.dive-right-bottom { left: 82%; transform: translate(-50%,13px) rotate(52deg) scale(1.08); }

.toast { min-height: 49px; padding: 12px 21px; border-radius: 5px; font-size: 18px; letter-spacing: .04em; box-shadow: 0 8px 25px #0006; }
.toast-icon { font-size: 19px; }
.toast { top: max(8px, calc(27% - 53px)); }

.ball-at-feet, .shot-ball {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 32% 26%, #fff 0 12%, #f1f2e9 35%, #c9cec4 78%, #777e75 100%);
  box-shadow: 0 2px 4px #00160c99, inset 0 0 1px 1px #fff;
}
.ball-at-feet span, .shot-ball span {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #202521 0 15%, transparent 17%),
    radial-gradient(circle at 50% 3%, #303530 0 9%, transparent 11%),
    radial-gradient(circle at 97% 35%, #303530 0 9%, transparent 11%),
    radial-gradient(circle at 80% 94%, #303530 0 9%, transparent 11%),
    radial-gradient(circle at 20% 94%, #303530 0 9%, transparent 11%),
    radial-gradient(circle at 3% 35%, #303530 0 9%, transparent 11%);
  box-shadow: inset 0 0 2px #2228;
}
.shot-ball span { opacity: .94; }

.kicker-head { z-index: 4; overflow: visible; }
.kicker-head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  width: 14px;
  height: 8px;
  border-radius: 70% 70% 25% 25%;
  background: #29251f;
  clip-path: polygon(0 0,100% 0,92% 68%,72% 54%,58% 100%,42% 58%,13% 85%);
}
.kicker-head i { position: absolute; top: 8px; left: 4px; width: 2px; height: 2px; border-radius: 50%; background: #39291f; }
.kicker-neck { position: absolute; z-index: 0; top: 13px; left: 16px; width: 8px; height: 8px; background: #b87e5d; }
.kicker-arm { position: absolute; z-index: 0; top: 20px; width: 8px; height: 25px; border-radius: 6px; background: linear-gradient(90deg,#9b684d,#d39a73 55%,#ae7759); }
.kicker-arm-left { left: 1px; transform: rotate(12deg); }
.kicker-arm-right { right: 1px; transform: rotate(-12deg); }
.kicker-body { z-index: 1; overflow: hidden; border-radius: 7px 7px 4px 4px; box-shadow: inset 0 0 0 1px #ffffff30, inset 4px 0 5px #0002; }
.kicker-body b { position: absolute; top: 8px; left: 0; right: 0; color: #f4f7ff; text-align: center; font: 700 9px ui-monospace, "Cascadia Mono", monospace; text-shadow: 0 1px 1px #10203a99; }
.kicker-shorts { position: absolute; z-index: 2; top: 47px; left: 8px; width: 24px; height: 11px; border-radius: 0 0 4px 4px; background: #243347; clip-path: polygon(0 0,100% 0,91% 100%,58% 100%,50% 50%,42% 100%,9% 100%); }
.kicker-leg { z-index: 1; top: 53px; height: 21px; width: 7px; background: linear-gradient(90deg,#a77355,#d19a73 55%,#b67c5d); }
.kicker-leg-left { left: 10px; transform: rotate(5deg); }
.kicker-leg-right { left: 22px; transform: rotate(-5deg); }
.kicker-sock { position: absolute; z-index: 3; top: 73px; width: 7px; height: 12px; border-radius: 1px 1px 3px 3px; background: linear-gradient(90deg,#e9edf0,#fff 55%,#d9e0e2); }
.kicker-sock-left { left: 9px; }
.kicker-sock-right { left: 22px; }
.kicker.uniform-blue .kicker-sock { border-top: 3px solid #388be0; }
.kicker.uniform-red .kicker-sock { border-top: 3px solid #e65353; }
.kicker-boot { position: absolute; z-index: 4; top: 85px; width: 13px; height: 7px; border-radius: 3px 6px 2px 3px; background: linear-gradient(#30363d,#15191e); box-shadow: 0 1px 1px #0008; }
.kicker-boot-left { left: 4px; transform: rotate(9deg); }
.kicker-boot-right { left: 17px; transform: rotate(-9deg) scaleX(-1); }

.match-head { height: 90px; gap: 7px; }
.match-label { min-width: 0; }
.scoreboard-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 55%;
  min-width: 183px;
  max-width: 285px;
  flex: 0 0 auto;
  font-family: ui-monospace, "Cascadia Mono", monospace;
}
.score-row {
  display: grid;
  grid-template-columns: 35px repeat(5, minmax(14px, 1fr)) 40px;
  gap: 1px;
  min-height: 19px;
}
.score-row > span {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid #c8dece20;
}
.score-row.score-header { min-height: 16px; color: #94a99a; font-size: 8px; }
.score-header [data-slot="1"] { grid-column: 2; }
.score-header [data-slot="2"] { grid-column: 3; }
.score-header [data-slot="3"] { grid-column: 4; }
.score-header [data-slot="4"] { grid-column: 5; }
.score-header [data-slot="5"] { grid-column: 6; }
.score-header [data-total-label] { grid-column: 7; color: var(--lime); }
.score-row-label {
  grid-column: 1;
  color: #d2ded2;
  background: #ffffff08;
  font: 700 9px "Yu Gothic", "Meiryo", sans-serif;
}
.score-shot { color: #657b6c; font-size: 12px; line-height: 1; }
.score-shot.scored { color: var(--lime); font-weight: 700; text-shadow: 0 0 7px #d8f36b60; }
.score-shot.missed { color: #f2818a; font-weight: 700; }
.score-total { color: var(--lime); font: 700 13px ui-monospace, "Cascadia Mono", monospace; background: #d8f36b0a; }
.difficulty-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kick-button.saving-action { background: #f1a071; color: #2b1b16; }

.goal.net-shake .goal-net { animation: net-ripple .62s ease-out; }
.shot-ball.fly { animation: shot-arrive .76s cubic-bezier(.32,.01,.6,.99) forwards; }
.shot-ball.net-impact { animation: net-impact .48s ease-out forwards; opacity: 1; }
.shot-ball.rolling-out { animation: roll-out .82s cubic-bezier(.15,.68,.25,1) forwards; opacity: 1; }
.stadium.ball-in-flight .ball-at-feet { visibility: hidden; }

@keyframes shot-arrive {
  0% { top: 243px; left: 50%; transform: translate(-50%,0) scale(1); opacity: 1; }
  100% { top: var(--target-y); left: var(--target-x); transform: translate(-50%,-50%) scale(.46); opacity: 1; }
}
@keyframes net-impact {
  0% { top: var(--target-y); left: var(--target-x); transform: translate(-50%,-50%) scale(.46); }
  35% { top: calc(var(--target-y) + 4px); transform: translate(-50%,-50%) scale(.66,.38); }
  100% { top: var(--target-y); left: var(--target-x); transform: translate(-50%,-50%) scale(.52); }
}
@keyframes net-ripple {
  0%,100% { transform: translateX(0) skewY(0); filter: brightness(1); }
  22% { transform: translateX(3px) skewY(1.8deg); filter: brightness(1.8); }
  47% { transform: translateX(-3px) skewY(-1.5deg); }
  72% { transform: translateX(2px) skewY(.8deg); filter: brightness(1.35); }
}
@keyframes roll-out {
  0% { top: var(--target-y); left: var(--target-x); transform: translate(-50%,-50%) scale(.46) rotate(0); }
  18% { transform: translate(-50%,-50%) scale(.58,.43) rotate(125deg); }
  100% { top: var(--roll-end-y); left: var(--target-x); transform: translate(-50%,-50%) scale(.82) rotate(820deg); }
}

@media (prefers-reduced-motion: reduce) {
  .goal.net-shake .goal-net,
  .shot-ball.fly,
  .shot-ball.net-impact,
  .shot-ball.rolling-out { animation-duration: .01ms; }
}
@media (max-width: 420px) {
  .match-head { height: 82px; padding: 9px 10px; gap: 5px; }
  .match-label { gap: 4px; }
  .match-head .eyebrow { font-size: 7px; letter-spacing: .1em; }
  .match-head .round-label { font-size: 7px; letter-spacing: 0; white-space: nowrap; }
  .scoreboard-table { width: 56%; min-width: 183px; }
  .score-row { grid-template-columns: 35px repeat(5, minmax(14px, 1fr)) 40px; }
  .score-row-label { font-size: 8px; }
  .score-row.score-header { font-size: 7px; }
}

/* Keep the scorecard and controls inside the viewport on narrow phones. */
@media (max-width: 380px) {
  body { padding-right: 8px; padding-left: 8px; }
  .match-head {
    height: auto;
    min-height: 0;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .match-label { gap: 3px; }
  .match-head .eyebrow { font-size: 8px; }
  .match-head .round-label { font-size: 8px; }
  .scoreboard-table { width: 100%; min-width: 0; max-width: none; }
  .score-row { grid-template-columns: 45px repeat(5, minmax(0, 1fr)) 42px; }
  .score-row.score-header { min-height: 18px; font-size: 8px; }
  .score-row-label { font-size: 9px; }
  .score-shot { font-size: 13px; }
  .score-total { font-size: 14px; }
  .control-panel { flex-wrap: wrap; gap: 8px; }
  .instruction-block { flex: 1 1 170px; gap: 8px; }
  .instruction-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .instruction-text { white-space: normal; line-height: 1.35; }
  .kick-button { flex: 1 1 100%; height: 45px; }
}

@media (max-height: 700px) {
  .topbar { height: 48px; }
  .stadium { height: min(58svh, 390px); min-height: 300px; }
  .page-footer { min-height: 32px; height: auto; padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .stadium { height: min(52svh, 350px); min-height: 280px; }
}