.container {
  color: var(--ui-text);
  text-align: center;
}

/* 'Retro Gaming' is crisp at multiples of 11px: 154 = 14x, 99 = 9x, 66 = 6x. */
.container > h1 {
  margin: 0;
  color: var(--ui-text-bright);
  font-size: 154px;
  line-height: 0.92;
  text-shadow: 0 7px 0 rgba(0, 0, 0, 0.72);
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  margin: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.social-icons a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--ui-text);
  transition: border-color 120ms steps(2), background-color 120ms steps(2);
}

.social-icons svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.65));
}

.social-icons a:hover {
  border-color: var(--ui-amber-edge);
  background: rgba(242, 177, 52, 0.08);
}

.social-icons a:active {
  transform: translateY(1px);
}

.social-icons a:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ leaderboard */
/* Shared by the home menu and the in-game leaderboard (leaderboard.mjs builds the rows). */

.leaderboard-dialog.ui-dialog {
  width: min(560px, calc(100vw - 40px));
}

.ui-dialog__head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.ui-dialog__head h2 {
  margin-bottom: 0;
}

.leaderboard-reset {
  margin: 0;
  color: var(--ui-amber-text);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.leaderboard-content {
  max-height: min(52vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ui-well);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-steel-lo);
  scrollbar-color: var(--ui-steel) transparent;
  scrollbar-width: thin;
}

.leaderboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-list li,
.leaderboard-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px 8px 10px;
  border-bottom: var(--ui-px) solid var(--ui-face);
  box-shadow: inset calc(2 * var(--ui-px)) 0 0 transparent;
  color: var(--ui-text);
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
}

.leaderboard-list.has-portraits .leaderboard-row {
  grid-template-columns: 52px 36px minmax(0, 1fr) auto;
}

.leaderboard-list li:last-child {
  border-bottom: 0;
}

.leaderboard-list li:nth-child(odd) {
  background: rgba(255, 244, 222, 0.025);
}

/* Status rows ("Loading...", "No runs...") are plain text, not a ranked row. */
.leaderboard-list .leaderboard-message {
  display: block;
  padding: 22px 14px;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  text-transform: none;
}

.leaderboard-message--error {
  color: var(--ui-red-text) !important;
}

/* Rank badge: a notched pixel plate; gold / silver / bronze for the podium. */
.leaderboard-row .position {
  --rank-face: var(--ui-face-hi);
  --rank-text: var(--ui-text-muted);
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  margin: 2px;
  background: var(--rank-face);
  box-shadow:
    0 -2px 0 0 var(--ui-frame),
    0 2px 0 0 var(--ui-frame),
    -2px 0 0 0 var(--ui-frame),
    2px 0 0 0 var(--ui-frame),
    inset 0 2px 0 0 rgba(255, 244, 222, 0.08);
  color: var(--rank-text);
  font-size: 11px;
  text-align: center;
}

