/* Point-ranking views: Okul (school server), Sınıf (class on this device), Bu cihaz. */
.leaderboard-class { max-width:320px; margin:12px 0 4px; }
.leaderboard-network { padding:9px 12px; color:var(--ink-soft); background:var(--surface-soft); border:1px solid var(--line); border-radius:11px; font-size:14px; font-weight:650; }
.leaderboard-network[data-state="eligible"] { color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, var(--line)); }
.leaderboard-submit { display:flex; min-height:44px; align-items:center; gap:10px; font-size:14px; font-weight:650; cursor:pointer; }
.leaderboard-submit input { width:22px; height:22px; accent-color:var(--primary); }
/* Okul: the exact settings the school board compares, and other settings that already have results. */
.leaderboard-settings { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:4px 0 14px; padding:9px 12px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:11px; font-size:15px; overflow-wrap:anywhere; }
.leaderboard-settings span { color:var(--ink-soft); font-size:13px; font-weight:750; }
.leaderboard-settings strong { min-width:0; font-weight:800; }
.leaderboard-settings:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.lb-variants { margin:4px 0 16px; padding:12px 14px; background:var(--surface-soft); border:1px solid var(--line); border-radius:14px; }
.lb-variants__title { margin:0 0 8px; font-size:16px; }
.lb-variants__list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lb-variant { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 10px 8px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.lb-variant__text { display:flex; flex:1 1 220px; min-width:0; flex-direction:column; gap:2px; margin:0; overflow-wrap:anywhere; }
.lb-variant__text strong { font-size:16px; }
.lb-variant__text span { color:var(--ink-soft); font-size:14px; font-weight:650; }
.lb-variant__apply { flex:0 0 auto; min-height:44px; }
@media (max-width:560px) { .lb-variant__apply { flex:1 1 100%; } }
.leaderboard-loading, .leaderboard-error { color:var(--ink-soft); font-weight:650; }
.leaderboard-result { margin:4px auto 12px; max-width:560px; padding:8px 14px; color:var(--ink-soft); background:var(--surface-soft); border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:650; text-align:center; }

/* Setup header: the podium button beside the close button opens the leaderboard dialog. */
.setup-leaderboard-button { position:absolute; z-index:2; top:18px; right:76px; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px 0 12px; color:var(--brand-ink); background:var(--brand-tint); border:1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); border-radius:13px; font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.setup-leaderboard-button svg { width:24px; height:24px; fill:currentColor; }
html:not([data-input="touch"]) .setup-leaderboard-button:hover { color:var(--on-brand); background:var(--primary); }
.setup-leaderboard-button[hidden] { display:none; }
#setupModal .modal__header { padding-right:250px; }

/* Leaderboard dialog: podium for the first three, then a numbered list. */
.leaderboard-dialog { width:min(760px, 94vw); max-height:min(90dvh, 900px); padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-lg); overflow:hidden; }
.leaderboard-dialog[open] { display:flex; flex-direction:column; }
.leaderboard-dialog::backdrop { background:rgba(18,12,48,.55); }
.leaderboard-dialog__header { display:flex; flex-shrink:0; align-items:center; gap:14px; padding:18px 20px 16px 22px; background:linear-gradient(125deg, var(--surface), var(--primary-soft)); border-bottom:1px solid var(--line); }
.leaderboard-dialog__header > div { flex:1; min-width:0; }
.leaderboard-dialog__header h2 { margin:0; font-size:28px; }
.leaderboard-dialog__header p { margin:3px 0 0; color:var(--ink-soft); font-size:14px; font-weight:650; }
.leaderboard-dialog__icon { display:grid; flex-shrink:0; width:52px; height:52px; place-items:center; color:var(--gold-ink); background:var(--gold-fill); border-radius:16px; box-shadow:0 4px 0 color-mix(in srgb, var(--gold-base) 70%, #000); }
.leaderboard-dialog__icon svg { width:30px; height:30px; fill:currentColor; }
.leaderboard-dialog__body { min-height:0; padding:16px 22px 22px; overflow:auto; }
.leaderboard-views { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; padding:5px; margin:0 0 16px; background:var(--surface-soft); border:1px solid var(--line); border-radius:16px; }
.lb-tab { min-height:46px; padding:6px 10px; color:var(--ink-soft); background:none; border:0; border-radius:12px; font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.lb-tab[aria-pressed="true"] { color:var(--on-brand); background:var(--primary); box-shadow:0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
html:not([data-input="touch"]) .lb-tab:hover:not([aria-pressed="true"]) { color:var(--ink); background:var(--surface); }
.lb-board { margin:0 0 20px; }
.lb-board__title { margin:0 0 12px; font-size:17px; }
.lb-podium { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:end; gap:10px; margin:0; padding:0; list-style:none; }
.lb-place { display:flex; min-width:0; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.lb-place[data-place="1"] { order:2; } .lb-place[data-place="2"] { order:1; } .lb-place[data-place="3"] { order:3; }
.lb-medal { display:grid; width:44px; height:44px; place-items:center; color:#3b2a00; background:var(--medal, var(--gold-fill)); border:3px solid color-mix(in srgb, var(--medal, var(--gold-fill)) 60%, #000); border-radius:50%; font-size:20px; font-weight:900; }
.lb-place[data-place="1"] .lb-medal { width:56px; height:56px; font-size:24px; }
.lb-place[data-place="1"] { --medal:#ffd452; --step:84px; } .lb-place[data-place="2"] { --medal:#d5dbe6; --step:58px; } .lb-place[data-place="3"] { --medal:#e8a974; --step:40px; }
.lb-name { max-width:100%; overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.lb-place[data-place="1"] .lb-name { font-size:21px; }
.lb-class, .lb-note { color:var(--ink-soft); font-size:13px; font-weight:650; }
.lb-coach { padding:1px 8px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line-strong); border-radius:999px; font-size:12px; font-weight:800; }
.lb-score { color:var(--ink-soft); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.lb-score b { color:var(--ink); font-size:20px; }
.lb-step { display:block; width:100%; height:var(--step); margin-top:6px; background:linear-gradient(180deg, color-mix(in srgb, var(--medal) 55%, var(--surface)), color-mix(in srgb, var(--medal) 25%, var(--surface))); border:1px solid color-mix(in srgb, var(--medal) 60%, var(--line)); border-bottom:0; border-radius:14px 14px 0 0; }
.lb-list { display:grid; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.lb-row { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 14px 6px 8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.lb-rank { display:grid; flex-shrink:0; width:36px; height:36px; place-items:center; color:var(--ink-soft); background:var(--surface-soft); border-radius:50%; font-weight:900; }
.lb-who { display:flex; flex:1; min-width:0; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.lb-row .lb-name { font-size:17px; }
.lb-empty { padding:18px; color:var(--ink-soft); background:var(--surface-soft); border:1px dashed var(--line-strong); border-radius:14px; text-align:center; font-weight:650; }
.lb-empty__panda { display:block; width:72px; height:72px; margin:0 auto 6px; }
.lb-export { margin-top:4px; }
@media (max-width:560px) {
  .setup-leaderboard-button { right:68px; width:48px; padding:0; justify-content:center; }
  .setup-leaderboard-button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  #setupModal .modal__header { padding-right:128px; }
  .leaderboard-dialog { width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0; }
  .leaderboard-views { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lb-place[data-place="1"] { --step:60px; } .lb-place[data-place="2"] { --step:42px; } .lb-place[data-place="3"] { --step:28px; }
  .lb-name, .lb-place[data-place="1"] .lb-name { font-size:16px; }
}
body.high-contrast .lb-step, body.high-contrast .lb-medal { border-color:currentColor; }