/* 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 panel. */
.setup-modal > .setup-leaderboard-button { position:absolute; z-index:2; top:18px; right:76px; }
#setupModal .modal__header { padding-right:156px; }

/* Leaderboard panel: it replaces the setup form inside the setup dialog (no second dialog), then a podium for the first three and a numbered list. */
.setup-modal.is-board > :is(.modal__header, .setup-form, .setup-leaderboard-button) { display:none; }
.setup-board { display:flex; min-height:0; flex:1 1 auto; flex-direction:column; color:var(--ink); background:var(--paper); }
.setup-board[hidden] { display:none; }
.setup-board__header { display:flex; flex-shrink:0; align-items:center; gap:14px; padding:14px 76px 14px 20px; background:linear-gradient(125deg, var(--surface), var(--primary-soft)); border-bottom:1px solid var(--line); }
.setup-board__header > div { flex:1; min-width:0; }
.setup-board__header h2 { margin:0; font-size:28px; }
.setup-board__header p { margin:3px 0 0; color:var(--ink-soft); font-size:14px; font-weight:650; }
.setup-board__header p:empty { display:none; }
.setup-board__back { flex-shrink:0; }
.setup-board__body { min-height:0; flex:1 1 auto; 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); }
@media (hover: hover) and (pointer: fine) {
  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; }
.leaderboard-panel [data-arena="export-scores"] { margin-top:4px; }
@media (max-width:560px) {
  .setup-modal > .setup-leaderboard-button { right:66px; }
  #setupModal .modal__header { padding-right:128px; }
  .setup-board__header { gap:10px; padding:10px 68px 10px 12px; }
  .setup-board__header h2 { font-size:22px; }
  .setup-board__body { padding:12px; }
  .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; }