/* Podium plates: gold, steel, bronze. */
.leaderboard-row--top1 .position { --rank-face: #86600e; --rank-text: #fff4d1; }
.leaderboard-row--top2 .position { --rank-face: #59636a; --rank-text: var(--ui-text-bright); }
.leaderboard-row--top3 .position { --rank-face: #7d4518; --rank-text: #ffe4cb; }

.leaderboard-row--top1 { box-shadow: inset calc(2 * var(--ui-px)) 0 0 var(--ui-gold); }
.leaderboard-row--top2 { box-shadow: inset calc(2 * var(--ui-px)) 0 0 #c3ccd0; }
.leaderboard-row--top3 { box-shadow: inset calc(2 * var(--ui-px)) 0 0 #d9873f; }

.leaderboard-row__portrait {
  display: block;
  width: 36px;
  height: 36px;
  background: var(--ui-face);
  box-shadow: inset 0 0 0 2px var(--ui-steel-lo);
}

.leaderboard-row__portrait:empty::before {
  content: "?";
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ui-text-dim);
  font-size: 11px;
}

.leaderboard-row__portrait img {
  display: block;
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.leaderboard-row__who {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leaderboard-row .name {
  overflow: hidden;
  color: var(--ui-text-bright);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row__runs {
  color: var(--ui-text-muted);
  text-transform: none;
}

.leaderboard-row .score {
  min-width: 64px;
  color: var(--ui-gold);
  font-size: 22px;
  line-height: 1;
  text-align: right;
  text-shadow: 2px 2px 0 var(--ui-frame);
  font-variant-numeric: tabular-nums;
}

/* The caller's own row (in the top 10, or pinned under the list): amber 'you' treatment. */
.leaderboard-row--me {
  background:
    linear-gradient(90deg, rgba(242, 177, 52, 0.2), rgba(242, 177, 52, 0.07)) !important;
  box-shadow: inset calc(2 * var(--ui-px)) 0 0 var(--ui-amber);
}

.leaderboard-row--me .name::after {
  content: " (you)";
  color: var(--ui-amber);
}

/* Pinned row under the list: an amber-deep well in an amber frame. */
.leaderboard-you {
  margin-top: 10px;
  background: var(--ui-amber-deep);
  box-shadow:
    inset 0 0 0 var(--ui-px) var(--ui-amber),
    0 0 0 var(--ui-px) var(--ui-frame);
}

.leaderboard-list--you .leaderboard-row--me {
  border-bottom: 0;
  background: transparent !important;
  box-shadow: inset calc(3 * var(--ui-px)) 0 0 var(--ui-amber);
}

.leaderboard-you:has(.leaderboard-you__empty) {
  background: var(--ui-well);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-amber-edge);
}

.leaderboard-you__empty {
  margin: 0;
  padding: 14px;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.close-button {
  width: min(100%, 220px);
  margin-top: 18px;
}

/* -------------------------------------------------------------- game over */

#gameOver {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(40, 8, 6, 0.55), rgba(3, 3, 4, 0.9));
  color: var(--ui-text);
}

/* GAME OVER is red tape; a run that set a NEW BEST earns amber tape instead. */
.game-over-content::before {
  background-image: var(--ui-stripe-red);
}

.game-over-content:has(.game-over-best[data-new-best='true']:not([hidden]))::before {
  background-image: var(--ui-stripe-amber);
}

.game-over-content {
  width: min(500px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

#gameOver h1 {
  margin: 0 0 22px;
  color: var(--ui-red-text);
  font-size: 66px;
  letter-spacing: 6px;
  line-height: 0.9;
  text-shadow:
    0 6px 0 var(--ui-red-edge),
    0 12px 0 var(--ui-frame);
}

#gameOver h1[data-terminal-state="interrupted"] {
  font-size: clamp(32px, 9vw, 50px);
  line-height: 0.95;
  white-space: nowrap;
}

.game-over-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 340px);
  margin: 0 auto 20px;
  padding: 12px 16px 14px;
  border: 0;
  border-radius: 0;
  background: var(--ui-well);
  box-shadow:
    inset 0 0 0 var(--ui-px) var(--ui-amber-edge),
    inset 0 calc(2 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5);
}

/* NEW BEST: the score well lights up in toxic green with a stepped hard-pixel glow. */
.game-over-best[data-new-best='true']:not([hidden]) ~ .game-over-score {
  box-shadow:
    inset 0 0 0 var(--ui-px) var(--ui-toxic-lo),
    inset 0 calc(2 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5),
    var(--ui-glow-toxic);
}

.game-over-score__label {
  color: var(--ui-amber-text);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

.game-over-score__value {
  color: var(--ui-gold);
  font-size: 33px;
  line-height: 0.8;
  text-shadow: 3px 3px 0 var(--ui-frame);
}

.game-over-menu {
  width: min(100%, 340px);
  margin-inline: auto;
}

.game-over-menu li {
  width: 100%;
}

.game-over-content .social-icons {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .container > h1 {
    font-size: 99px;
  }
}

@media (max-width: 760px) {
  .container > h1 {
    font-size: 66px;
  }

  #gameOver {
    align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .game-over-content {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 20px 14px 18px;
  }

  #gameOver h1 {
    margin-bottom: 16px;
    font-size: 44px;
    letter-spacing: 4px;
    text-shadow:
      0 4px 0 var(--ui-red-edge),
      0 8px 0 var(--ui-frame);
  }

  .game-over-score {
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px 12px;
  }

  .game-over-score__value {
    font-size: 22px;
  }

  .leaderboard-list li,
  .leaderboard-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 46px;
    padding: 6px 10px 6px 6px;
  }

  .leaderboard-list.has-portraits .leaderboard-row {
    grid-template-columns: 46px 30px minmax(0, 1fr) auto;
  }

  .leaderboard-row .position {
    width: 40px;
  }

  .leaderboard-row__portrait,
  .leaderboard-row__portrait img {
    width: 30px;
    height: 30px;
  }

  .leaderboard-row .score {
    min-width: 44px;
    font-size: 11px;
  }

  .social-icons {
    gap: 8px;
    margin-top: 18px;
  }

  .social-icons a {
    width: 46px;
    height: 46px;
  }

  .social-icons svg {
    width: 36px;
    height: 36px;
  }
}

/* Short landscape phones: keep the result card on one screen. */
@media (max-height: 520px) and (min-width: 561px) {
  /* Menu leaderboard: one scroller (the dialog) instead of a ~200 px list nested inside it, so
     the pinned You row and Close are a normal scroll away. */
  .menu-page .leaderboard-content {
    max-height: none;
    overflow: visible;
  }

  .menu-page .leaderboard-dialog .ui-dialog__head {
    gap: 4px;
    margin-bottom: 10px;
  }

  #gameOver {
    align-items: center;
  }

  .game-over-content {
    padding-block: 14px 10px;
  }

  #gameOver h1 {
    margin-bottom: 12px;
    font-size: 44px;
    letter-spacing: 4px;
    text-shadow:
      0 4px 0 var(--ui-red-edge),
      0 8px 0 var(--ui-frame);
  }

  #gameOver h1 br {
    display: none;
  }

  #gameOver h1[data-terminal-state="interrupted"] {
    font-size: 33px;
  }

  .game-over-score {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 9px 12px;
  }

  .game-over-score__value {
    font-size: 22px;
  }

  .game-over-menu .ui-button {
    min-height: 42px;
  }

  .game-over-content .social-icons {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-icons a {
    transition: none;
  }
}

@media (forced-colors: active) {
  .leaderboard-content,
  .leaderboard-you,
  .game-over-score,
  .leaderboard-row .position {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .leaderboard-row--me {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}