/* High scores (leaderboard.js): the trophy button in the HUD, the summit card and the Hall of Fame. The same cream
   cards and ink outlines as the rest of the HUD (peak.html's variables). The card docks at the right edge, clear of
   Mnot's summit dance in the middle; on narrow screens it sits at the bottom. */
#scores-hud { position: absolute; top: 56px; right: 14px; pointer-events: auto; }
body.title-up #scores-hud { display: none; }
.sc-trophy { font: 600 13px Fredoka, sans-serif; color: var(--ink); padding: 6px 12px 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; }
.sc-trophy::before { content: ""; width: 15px; height: 15px; background: var(--ink);
  -webkit-mask: var(--trophy) center / contain no-repeat; mask: var(--trophy) center / contain no-repeat; }
.sc-trophy, .sc-panel { --trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8v4.5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M4 2.5H1.5v1.2A2.6 2.6 0 0 0 4.4 6.3M12 2.5h2.5v1.2a2.6 2.6 0 0 1-2.9 2.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7 9.2h2V12H7zM4.5 12.5h7V15h-7z'/%3E%3C/svg%3E"); }
.sc-trophy:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }

.sc-panel { position: fixed; z-index: 40; right: calc(16px + env(safe-area-inset-right)); top: 50%; width: 300px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px); overflow: auto; box-sizing: border-box; padding: 14px 16px 14px;
  color: var(--ink); font: 500 14px/1.35 Fredoka, system-ui, sans-serif; user-select: text;
  transform: translate(calc(100% + 40px), -50%) rotate(4deg); opacity: 0; visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.25s, visibility 0s 0.55s; }
.sc-panel.open { transform: translate(0, -50%); opacity: 1; visibility: visible;
  transition: transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.25s, visibility 0s; }
.sc-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 700 22px/1 Fredoka, sans-serif; padding: 2px 6px; }
.sc-x:hover { color: var(--ink); }
.sc-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--red); text-shadow: 0 1.5px 0 #ffd9c2;
  display: flex; align-items: center; gap: 8px; }
.sc-title::before { content: ""; width: 20px; height: 20px; background: var(--gold); flex: none;
  -webkit-mask: var(--trophy) center / contain no-repeat; mask: var(--trophy) center / contain no-repeat;
  filter: drop-shadow(0 1.5px 0 var(--ink)); }
.sc-panel[data-view="hall"] .sc-result, .sc-panel[data-view="hall"] .sc-form { display: none; }

.sc-result { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 2px; }
.sc-time { font-size: 34px; font-weight: 700; letter-spacing: 0.01em; color: #fff; line-height: 1.1;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
  font-variant-numeric: tabular-nums; }
.sc-stats { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 600; }
.sc-stats .sc-falls::before { content: "↓ "; color: var(--sky); font-weight: 700; }
.sc-stats .sc-dents::before { content: "◆ "; color: var(--red); }
.sc-status { margin: 6px 0 8px; font-weight: 600; }
.sc-status.good { color: var(--teal); }
.sc-status.muted { color: var(--muted); }

.sc-form { margin: 0 0 8px; }
.sc-form label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.sc-form small { color: var(--muted); font-weight: 500; }
.sc-row { display: flex; gap: 6px; }
.sc-row input { flex: 1; min-width: 0; box-sizing: border-box; padding: 6px 10px; border: 2px solid var(--ink);
  border-radius: 10px; background: #fff; color: var(--ink); font: 600 14px Fredoka, sans-serif; outline: none; }
.sc-row input:focus { box-shadow: 0 0 0 3px #9fdcff; }
.sc-send, .sc-again { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2.5px 0 var(--ink);
  background: var(--gold); color: var(--ink); font: 700 14px Fredoka, sans-serif; padding: 5px 12px; cursor: pointer; }
.sc-send:hover, .sc-again:hover { transform: translateY(1px); box-shadow: 0 1.5px 0 var(--ink); }
.sc-send:disabled { background: #e8e1d2; color: var(--muted); cursor: default; transform: none; }
.sc-again { display: block; margin: 10px 0 0 auto; background: #7ff0c8; }
.sc-again[hidden] { display: none; }

.sc-list { list-style: none; margin: 4px 0 0; padding: 0; font-variant-numeric: tabular-nums; }
.sc-list:empty { display: none; }
.sc-list li { display: grid; grid-template-columns: 26px 1fr auto 26px; gap: 6px; align-items: center;
  padding: 3px 6px; border-radius: 8px; }
.sc-list li:nth-child(odd) { background: rgba(43, 51, 82, 0.05); }
.sc-list li.me { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.sc-list li.house .sc-name { color: var(--muted); }      /* the house records (server/db.py): a hint, no badge */
.sc-list li.sc-gap { display: block; text-align: center; color: var(--muted); background: none; padding: 0; }
.sc-rank { font-weight: 700; color: var(--muted); text-align: right; }
.sc-list li:nth-child(1) .sc-rank { color: #c99400; }
.sc-list li.me .sc-rank { color: var(--ink); }
.sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-t { font-weight: 600; }
.sc-f { color: var(--sky); font-size: 12px; text-align: right; }
.sc-f::before { content: "↓"; margin-right: 1px; }
.sc-replay-actions, .sc-replay-note { grid-column: 2 / -1; min-width: 0; }
.sc-replay-actions { display: flex; gap: 6px; padding: 1px 0 3px; }
.sc-replay-action { flex: 1; min-height: 28px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff;
  color: var(--ink); font: 600 12px Fredoka, sans-serif; cursor: pointer; }
.sc-replay-action:hover { background: #e9f4ff; }
.sc-replay-action:focus-visible { outline: 3px solid #9fdcff; outline-offset: 2px; }
.sc-replay-note { padding: 0 0 3px; color: var(--muted); font-size: 11px; }
.sc-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.sc-note:empty { display: none; }

@media (max-width: 560px) {
  .sc-panel { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right));
    left: calc(12px + env(safe-area-inset-left)); width: auto; max-width: none; max-height: 46vh;
    transform: translateY(calc(100% + 40px)); }
  .sc-panel.open { transform: none; }
  .sc-time { font-size: 28px; }
}
/* landscape phones: nearly the whole height (it scrolls), and the name field at 16px so Safari doesn't zoom into it */
@media (max-height: 500px) {
  .sc-panel { max-height: calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  .sc-row input { font-size: 16px; }
}