/* TypeFlow v6.6.19 — Identity Rankings
   Replaces first-letter avatars with deterministic geometric identities. */

.tf-identicon{
  --a1:#7567ff;
  --a2:#3d8dff;
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  border-radius:11px;
  background:
    radial-gradient(circle at 72% 22%,rgba(255,255,255,.42) 0 8%,transparent 9%),
    linear-gradient(145deg,var(--a1),var(--a2));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 16px color-mix(in srgb,var(--a1) 20%,transparent);
}
.tf-identicon--md{width:36px;height:36px;border-radius:11px}
.tf-identicon--sm{width:27px;height:27px;border-radius:8px}
.tf-identicon--xs{width:24px;height:24px;border-radius:7px}

.tf-identicon>i,
.tf-identicon>b,
.tf-identicon>em{
  position:absolute;
  display:block;
  margin:0;
  font:inherit;
  background:rgba(255,255,255,.86);
  transform-origin:center;
}
.tf-identicon>i{
  width:44%;height:44%;
  left:12%;top:13%;
  border-radius:40% 60% 58% 42%;
  transform:rotate(var(--avatar-spin,0deg));
  opacity:.92;
}
.tf-identicon>b{
  width:38%;height:38%;
  right:9%;bottom:10%;
  border-radius:50%;
  opacity:.48;
}
.tf-identicon>em{
  width:15%;height:58%;
  left:45%;top:23%;
  border-radius:99px;
  opacity:.34;
  transform:rotate(calc(var(--avatar-spin,0deg) + 35deg));
}

/* Curated TypeFlow palette — no arbitrary rainbow noise. */
.tf-identicon.tone-0{--a1:#725cff;--a2:#8f4eea}
.tf-identicon.tone-1{--a1:#4777ff;--a2:#35a9e9}
.tf-identicon.tone-2{--a1:#7659dd;--a2:#ca5fd6}
.tf-identicon.tone-3{--a1:#466fd4;--a2:#54b9bd}
.tf-identicon.tone-4{--a1:#8462ee;--a2:#ee6d9c}
.tf-identicon.tone-5{--a1:#536bdc;--a2:#8a78f2}
.tf-identicon.tone-6{--a1:#4c7cb8;--a2:#6e5ae5}
.tf-identicon.tone-7{--a1:#7556b9;--a2:#4d87d8}
.tf-identicon.tone-8{--a1:#536ad0;--a2:#42a48d}
.tf-identicon.tone-9{--a1:#8a5ad3;--a2:#5079d9}

/* Motifs substantially change the internal geometry, not just color. */
.tf-identicon.motif-1>i{border-radius:3px;transform:rotate(calc(var(--avatar-spin,0deg) + 18deg))}
.tf-identicon.motif-1>b{border-radius:3px;transform:rotate(35deg)}
.tf-identicon.motif-2>i{width:55%;height:20%;top:23%;border-radius:99px}
.tf-identicon.motif-2>b{width:22%;height:52%;bottom:8%;border-radius:99px}
.tf-identicon.motif-3>i{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.tf-identicon.motif-3>b{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.tf-identicon.motif-4>i{width:50%;height:50%;border-radius:50% 50% 8px 50%}
.tf-identicon.motif-4>b{width:48%;height:18%;border-radius:99px;transform:rotate(-25deg)}
.tf-identicon.motif-5>i{width:20%;height:58%;border-radius:99px;left:23%;top:8%}
.tf-identicon.motif-5>b{width:20%;height:58%;border-radius:99px;right:22%;bottom:7%}
.tf-identicon.motif-6>i{clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);border-radius:2px}
.tf-identicon.motif-6>em{width:55%;height:12%;left:22%;top:45%;border-radius:99px}
.tf-identicon.motif-7>i{width:58%;height:58%;left:21%;top:20%;border-radius:50%;background:transparent;border:3px solid rgba(255,255,255,.86)}
.tf-identicon.motif-7>b{width:22%;height:22%;right:13%;bottom:12%}

.tf-identicon.is-guest{
  filter:saturate(.58);
  opacity:.84;
  border-style:dashed;
}

/* Main leaderboard polish */
.leaderboard-table-card{
  overflow:hidden;
}
.leaderboard-table-card table{
  border-collapse:separate;
  border-spacing:0;
}
.leaderboard-table-card tbody tr{
  transition:background .16s ease,transform .16s ease;
}
.leaderboard-table-card tbody tr:hover{
  background:color-mix(in srgb,var(--primary) 5%,transparent);
}
.leaderboard-table-card tbody td{
  vertical-align:middle;
}
.leaderboard-player{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.leaderboard-player-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.leaderboard-name-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.leaderboard-username{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.leaderboard-player-copy>small{
  color:var(--muted);
  font-size:9.5px;
  font-weight:650;
}
.leaderboard-role-badge{
  min-height:17px;
  padding:0 5px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));
  color:var(--primary);
  font-size:7px;
  font-weight:900;
  letter-spacing:.065em;
}
.leaderboard-rank{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-weight:850;
  font-size:11px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.leaderboard-rank i{font-style:normal;font-size:13px}
.leaderboard-rank.rank-1{
  color:#9a6800;
  border-color:color-mix(in srgb,#e9b833 48%,var(--line));
  background:color-mix(in srgb,#ffd96a 23%,var(--surface));
  box-shadow:0 5px 14px rgba(205,151,27,.11);
}
.leaderboard-rank.rank-2{
  color:#667185;
  border-color:color-mix(in srgb,#aeb8ca 48%,var(--line));
  background:color-mix(in srgb,#cbd3df 18%,var(--surface));
}
.leaderboard-rank.rank-3{
  color:#9a664b;
  border-color:color-mix(in srgb,#c88a68 42%,var(--line));
  background:color-mix(in srgb,#d99b78 15%,var(--surface));
}
.leaderboard-row.podium-row-1{
  background:linear-gradient(90deg,color-mix(in srgb,#ffc848 6%,transparent),transparent 46%);
}
.leaderboard-wpm{
  color:var(--primary);
  font-size:15px;
  font-variant-numeric:tabular-nums;
}
.leaderboard-wpm small{
  color:var(--muted);
  font-size:8px;
  font-weight:750;
}
.leaderboard-accuracy{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 8px;
  border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:10px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}

/* Country is shown beneath the player already; keep the dedicated column
   on desktop, hide it at compact laptop widths to avoid duplication. */
@media (max-width:1100px){
  .leaderboard-table-card th:nth-child(3),
  .leaderboard-table-card td:nth-child(3){display:none}
}

/* Existing home mini leaderboard had explicit .avatar sizing. */
.typing-tool-page .leader-list .tf-identicon{
  width:25px!important;
  height:25px!important;
}

/* Daily challenge row gains one identity column while staying compact. */
.challenge-boards .identity-ranking-row{
  grid-template-columns:28px 24px minmax(0,1fr) auto auto !important;
  gap:8px !important;
}

/* Light theme keeps identities crisp instead of washed out. */
html[data-theme="light"] .tf-identicon{
  border-color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 13px color-mix(in srgb,var(--a1) 15%,transparent);
}

@media (max-width:650px){
  .leaderboard-table-card th:nth-child(5),
  .leaderboard-table-card td:nth-child(5){display:none}
  .leaderboard-player{gap:8px}
  .tf-identicon--md{width:32px;height:32px}
  .leaderboard-rank{width:27px;height:27px}
}