/* Space Invaders: score summary, initials, actions and leaderboard. */
.cabinet-link:focus-visible, .pixel-text-button:focus-visible, .ship-skin-option:focus-visible, .launch-button:focus-visible, .score-action:focus-visible, #initials-input:focus-visible {
  outline: 3px dashed var(--gold);
  outline-offset: 3px;
}
.scoreboard-kicker, .scoreboard-summary h2, .score-entry label, .leaderboard-panel h2 {
  margin: 0 0 12px;
  color: var(--pink);
  font-size: clamp(8px, 1.15vw, 13px);
  line-height: 1.5;
  text-transform: uppercase;
}
.run-summary, .panel-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(6px, 0.7vw, 9px);
  line-height: 1.7;
}
.score-action {
  min-height: 42px;
  border: 2px solid var(--cyan-dim);
  padding: 9px 12px;
  color: var(--cyan);
  background: #071127;
  box-shadow: 4px 4px 0 #02050d;
  font-family: var(--pixel-font);
  font-size: clamp(7px, 0.8vw, 10px);
  text-transform: uppercase;
  cursor: pointer;
}
.score-action.primary {
  margin-top: 12px;
  border-color: var(--pink);
  color: var(--space);
  background: var(--pink);
}
.score-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.leaderboard-list li::marker {
  color: var(--gold);
}
.leaderboard-list li:nth-child(3) {
  color: var(--pink);
}
.scoreboard {
  min-height: 0;
  grid-template-columns: minmax(190px, 0.85fr) minmax(210px, 0.9fr) minmax(250px, 1.25fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  border: 2px solid var(--cyan-dim);
  background: #050b1c;
  box-shadow: inset 0 0 0 4px #02050d, inset 0 0 0 6px #142c58;
  clip-path: polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );
  width: min(760px, calc(100% - 32px));
  height: auto;
  max-height: calc(100dvh - 90px);
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  margin: 0;
  padding: clamp(20px, 3vw, 34px);
  overflow: auto;
}
.scoreboard-summary, .score-entry, .leaderboard-panel {
  align-self: stretch;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  border-left: 2px solid #17395a;
  width: 100%;
  min-height: 0;
  display: grid;
  border: 0;
  padding: 0;
}
.scoreboard-summary {
  text-align: center;
  justify-items: center;
}
.scoreboard-kicker {
  margin-bottom: 8px;
  font-size: clamp(10px, 1.1vw, 14px);
}
.scoreboard-summary h2 {
  color: var(--cyan);
  margin-bottom: 7px;
  font-size: 8px;
}
#final-score {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 4px 4px 0 #17395a;
  font-size: clamp(34px, 5vw, 60px);
}
.score-entry {
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
  gap: 8px 12px;
}
.score-entry label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 9px;
}
#initials-input {
  width: 100%;
  border: 2px solid var(--cyan-dim);
  padding: 8px 10px;
  color: var(--gold);
  background: #020610;
  font-family: var(--pixel-font);
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
  border-radius: 0;
  grid-column: 1;
  grid-row: 2;
  min-height: 50px;
  font-size: 24px;
}
.score-entry .score-action {
  grid-column: 2;
  grid-row: 2;
  min-height: 50px;
  margin: 0;
}
.score-entry .panel-note {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  min-height: 1.7em;
  text-align: center;
}
.scoreboard-actions {
  grid-column: 1 / 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.leaderboard-panel {
  grid-column: 3;
  grid-row: 1 / 3;
  order: 3;
  justify-content: center;
  border-top: 1px solid #17395a;
  padding-top: 14px;
  text-align: center;
}
.leaderboard-panel h2 {
  margin-bottom: 10px;
  font-size: 10px;
}
.leaderboard-list {
  display: grid;
  margin: 0;
  padding-left: 2.3em;
  color: var(--ink);
  line-height: 1.45;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 28px;
  padding: 0;
  list-style-position: inside;
  font-size: 8px;
}
.leaderboard-panel .panel-note {
  margin-top: 8px;
}
body.is-post-game .arcade-score-card, body.is-post-game .leaderboard-panel {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: clamp(20px, 4vw, 42px);
  background: transparent;
}
body.is-post-game .final-score-label { margin: 0 0 6px; color: var(--gold); font-size: 8px; text-transform: uppercase;
}
body.is-post-game .score-entry label, body.is-post-game #initials-input, body.is-post-game .score-entry .score-action { grid-column: auto; grid-row: 1; margin: 0;
}
body.is-post-game .scoreboard {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr);
  gap: 0;
  padding: 0;
  color: var(--ink);
  clip-path: none;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  display: block;
  overflow: auto;
  border: 0;
  outline: 0;
  background: #020510;
  box-shadow: none;
}
body.is-post-game #initials-input:focus, body.is-post-game #initials-input:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-color: var(--cyan);
  box-shadow: inset 3px 3px 0 #0b2740, 0 0 0 3px rgba(113, 245, 255, .24);
}
body.is-post-game .score-action:focus-visible, body.is-post-game #initials-input:focus-visible, #game-canvas:focus-visible {
  outline-style: solid;
  outline-color: var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #061326, 0 0 0 6px var(--cyan);
}
body.is-post-game .leaderboard-panel { border-top: 0;
  grid-column: 1;
  grid-row: auto;
  width: min(620px, 100%);
  display: block;
  margin: 0 auto;
  border: 0;
  outline: 0;
  padding: 6px 0 0;
  background: transparent;
  box-shadow: none;
}
body.is-post-game .leaderboard-panel h2 { margin: 0 0 10px; font-size: clamp(10px, 1.6vw, 16px); text-align: center;
}
body.is-post-game .leaderboard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 128px; overflow: auto;
}
body.is-post-game .arcade-score-card { border-right: 3px dashed #17395a;
  min-height: 100%;
  display: grid;
  margin: 0 auto;
  border: 0;
  padding: clamp(18px, 4vh, 44px) clamp(18px, 5vw, 64px);
  width: min(720px, 100%);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: clamp(10px, 2vh, 18px);
  text-align: center;
}
body.is-post-game .arcade-score-card > * {
  grid-column: 1;
  grid-row: auto;
  order: 0;
}
body.is-post-game #post-game-title {
  margin: 0;
  color: var(--pink);
  font-size: clamp(34px, 7vw, 78px);
  line-height: 1;
  text-align: center;
  text-shadow: 6px 6px 0 #6b2440;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: .06em;
}
body.is-post-game #post-game-title > span[style] {
  animation: game-over-pixel-sweep 2200ms steps(1, end) calc(var(--game-over-order) * 90ms) infinite;
}
.game-over-gap { width: .55em;
}
body.is-post-game #final-score {
  margin: 0;
  color: var(--gold);
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  letter-spacing: .12em;
}
body.is-post-game #final-score > span {
  animation: score-pixel-sweep 2200ms steps(1, end) calc(var(--score-order) * 95ms) infinite;
}
body.is-post-game .new-high-score {
  margin: -4px 0 2px;
  color: #70ff8d;
  font-size: clamp(7px, 1vw, 11px);
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #164c2d;
}
body.is-post-game .score-entry {
  align-items: center;
  margin-top: 18px;
  display: grid;
  margin: 0 auto;
  width: min(340px, 100%);
  grid-template-columns: minmax(96px, 148px) auto;
  justify-content: center;
  gap: 8px;
}
body.is-post-game .score-entry label {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
}
body.is-post-game #initials-input, body.is-post-game .score-entry .score-action {
  grid-row: 2;
  width: 100%;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
}
body.is-post-game #initials-input { min-height: 44px;
  grid-column: 1;
  padding: 6px 8px;
  font-size: clamp(16px, 2.4vw, 24px);
}
body.is-post-game .score-entry .score-action {
  grid-column: 2;
  align-self: center;
  width: auto;
  min-width: 82px;
  height: 36px;
  min-height: 36px;
  padding: 6px 10px;
  font-size: clamp(6px, .8vw, 9px);
}
body.is-post-game .score-entry .panel-note { min-height: 0; margin: 0;
  grid-column: 1 / -1;
  grid-row: 3;
}
body.is-post-game .scoreboard-actions { margin-top: 12px; margin: 0 auto;
  width: min(440px, 100%);
  gap: 14px;
}
body.is-post-game .scoreboard-actions .score-action {
  min-height: 52px;
  border: 4px solid #020510;
  color: #03101b;
  background: var(--cyan);
  box-shadow: inset 4px 4px 0 #d8fbff, inset -4px -4px 0 #238196, 6px 6px 0 #071727;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  font-size: clamp(8px, 1vw, 11px);
}
body.is-post-game .scoreboard-actions .score-action:focus-visible {
  color: #190716;
  background: var(--gold);
  box-shadow: inset 4px 4px 0 #fff0a8, inset -4px -4px 0 #b65d2e, 6px 6px 0 #6b2440;
  transform: translate(-2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  body.is-post-game .scoreboard-actions .score-action:hover {
    color: #190716;
    background: var(--gold);
    box-shadow: inset 4px 4px 0 #fff0a8, inset -4px -4px 0 #b65d2e, 6px 6px 0 #6b2440;
    transform: translate(-2px, -2px);
  }
}
body.is-post-game .scoreboard-actions .score-action:active {
  transform: translate(5px, 5px);
  box-shadow: inset 4px 4px 0 #238196, 2px 2px 0 #071727;
}
body.is-post-game .score-action:focus, body.is-post-game .score-action:focus-visible, body.is-post-game #initials-input:focus, body.is-post-game #initials-input:focus-visible, #game-canvas:focus, #game-canvas:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #061326, 0 0 0 6px var(--cyan);
}
@keyframes game-over-pixel-sweep {
  0%, 100% { color: #ff5f95; text-shadow: 5px 5px 0 #671b45; }
  28% { color: #ff304f; text-shadow: 5px 5px 0 #75152e; }
  52% { color: #ff8bb0; text-shadow: 5px 5px 0 #8a2758; }
  76% { color: #ff405f; text-shadow: 5px 5px 0 #65142d; }
}
@keyframes score-pixel-sweep {
  0%, 100% { color: #ffd36a; text-shadow: 4px 4px 0 #7b4522; }
  35% { color: #ff8a3d; text-shadow: 4px 4px 0 #7c2d25; }
  68% { color: #fff08c; text-shadow: 4px 4px 0 #8a621f; }
}