/* The leaderboard uses the invitation's existing readout sheet and controls. */
.lb-is-open { overflow: hidden; }
.leaderboard { position: fixed; inset: auto 0 0; width: min(100%, 540px); max-width: none; max-height: none; margin: 0 auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); touch-action: pan-y; }
.leaderboard::backdrop { background: linear-gradient(180deg, #07040f22, #07040f99); }
.leaderboard[open] .readout { --accent: var(--cyan); width: calc(100% - 16px); margin: 0 auto calc(8px + var(--safe-b)); max-height: min(82dvh, 720px); transform: none; opacity: 1; }
.leaderboard .rh { padding-right: 64px; }
.leaderboard .rh .sub { max-width: 240px; font-size: .84rem; line-height: 1.4; }
.leaderboard .lb-game-logo { display: block; width: min(180px, 100%); height: auto; margin-bottom: 6px; }
.leaderboard .rb { gap: 12px; }
.lb-car { display: block; width: 48px; height: 48px; background: url(car-yellow.png) 6.6667% 0 / 1600% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 3px 6px #ff2e8840); }
.lb-deadline { margin: 0 2px; font-size: .78rem; line-height: 1.5; color: var(--dim); }
.lb-entry[hidden], .lb-form[hidden], .lb-personal[hidden], .lb-message[hidden] { display: none; }
.lb-entry .tile-label { align-items: center; margin-bottom: 6px; }
.lb-entry [data-lb-score] { color: var(--ink); font: 600 1.8rem var(--card-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lb-note, .lb-message { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--dim); }
.lb-form { margin-top: 14px; }
.lb-form label { display: block; margin-bottom: 8px; font-size: .8rem; color: var(--dim); }
.lb-form-row { display: flex; align-items: center; gap: 12px; }
.lb-form input { box-sizing: border-box; width: 132px; min-width: 0; height: 52px; border: 1px solid #9b83b1; border-radius: 10px 3px 10px 3px; background: #0b0719aa; color: var(--ink); padding: 8px; text-align: center; font: 1rem var(--display); letter-spacing: .04em; }
.lb-tag-help { margin: 8px 0 0; color: var(--dim); font-size: .73rem; line-height: 1.5; }
.lb-form input::placeholder { color: #a99cba; }
.lb-form input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.leaderboard .lb-submit { flex: 1; display: flex; justify-content: space-between; min-height: 52px; padding: 10px 18px; font-size: .9rem; }
.lb-submit:disabled, .lb-refresh:disabled { opacity: .5; cursor: wait; }
.lb-feedback { margin: 10px 0 0; color: var(--cyan); font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.lb-feedback:empty { display: none; }
.lb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.lb-section-head .tile-label { margin: 0; }
.leaderboard .lb-refresh { width: 44px; min-height: 44px; justify-content: center; padding: 0; font-size: 1.2rem; }
.lb-list, .lb-personal ol { list-style: none; padding: 0; margin: 0; }
.lb-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; padding: 6px 2px; border-top: 1px solid #ffffff10; }
.lb-rank { color: var(--dim); font: .8rem var(--mono); }
.lb-player { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font: .88rem var(--display); letter-spacing: .04em; }
.lb-player small { margin-left: 9px; color: var(--cyan); font: .6rem var(--mono); letter-spacing: .04em; }
.lb-points { color: var(--ink); font: 600 1.12rem var(--card-display); font-variant-numeric: tabular-nums; }
.lb-run-award { margin: 0 0 8px; color: var(--dim); font-size: .72rem; line-height: 1.5; }
.lb-row > .lb-run-award { grid-column: 2 / -1; margin: -5px 0 2px; }
.form-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 12px 0; }
.form-badge { display: grid; align-content: center; justify-items: center; gap: 4px; width: 72px; min-height: 52px; padding: 5px; border: 1px solid #74ffbd70; border-radius: 7px; background: #070a16c9; box-shadow: inset 0 0 12px #74ffbd0b; }
.form-badge img { display: block; max-width: 100%; height: 29px; object-fit: contain; }
.form-badge small { color: #a2ffd0; font: .6rem var(--mono); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.form-badge.locked { border-color: #ffffff17; filter: grayscale(1); opacity: .32; box-shadow: none; }
.form-badge.locked small { color: var(--dim); }
.lb-achievements { grid-column: 2 / -1; }
.lb-achievements .form-badges { justify-content: flex-start; gap: 5px; margin: 0 0 5px; }
.lb-achievements .form-badge { box-sizing: border-box; width: 56px; min-height: 40px; padding: 3px; }
.lb-achievements .form-badge img { height: 22px; }
.lb-achievements .form-badge small { font-size: .52rem; }
.rc-stage .form-badges { width: 100%; max-width: 360px; margin: 4px auto 10px; }
.lb-you:not(.lb-podium) .lb-rank { color: var(--pink); }
.lb-podium {
  --metal: #f7d77e; --metal-bright: #fff4cf; --metal-dark: #936018; --metal-glow: #e9b74730;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  min-height: 70px; margin: 8px 0; padding: 10px 12px; gap: 12px;
  border: 1px solid var(--metal-dark); border-radius: 14px 4px 14px 4px;
  background: radial-gradient(ellipse at 0 0, var(--metal-glow), transparent 75%), linear-gradient(120deg, #211a2e, #100c20);
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #0008, 0 4px 16px #0003;
}
.lb-gold { min-height: 80px; box-shadow: inset 0 1px 0 #fff5, 0 0 18px var(--metal-glow), 0 4px 16px #0003; }
.lb-silver { --metal: #dce7f5; --metal-bright: #fff; --metal-dark: #718299; --metal-glow: #c1d6f52b; }
.lb-bronze { --metal: #efb58c; --metal-bright: #ffe5ce; --metal-dark: #995a36; --metal-glow: #d889522b; }
.lb-podium::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffffff04 42%, #ffffff1c 48%, #ffffff04 54%, transparent 66%);
  transform: translateX(-130%); animation: lb-shine 8s ease-in-out infinite;
}
.lb-silver::after { animation-delay: .5s; }
.lb-bronze::after { animation-delay: 1s; }
.lb-podium .lb-rank {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--metal-bright); border-radius: 50%; color: #291a12;
  background: conic-gradient(from 25deg, var(--metal-dark), var(--metal), var(--metal-bright), var(--metal), var(--metal-dark), var(--metal-bright), var(--metal-dark));
  box-shadow: inset 0 0 0 3px #ffffff50, inset 0 0 0 4px var(--metal-dark), 0 3px 9px #0008;
  font: 700 1.08rem var(--card-display); text-shadow: 0 1px 0 #fff8;
}
.lb-podium .lb-rank::before {
  content: ''; position: absolute; z-index: -1; top: 26px; width: 27px; height: 20px;
  background: linear-gradient(90deg, var(--metal-dark), var(--metal), var(--metal-dark));
  clip-path: polygon(0 0, 100% 0, 92% 100%, 51% 76%, 8% 100%);
}
.lb-podium .lb-rank::after { content: '✦'; position: absolute; top: -8px; right: -5px; color: var(--metal-bright); font-size: 14px; text-shadow: 0 0 7px var(--metal); }
.lb-award { display: block; margin-top: 5px; color: var(--metal); font: .59rem var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.lb-podium .lb-points { color: var(--metal-bright); text-shadow: 0 0 16px var(--metal-glow); }
.lb-gold .lb-points { font-size: 1.3rem; }
@keyframes lb-shine { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .lb-podium::after { animation: none; transform: none; opacity: .5; } }
.lb-message { padding: 8px 0 6px; }
.lb-personal { margin-top: 16px; }
.lb-personal > p { margin: 0 0 5px; color: var(--dim); font-size: .75rem; }
.lb-rules { padding: 0 3px; font-size: .76rem; color: var(--dim); }
.lb-rules summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; }
.lb-rules summary::-webkit-details-marker { display: none; }
.lb-rules summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 5px; }
.lb-rules p { line-height: 1.6; margin: 0 0 10px; }
.lb-rules[open] summary > span { transform: rotate(45deg); }
.leaderboard .lb-done { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.prize-link { color: var(--cyan); }
@media (max-width: 380px) {
  .lb-row { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; }
  .lb-row > .lb-rank { grid-row: 1 / span 2; align-self: start; }
  .lb-row > .lb-points { grid-column: 2; }
  .lb-row > .lb-run-award { margin: 0 0 3px; }
  .lb-player { overflow-wrap: normal; }
  .leaderboard .rh { gap: 10px; padding-left: 16px; }
  .leaderboard .icon-tile { width: 46px; height: 46px; border-radius: 14px; }
  .leaderboard .rh h2 { font-size: 1.35rem; }
  .leaderboard .rh .sub { font-size: .76rem; }
}
