[x-cloak] { display: none !important; }

/* Skrytí šipek u číselných vstupů na desktopech — na telefonu rušivé neaktivní */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* Žebříček — .leaderboard má fixní 1080×1920 px, wrapper ho responzivně zmenší přes JS scale.
 * Export do PNG běží nad off-screen klonem v plné velikosti (viz downloadLeaderboard v app.js). */
#leaderboard-canvas {
    position: relative;
    width: 100%;
    max-width: 1080px;
    aspect-ratio: 1080 / 1920;
    overflow: hidden;
    margin: 0 auto;
    background: linear-gradient(160deg, #63A1FF 0%, #4a84e6 50%, #020A0A 100%);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(2, 10, 10, 0.18);
}
.leaderboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 1080px;
    height: 1920px;
    font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
    color: #020A0A;
    background: linear-gradient(160deg, #63A1FF 0%, #4a84e6 50%, #020A0A 100%);
    overflow: hidden;
    transform-origin: top left;
    /* transform: scale(...) přidává JS (fitLeaderboard) */
}

.leaderboard .lb-header {
    padding: 64px 72px 48px;
    text-align: center;
}
.leaderboard .lb-team {
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.leaderboard .lb-meta {
    margin-top: 16px;
    font-size: 32px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
.leaderboard .lb-kind-pill {
    display: inline-block;
    padding: 8px 24px;
    background: #fff;
    color: #020A0A;
    border-radius: 999px;
    font-weight: 700;
    margin-top: 24px;
    letter-spacing: 0.05em;
    font-size: 28px;
    text-transform: uppercase;
}

.leaderboard .lb-body {
    padding: 0 56px 80px;
    height: calc(100% - 330px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaderboard .lb-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.92);
    border-radius: 28px;
    padding: 20px 28px;
    box-shadow: 0 8px 24px rgba(2,10,10,0.15);
    flex-shrink: 0;
}
.leaderboard .lb-row.lb-top {
    padding: 26px 32px;
    background: #fff;
}
.leaderboard .lb-row.lb-top.lb-gold   { box-shadow: 0 12px 32px rgba(255, 200, 40, 0.45); border: 4px solid #FFCB2E; }
.leaderboard .lb-row.lb-top.lb-silver { box-shadow: 0 12px 32px rgba(180, 190, 210, 0.55); border: 4px solid #C8D0DE; }
.leaderboard .lb-row.lb-top.lb-bronze { box-shadow: 0 12px 32px rgba(220, 140, 80, 0.45); border: 4px solid #E6904A; }

.leaderboard .lb-rank {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 32px;
    flex-shrink: 0;
    background: #63A1FF;
    color: #020A0A;
}
.leaderboard .lb-row.lb-top .lb-rank { width: 88px; height: 88px; font-size: 44px; }
.leaderboard .lb-row.lb-gold   .lb-rank { background: #FFCB2E; }
.leaderboard .lb-row.lb-silver .lb-rank { background: #E3E8F0; }
.leaderboard .lb-row.lb-bronze .lb-rank { background: #F0B581; }
.leaderboard .lb-medal { font-size: 36px; margin-right: -4px; }

.leaderboard .lb-name {
    flex: 1;
    font-size: 32px;
    font-weight: 600;
    color: #020A0A;
    min-width: 0;
}
.leaderboard .lb-row.lb-top .lb-name { font-size: 40px; font-weight: 700; }

.leaderboard .lb-steps {
    font-weight: 700;
    font-size: 36px;
    color: #020A0A;
    text-align: right;
    white-space: nowrap;
}
.leaderboard .lb-row.lb-top .lb-steps { font-size: 44px; }
.leaderboard .lb-steps small {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #63A1FF;
    margin-top: -2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.leaderboard .lb-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    text-align: center;
    font-size: 22px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.leaderboard .lb-footprints {
    position: absolute;
    top: 140px;
    right: 40px;
    font-size: 140px;
    opacity: 0.15;
    transform: rotate(12deg);
}