.avatar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  z-index: 1400;
  backdrop-filter: blur(8px);
}

.avatar-menu[hidden] {
  display: none !important;
}

.avatar-menu-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  color: var(--gold);
}

.avatar-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: -8px 0 0;
}

@media (max-width: 640px) {
  .avatar-menu {
    left: 50%;
    transform: translateX(-50%);
  }
  .avatar-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}.public-achievements-list {  display: flex;  flex-wrap: wrap;  gap: 8px;  list-style: none;  padding: 0;  margin: 0;}.public-achievements-list li {  display: inline-flex;  align-items: center;  gap: 4px;  padding: 6px 10px;  border-radius: 10px;  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));  background: color-mix(in srgb, var(--gold) 8%, transparent);  font-size: 0.78rem;  font-weight: 650;  color: var(--cream);  line-height: 1.3;}.ach-badge { font-size: 1.1em; }/* Season history on public profiles */.public-season-list {  display: flex;  flex-wrap: wrap;  gap: 8px;  list-style: none;  padding: 0;  margin: 0;}.public-season-list li {  display: inline-flex;  align-items: center;  gap: 4px;  padding: 5px 10px;  border-radius: 10px;  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));  background: color-mix(in srgb, var(--gold) 6%, transparent);  font-size: 0.76rem;  font-weight: 650;  color: var(--cream);  line-height: 1.3;}.season-chip { font-size: 1.05em; }.profile-count {  font-size: 0.7rem;  font-weight: 700;  color: var(--muted);  vertical-align: super;}.profile-container {  display: flex;  justify-content: center;  width: 100%;  padding: 36px 0 80px;}.profile-box {  width: min(900px, 100%);  display: flex;  flex-direction: column;  gap: 18px;  text-align: left;}.profile-page .profile-hero,.profile-page .profile-card {  position: relative;  border: 1px solid var(--line);  border-radius: 18px;  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 42%),    var(--panel);  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.06),    0 12px 32px rgba(0, 0, 0, 0.18);}html[data-theme="light"] .profile-page .profile-hero,html[data-theme="light"] .profile-page .profile-card {  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--panel));  box-shadow:    inset 0 1px 0 #fff,    0 10px 28px rgba(24, 24, 27, 0.06);}.profile-hero {  display: flex;  align-items: center;  gap: 22px;  padding: 26px 28px;}.profile-hero .eyebrow {  margin: 0 0 8px;  color: var(--gold);}.profile-hero h1 {  margin: 0 0 8px;  font-family: var(--serif);  font-size: clamp(1.75rem, 2.7vw, 2.35rem);  font-weight: 700;  letter-spacing: -0.035em;  line-height: 1.12;  color: var(--cream);}.profile-hero-copy {  min-width: 0;}.profile-email {  margin: 0 0 12px;  color: var(--cream-dim);  font-size: 0.95rem;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.profile-meta-row {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 8px;}.profile-plan-chip,.profile-meta-item,.profile-meta-link {  display: inline-flex;  align-items: center;  min-height: 26px;  padding: 0 11px;  border-radius: 999px;  border: 1px solid var(--line);  background: var(--fill-subtle);  color: var(--muted);  font-size: 0.68rem;  font-weight: 700;  letter-spacing: 0.08em;  text-transform: uppercase;  text-decoration: none;}.profile-meta-link {  color: var(--gold-bright);  border-color: rgba(118, 150, 86, 0.4);  background: rgba(118, 150, 86, 0.08);}.profile-meta-link:hover {  border-color: var(--gold-bright);}.profile-avatar-fallback {  background: var(--fill-subtle);  border: 1px solid var(--line);}.profile-avatar-mark {  position: relative;  z-index: 1;  font-size: 1.7rem;  font-weight: 800;  color: var(--gold-bright);}.profile-actions,.profile-card-actions {  display: flex;  flex-wrap: wrap;  gap: 10px;}.profile-card {  display: flex;  flex-direction: column;  gap: 16px;  padding: 24px 26px 22px;}.profile-page .profile-hero,.profile-page .profile-card,.profile-page .stat-card {  transform: none;}.profile-page .profile-card:hover,.profile-page .profile-hero:hover,.profile-page .stat-card:hover {  transform: none;  border-color: var(--line);}.profile-card-top h2,.profile-card h2,.profile-card h3 {  margin: 0;  font-size: 0.7rem;  letter-spacing: 0.16em;  text-transform: uppercase;  color: var(--gold);  font-weight: 700;}.profile-card-top {  padding-bottom: 14px;  border-bottom: 1px solid var(--line);}.profile-card-head {  display: flex;  align-items: baseline;  justify-content: space-between;  gap: 12px;}.profile-quiet-link {  color: var(--muted);  font-size: 0.76rem;  font-weight: 600;  letter-spacing: 0.04em;  text-decoration: none;}.profile-quiet-link:hover {  color: var(--gold-bright);}.profile-grid {  display: grid;  grid-template-columns: 1fr;  gap: 18px;}@media (min-width: 840px) {  .profile-grid {    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);    align-items: stretch;  }  .profile-card--plan,  .profile-card--stats {    min-height: 100%;  }  .profile-card--plan .profile-card-actions,  .profile-card--stats .stats-grid {    margin-top: auto;  }}.profile-plan-note {  margin: 8px 0 0;  color: var(--muted);  line-height: 1.65;  font-size: 0.94rem;}.profile-plan-status {  margin: 0;  padding: 14px 16px;  border-radius: 14px;  border: 1px solid var(--line);  background: var(--fill-subtle);}#premium-status,#premium-remaining {  margin: 0;  color: var(--cream);  line-height: 1.55;  font-size: 1.02rem;  font-weight: 700;}#premium-remaining {  margin-top: 4px;  color: var(--muted);  font-size: 0.9rem;  font-weight: 500;}.profile-page .stats-grid {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 10px;  flex: 1;}.profile-page .stat-card {  padding: 16px 14px 14px;  border: 1px solid var(--line);  border-radius: 14px;  background: var(--fill-subtle);  box-shadow: none;}.profile-page .stat-label {  display: block;  margin: 0 0 8px;  font-size: 0.62rem;  letter-spacing: 0.14em;  text-transform: uppercase;  color: var(--gold);  font-weight: 700;}.profile-page .stat-card strong {  color: var(--cream);  font-size: 1.55rem;  font-weight: 700;  font-variant-numeric: tabular-nums;  letter-spacing: -0.03em;}#cancel-premium-btn,#sign-out-button {  display: inline-flex;  align-items: center;  justify-content: center;  min-height: 42px;  padding: 0 16px;  border: 1px solid var(--line-strong);  border-radius: 11px;  background: transparent;  color: var(--cream);  font-family: var(--font);  font-size: 0.78rem;  font-weight: 600;  letter-spacing: 0.04em;  text-decoration: none;  cursor: pointer;}#cancel-premium-btn:hover,#sign-out-button:hover {  border-color: var(--gold-bright);  color: var(--gold-bright);}#manage-billing-btn {  border-color: var(--line-strong);  color: var(--cream);}.profile-cancel-confirm {  margin: 12px 0 0;  padding: 14px 16px;  border: 1px solid var(--danger-border);  border-radius: 14px;  background: var(--danger-bg);}.profile-cancel-confirm > p:first-child {  margin: 0 0 12px;  color: var(--danger-text);  font-size: 0.92rem;  line-height: 1.6;}.profile-cancel-confirm .profile-card-actions {  margin: 0;}.profile-cancel-status {  margin: 10px 0 0;  color: var(--danger-text);  font-size: 0.86rem;  line-height: 1.5;}.profile-form-row {  display: grid;  grid-template-columns: 1fr;  gap: 14px;}@media (min-width: 640px) {  .profile-form-row {    grid-template-columns: 1fr 1fr;  }}.profile-flashes {  list-style: none;  margin: 0;  padding: 0;  display: grid;  gap: 8px;}.profile-flash {  margin: 0;  padding: 12px 14px;  border-radius: 12px;  border: 1px solid var(--line);  color: var(--cream);  font-size: 0.92rem;}.profile-flash--warning {  border-color: var(--gold);}.profile-flash--info,.profile-flash--success {  border-color: rgba(118, 150, 86, 0.45);}.profile-edit-form {  display: grid;  gap: 14px;}.profile-edit-form label {  display: grid;  gap: 7px;  color: var(--muted);  font-size: 0.68rem;  font-weight: 700;  letter-spacing: 0.1em;  text-transform: uppercase;}.profile-edit-form input,.profile-edit-form textarea {  width: 100%;  min-height: 46px;  padding: 12px 14px;  border-radius: 12px;  border: 1px solid var(--line);  background: var(--input-bg);  color: var(--input-text);  font-family: var(--font);  font-size: 1rem;  font-weight: 500;  text-transform: none;  letter-spacing: 0;  transition: border-color 0.15s ease, box-shadow 0.15s ease;}.profile-edit-form textarea {  min-height: 128px;  resize: vertical;  line-height: 1.55;}.profile-edit-form input:hover,.profile-edit-form textarea:hover {  border-color: var(--line-strong);}.profile-edit-form input:focus,.profile-edit-form textarea:focus {  outline: none;  border-color: var(--gold-bright);  box-shadow: 0 0 0 3px rgba(118, 150, 86, 0.18);}.profile-check {  display: flex !important;  flex-direction: row;  align-items: center;  gap: 10px;  margin-top: 2px;  padding: 12px 14px;  border-radius: 12px;  border: 1px solid var(--line);  background: var(--fill-subtle);  text-transform: none;  letter-spacing: 0;  font-size: 0.92rem;  font-weight: 600;  color: var(--cream);}.profile-check input {  width: 16px;  height: 16px;  min-height: 0;  accent-color: #769656;}.public-profile {  width: min(720px, 100%);  margin: 0 auto;  padding: 28px 0 56px;  display: grid;  gap: 18px;}.public-hero h1 {  margin: 0 0 6px;  font-family: var(--serif);  font-size: clamp(2rem, 3vw, 2.6rem);  color: var(--cream);}.profile-identity {  display: flex;  align-items: center;  gap: 16px;}.profile-identity h2 {  margin: 0 0 8px;}.premium-pill {  display: inline-flex;  align-items: center;  width: fit-content;  margin: 0;  padding: 4px 10px;  border-radius: 999px;  border: 1px solid rgba(251, 191, 36, 0.85);  background: linear-gradient(180deg, rgba(253, 224, 71, 0.28), rgba(245, 158, 11, 0.12));  color: var(--gold-bright);  font-size: 0.62rem;  font-weight: 700;  letter-spacing: 0.14em;  text-transform: uppercase;  box-shadow: 0 0 14px rgba(250, 204, 21, 0.35);}/* Plus sits beside Unlimited rather than below it: same pill shape, the site's   blue instead of gold, and a lighter glow so two paid badges on one page stay   distinguishable at a glance. Gold is left exclusively to Unlimited, which is   the tier its colour already meant. */.premium-pill--plus {  border-color: rgba(96, 165, 250, 0.8);  background: linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(37, 99, 235, 0.12));  color: var(--cream);  box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);}.avatar-frame {  --avatar-size: 120px;  --avatar-knockout: var(--bg);  --ring-out: -5px;  --ring-in: 4px;  --photo-inset: 12px;  position: relative;  display: grid;  place-items: center;  width: var(--avatar-size);  height: var(--avatar-size);  flex-shrink: 0;  border-radius: 50%;}.avatar-frame--sm {  --avatar-size: 72px;  --ring-out: -1px;  --ring-in: 2px;  --photo-inset: 5px;}.avatar-frame--sm.avatar-frame--unlimited {  filter: drop-shadow(0 0 2px rgba(var(--brand-glow, 57, 255, 20), 0.4));  animation: none;}.avatar-frame--sm[class*="avatar-frame--style-"] {  filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.4));  animation: none;}.avatar-frame--sm.avatar-frame--unlimited::before {  inset: 0;  background: none;  box-shadow: 0 0 0 2px rgb(var(--brand-glow, 57, 255, 20)), 0 0 6px rgba(var(--brand-glow, 57, 255, 20), 0.4);  animation: none;}.avatar-frame--sm[class*="avatar-frame--style-"]::before {  inset: 0;  background: none;  box-shadow: 0 0 0 2px #39ff14, 0 0 6px rgba(57, 255, 20, 0.4);  animation: none;}.avatar-frame--sm.avatar-frame--unlimited::after,.avatar-frame--sm[class*="avatar-frame--style-"]::after {  display: none;}.avatar-frame--sm.avatar-frame--unlimited .avatar-photo,.avatar-frame--sm[class*="avatar-frame--style-"] .avatar-photo {  width: 100%;  height: 100%;  border: 1px solid var(--line);}.avatar-frame--md {  --avatar-size: 88px;  --ring-out: -2px;  --ring-in: 3px;  --photo-inset: 8px;}.avatar-frame--hero {  --avatar-size: 128px;}.avatar-photo {  position: relative;  z-index: 1;  width: 100%;  height: 100%;  border-radius: 50%;  object-fit: cover;  background: var(--thumb-bg);  border: 1px solid var(--line);}.avatar-frame--unlimited .avatar-photo,.avatar-frame[class*="avatar-frame--style-"] .avatar-photo {  width: calc(100% - var(--photo-inset));  height: calc(100% - var(--photo-inset));  border: 2px solid var(--avatar-knockout);}.avatar-frame--sm.avatar-frame--unlimited .avatar-photo,.avatar-frame--sm[class*="avatar-frame--style-"] .avatar-photo {  border-width: 1px;}.avatar-frame--unlimited::before,.avatar-frame[class*="avatar-frame--style-"]::before {  content: "";  position: absolute;  inset: var(--ring-out);  border-radius: 50%;  background: var(--premium-ring, conic-gradient(from 0deg, #00a820, #7cff4a, #f0ffe6, #00cc22, #39ff14, #00d92e, #00a820));  animation: premium-spin 5.5s linear infinite;  z-index: 0;}.avatar-frame--unlimited::after,.avatar-frame[class*="avatar-frame--style-"]::after {  content: "";  position: absolute;  inset: var(--ring-in);  border-radius: 50%;  background: var(--avatar-knockout);  z-index: 0;}.avatar-frame--unlimited:not(.avatar-frame--sm),.avatar-frame[class*="avatar-frame--style-"]:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(var(--brand-glow, 57, 255, 20), 0.65)) drop-shadow(0 0 22px rgba(var(--brand-glow-deep, 0, 204, 34), 0.4));  animation: premium-pulse 2.6s ease-in-out infinite;}.avatar-frame--style-emerald::before {  background: conic-gradient(from 0deg, #14532d, #86efac, #ecfdf5, #22c55e, #4ade80, #166534, #14532d);}.avatar-frame--sm.avatar-frame--style-emerald::before {  box-shadow: 0 0 0 2px #22c55e, 0 0 6px rgba(34, 197, 94, 0.35);}.avatar-frame--style-emerald:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.55)) drop-shadow(0 0 18px rgba(22, 163, 74, 0.35));  animation: frame-pulse-emerald 2.6s ease-in-out infinite;}.avatar-frame--style-ocean::before {  background: conic-gradient(from 0deg, #0c4a6e, #7dd3fc, #e0f2fe, #0ea5e9, #38bdf8, #0369a1, #0c4a6e);}.avatar-frame--sm.avatar-frame--style-ocean::before {  box-shadow: 0 0 0 2px #0ea5e9, 0 0 6px rgba(14, 165, 233, 0.35);}.avatar-frame--style-ocean:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55)) drop-shadow(0 0 18px rgba(14, 165, 233, 0.32));  animation: frame-pulse-ocean 2.6s ease-in-out infinite;}.avatar-frame--style-crimson::before {  background: conic-gradient(from 0deg, #7f1d1d, #fb7185, #fff1f2, #ef4444, #f87171, #991b1b, #7f1d1d);}.avatar-frame--sm.avatar-frame--style-crimson::before {  box-shadow: 0 0 0 2px #ef4444, 0 0 6px rgba(239, 68, 68, 0.35);}.avatar-frame--style-crimson:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.55)) drop-shadow(0 0 18px rgba(220, 38, 38, 0.32));  animation: frame-pulse-crimson 2.6s ease-in-out infinite;}.avatar-frame--style-ivory::before {  background: conic-gradient(from 0deg, #78716c, #f5f5f4, #ffffff, #d6d3d1, #a8a29e, #57534e, #78716c);}.avatar-frame--sm.avatar-frame--style-ivory::before {  box-shadow: 0 0 0 2px #d6d3d1, 0 0 6px rgba(214, 211, 209, 0.4);}.avatar-frame--style-ivory:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(245, 245, 244, 0.45)) drop-shadow(0 0 16px rgba(168, 162, 158, 0.28));  animation: frame-pulse-ivory 2.6s ease-in-out infinite;}.avatar-frame--style-obsidian::before {  background: conic-gradient(from 0deg, #09090b, #a1a1aa, #fafafa, #71717a, #3f3f46, #18181b, #09090b);}.avatar-frame--sm.avatar-frame--style-obsidian::before {  box-shadow: 0 0 0 2px #a1a1aa, 0 0 6px rgba(161, 161, 170, 0.35);}.avatar-frame--style-obsidian:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(161, 161, 170, 0.45)) drop-shadow(0 0 16px rgba(63, 63, 70, 0.4));  animation: frame-pulse-obsidian 2.6s ease-in-out infinite;}.avatar-frame--style-aurora::before {  background: conic-gradient(from 0deg, #831843, #22d3ee, #a78bfa, #f472b6, #34d399, #60a5fa, #831843);}.avatar-frame--sm.avatar-frame--style-aurora::before {  box-shadow: 0 0 0 2px #a78bfa, 0 0 6px rgba(167, 139, 250, 0.4);}.avatar-frame--style-aurora:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.55)) drop-shadow(0 0 18px rgba(52, 211, 153, 0.28));  animation: frame-pulse-aurora 2.6s ease-in-out infinite;}.avatar-frame--style-royal::before {  background: conic-gradient(from 0deg, #4c1d95, #c4b5fd, #ede9fe, #8b5cf6, #a78bfa, #6d28d9, #4c1d95);}.avatar-frame--sm.avatar-frame--style-royal::before {  box-shadow: 0 0 0 2px #8b5cf6, 0 0 6px rgba(139, 92, 246, 0.4);}.avatar-frame--style-royal:not(.avatar-frame--sm) {  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.6)) drop-shadow(0 0 18px rgba(109, 40, 217, 0.35));  animation: frame-pulse-royal 2.6s ease-in-out infinite;}@keyframes premium-spin {  to { transform: rotate(360deg); }}@keyframes premium-pulse {  0%, 100% {    filter: drop-shadow(0 0 8px rgba(var(--brand-glow, 57, 255, 20), 0.55)) drop-shadow(0 0 18px rgba(var(--brand-glow-deep, 0, 204, 34), 0.28));  }  50% {    filter: drop-shadow(0 0 14px rgba(var(--brand-glow-bright, 124, 255, 74), 0.85)) drop-shadow(0 0 28px rgba(var(--brand-glow, 57, 255, 20), 0.5));  }}@keyframes frame-pulse-emerald {  0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4)) drop-shadow(0 0 16px rgba(22, 163, 74, 0.25)); }  50% { filter: drop-shadow(0 0 14px rgba(134, 239, 172, 0.75)) drop-shadow(0 0 26px rgba(34, 197, 94, 0.45)); }}@keyframes frame-pulse-ocean {  0%, 100% { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.4)) drop-shadow(0 0 16px rgba(14, 165, 233, 0.25)); }  50% { filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.75)) drop-shadow(0 0 26px rgba(14, 165, 233, 0.45)); }}@keyframes frame-pulse-crimson {  0%, 100% { filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.4)) drop-shadow(0 0 16px rgba(220, 38, 38, 0.25)); }  50% { filter: drop-shadow(0 0 14px rgba(252, 165, 165, 0.75)) drop-shadow(0 0 26px rgba(239, 68, 68, 0.45)); }}@keyframes frame-pulse-ivory {  0%, 100% { filter: drop-shadow(0 0 8px rgba(245, 245, 244, 0.35)) drop-shadow(0 0 14px rgba(168, 162, 158, 0.22)); }  50% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 22px rgba(214, 211, 209, 0.35)); }}@keyframes frame-pulse-obsidian {  0%, 100% { filter: drop-shadow(0 0 8px rgba(161, 161, 170, 0.35)) drop-shadow(0 0 14px rgba(63, 63, 70, 0.3)); }  50% { filter: drop-shadow(0 0 12px rgba(212, 212, 216, 0.55)) drop-shadow(0 0 22px rgba(113, 113, 122, 0.4)); }}@keyframes frame-pulse-aurora {  0%, 100% { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4)) drop-shadow(0 0 16px rgba(52, 211, 153, 0.22)); }  50% { filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.55)) drop-shadow(0 0 26px rgba(96, 165, 250, 0.4)); }}@keyframes frame-pulse-royal {  0%, 100% { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45)) drop-shadow(0 0 16px rgba(109, 40, 217, 0.28)); }  50% { filter: drop-shadow(0 0 14px rgba(196, 181, 253, 0.75)) drop-shadow(0 0 26px rgba(139, 92, 246, 0.45)); }}@media (prefers-reduced-motion: reduce) {  .avatar-frame--unlimited:not(.avatar-frame--sm),  .avatar-frame--unlimited::before,  .avatar-frame[class*="avatar-frame--style-"]:not(.avatar-frame--sm),  .avatar-frame[class*="avatar-frame--style-"]::before {    animation: none;  }}.avatar-frame-picker {  margin: 0 0 16px;  padding: 0;  border: 0;}.profile-avatar-shell {  position: relative;  flex-shrink: 0;  width: fit-content;}.avatar-frame-trigger {  position: static;  display: inline-flex;  align-items: center;  gap: 7px;  min-height: 34px;  padding: 5px 10px 5px 6px;  border: 1px solid var(--line);  border-radius: 10px;  background: var(--paper);  color: var(--cream);  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);  cursor: pointer;  text-decoration: none;  font-family: inherit;}.avatar-frame-trigger:hover,.avatar-frame-trigger:focus-visible,.avatar-frame-trigger[aria-expanded="true"] {  border-color: var(--gold);  color: var(--gold-bright);  outline: none;}.avatar-frame-trigger--locked {  color: var(--muted);}.avatar-frame-menu {  position: fixed;  top: 0;  left: 0;  z-index: 1400;  width: min(360px, calc(100vw - 24px));  padding: 14px;  border: 1px solid var(--line);  border-radius: 14px;  background: var(--paper);  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);}.avatar-frame-menu[hidden] {  display: none !important;}.avatar-frame-menu-title {  margin: 0 0 10px;  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.08em;  text-transform: uppercase;  color: var(--muted);}.avatar-frame-menu-grid {  display: grid;  grid-template-columns: repeat(4, minmax(0, 1fr));  gap: 8px;}.avatar-frame-chip {  display: flex;  flex-direction: column;  align-items: center;  gap: 6px;  margin: 0;  padding: 8px 4px;  border: 1px solid transparent;  border-radius: 12px;  background: transparent;  color: var(--cream);  cursor: pointer;}.avatar-frame-chip:hover,.avatar-frame-chip:focus-visible {  background: var(--fill-subtle);  outline: none;}.avatar-frame-chip.is-active {  border-color: var(--gold);  background: color-mix(in srgb, var(--gold) 12%, transparent);}.avatar-frame-chip .avatar-frame {  pointer-events: none;}.avatar-frame-chip-label {  font-size: 0.68rem;  font-weight: 600;  color: var(--muted);  letter-spacing: 0.02em;}.avatar-frame-chip.is-active .avatar-frame-chip-label {  color: var(--gold-bright);}.avatar-frame-status {  margin: 10px 0 0;  font-size: 0.78rem;  color: var(--muted);  text-align: center;}@media (max-width: 640px) {.avatar-chip {  display: flex;  flex-direction: column;  align-items: center;  gap: 6px;  margin: 0;  padding: 8px 4px;  border: 1px solid transparent;  border-radius: 12px;  background: transparent;  color: var(--cream);  cursor: pointer;}.avatar-chip:hover,.avatar-chip:focus-visible {  background: var(--fill-subtle);  outline: none;}.avatar-chip.is-active {  border-color: var(--gold);  background: color-mix(in srgb, var(--gold) 12%, transparent);}.avatar-chip .avatar {  pointer-events: none;}.avatar-chip-label {  font-size: 0.68rem;  font-weight: 600;  color: var(--muted);  letter-spacing: 0.02em;}.avatar-chip.is-active .avatar-chip-label {  color: var(--gold-bright);}.avatar-status {  margin: 10px 0 0;  font-size: 0.78rem;  color: var(--muted);  text-align: center;}  .avatar-frame-menu {    left: 50%;    transform: translateX(-50%);  }  .avatar-frame-menu-grid {    grid-template-columns: repeat(4, minmax(0, 1fr));  }}.avatar-frame-options {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 10px;  margin-top: 12px;}.avatar-frame-option {  display: grid;  grid-template-columns: auto 1fr;  gap: 10px;  align-items: center;  margin: 0;  padding: 10px;  border: 1px solid var(--line);  border-radius: 12px;  background: var(--fill-subtle);  cursor: pointer;}.avatar-frame-option:has(input:checked) {  border-color: var(--gold);  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);}.avatar-frame-option input {  position: absolute;  opacity: 0;  pointer-events: none;}.avatar-frame-option-copy {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0;}.avatar-frame-option-copy strong {  font-size: 0.9rem;  color: var(--cream);}.avatar-frame-option-copy span {  font-size: 0.75rem;  color: var(--muted);  line-height: 1.35;}@media (max-width: 640px) {  .avatar-frame-options {    grid-template-columns: 1fr;  }}.public-handle {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 8px 10px;  margin: 0 0 10px;  color: var(--gold);  letter-spacing: 0.06em;}.public-bio {  margin: 0 0 16px;  color: var(--cream-dim);  line-height: 1.7;  white-space: pre-wrap;}.public-studio-body {  font-size: 1.05rem;}.public-hero-actions {  display: flex;  flex-wrap: wrap;  gap: 10px;}.profile-upvote-btn {  display: inline-flex;  align-items: center;  gap: 6px;  padding: 8px 14px;  font-size: 0.85rem;  font-weight: 600;  line-height: 1.3;  border: 1px solid var(--line);  background: var(--surface-2);  color: var(--cream);  transition: background 0.15s, border-color 0.15s, color 0.15s;}.profile-upvote-btn:hover:not(:disabled) {  background: var(--gold);  border-color: var(--gold);  color: var(--on-gold);}.profile-upvote-btn.upvoted {  background: var(--gold);  border-color: var(--gold);  color: var(--on-gold);}.profile-upvote-btn:disabled {  opacity: 0.5;  cursor: not-allowed;}.profile-upvote-btn .upvote-count {  font-variant-numeric: tabular-nums;  color: var(--blue);}.profile-upvote-btn .upvote-icon {  font-size: 0.95em;  line-height: 1;}.public-course-list,.public-comment-list {  list-style: none;  margin: 0;  padding: 0;  display: grid;  gap: 10px;}.public-course-list li,.public-comment-list li {  display: grid;  gap: 4px;  padding: 12px 0 0;  border-top: 1px solid var(--line);}.public-course-list li:first-child,.public-comment-list li:first-child {  border-top: 0;  padding-top: 0;}.public-course-list a {  color: var(--cream);  font-weight: 600;  text-decoration: none;}.public-course-list span,.public-comment-meta {  color: var(--muted);  font-size: 0.85rem;}.public-comment-form {  display: grid;  gap: 10px;  margin-bottom: 16px;}.public-comment-form textarea {  width: 100%;  padding: 12px;  border-radius: 10px;  border: 1px solid var(--line);  background: var(--input-bg);  color: var(--input-text);  font-family: var(--font);  font-size: 1rem;}.public-comment-list p {  margin: 0;  color: var(--cream);  line-height: 1.55;}.public-comment-meta a {  color: var(--gold);  text-decoration: none;}.public-comment-delete {  justify-self: start;  padding: 0;  border: 0;  background: none;  color: var(--muted);  cursor: pointer;  font-size: 0.75rem;  letter-spacing: 0.06em;  text-transform: uppercase;}.public-comment-delete:hover {  color: var(--gold);}.admin-tools {  display: flex;  flex-wrap: wrap;  gap: 10px;  margin-top: 16px;  grid-column: 1 / -1;}.btn.admin-danger {  background: var(--danger-fill, #3b1212);  color: var(--danger-text, #fecaca);  border: 1px solid var(--danger-line, #7f1d1d);}.members-page {  width: 100%;  padding: 28px 0 48px;}.members-head {  max-width: 40rem;  margin-bottom: 22px;}.members-head h1 {  margin: 0 0 8px;  font-family: var(--serif);  font-size: clamp(2rem, 3.4vw, 2.8rem);  font-weight: 800;  letter-spacing: -0.03em;  line-height: 1.1;  color: var(--cream);}.members-head p {  margin: 0;  color: var(--muted);  line-height: 1.7;  font-size: 1.05rem;}.members-search {  display: flex;  flex-wrap: nowrap;  align-items: stretch;  gap: 0;  margin: 0 0 14px;  width: 100%;}.members-search input {  flex: 1 1 auto;  min-width: 0;  height: 48px;  box-sizing: border-box;  margin: 0;  padding: 0 16px;  border-radius: 10px 0 0 10px;  border: 1px solid var(--line);  border-right: 0;  background: var(--input-bg);  color: var(--input-text);  font-family: var(--font);  font-size: 1rem;  appearance: none;  -webkit-appearance: none;}.members-search input:focus {  outline: none;  border-color: var(--gold-bright);}.members-search input::-webkit-search-decoration,.members-search input::-webkit-search-cancel-button {  -webkit-appearance: none;}.members-search .btn {  flex: 0 0 auto;  height: 48px;  box-sizing: border-box;  padding: 0 20px;  border-radius: 0 10px 10px 0;}.members-count {  margin: 0 0 16px;  color: var(--muted);  font-size: 0.85rem;}.members-list {  list-style: none;  margin: 0;  padding: 0;  display: grid;  grid-template-columns: 1fr;  gap: 12px;}@media (min-width: 760px) {  .members-list {    grid-template-columns: repeat(2, minmax(0, 1fr));  }}@media (max-width: 520px) {  .members-search {    flex-wrap: wrap;    gap: 8px;  }  .members-search input,  .members-search .btn {    width: 100%;    border-radius: 10px;    border-right: 1px solid var(--line);  }}.members-row {  display: grid;  gap: 8px;}.members-admin-form {  justify-self: start;}.members-card {  display: flex;  gap: 14px;  align-items: flex-start;  min-height: 88px;  padding: 16px;  border: 1px solid var(--line);  border-radius: 14px;  background: var(--panel);  text-decoration: none;  color: inherit;}.members-card .avatar-frame,.profile-identity .avatar-frame {  --avatar-knockout: var(--panel);}.members-avatar,.members-mark {  width: 72px;  height: 72px;  flex-shrink: 0;  border-radius: 50%;  object-fit: cover;  background: var(--thumb-bg);}.avatar-frame .members-avatar,.avatar-frame .members-mark,.avatar-frame .public-avatar {  width: 100%;  height: 100%;}.avatar-frame--unlimited .avatar-photo {  width: calc(100% - var(--photo-inset));  height: calc(100% - var(--photo-inset));}.members-mark {  display: flex;  align-items: center;  justify-content: center;  /* An initial tile, not a brand chip. It was inheriting --thumb-bg for its     fill and --gold-bright for its letter, and in light mode those are the     same blue: #1d4ed8 on #2563eb, a 1.3:1 pair. The letter all but vanished     into the disc, which is what made an avatar-less profile look broken.     --input-bg and --input-text are the neutral surface/text pair, and they     flip with the theme: near-black on white in light, near-white on charcoal     in dark. --ink would have been wrong here, since it is near-black in both     themes and disappears against the dark surface. The blue edge is kept so a     premium frame still reads as framed. */  background: var(--input-bg);  color: var(--input-text);  border: 1px solid var(--line);  font-weight: 800;  font-size: 1.4rem;}.members-copy {  display: grid;  gap: 4px;  min-width: 0;}.members-copy strong {  color: var(--cream);  font-size: 1.05rem;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.members-meta {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 6px 8px;  color: var(--gold);  font-size: 0.78rem;}.public-hero {  display: grid;  grid-template-columns: auto 1fr;  gap: 20px 24px;  align-items: start;}.public-avatar {  width: 120px;  height: 120px;  border-radius: 50%;  object-fit: cover;  background: var(--thumb-bg);  border: 1px solid var(--line);}.avatar-frame .public-avatar {  width: 100%;  height: 100%;}.public-avatar-fallback {  display: flex;  align-items: center;  justify-content: center;  color: var(--gold-bright);  font-size: 2.4rem;  font-weight: 800;}.public-hero-copy {  min-width: 0;}.public-bio-empty {  font-style: italic;}@media (max-width: 640px) {  .public-hero,  .profile-hero {    grid-template-columns: 1fr;  }  .profile-hero {    flex-direction: column;    align-items: flex-start;    padding: 22px 18px;  }  .profile-card {    padding: 20px 18px 18px;  }}.signup-table-wrap {  overflow-x: auto;  border: 1px solid var(--line);  border-radius: 14px;  background: var(--panel);}.signup-table {  width: 100%;  border-collapse: collapse;  font-size: 0.9rem;}.signup-table th,.signup-table td {  padding: 12px 14px;  text-align: left;  border-bottom: 1px solid var(--line);  white-space: nowrap;}.signup-table th {  font-size: 0.68rem;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--gold);  font-weight: 700;}.signup-table td {  color: var(--cream);}.signup-table tbody tr:last-child td {  border-bottom: 0;}.signup-table a {  color: var(--gold);  text-decoration: none;}.signup-table a:hover {  text-decoration: underline;}/* Wide board: the two ranking tables ARE the page, so the shared 1240px measure   wastes the screen on a 27" display.   Keyed on the BODY class on purpose — .leaderboard-page is set on <main>, which   is a DESCENDANT of .page-shell, so a `.leaderboard-page .page-shell` selector   could never match the shell it sits inside. Same trap the repertoire page hit. */body.leaderboard-page .page-shell {  width: min(1560px, calc(100% - 32px));  max-width: none;}.leaderboard-page {  max-width: none;  margin: 0 auto;}.leaderboard-hero {  max-width: none;  position: relative;  margin-bottom: 20px;  padding: 26px 28px 22px;  border: 1px solid var(--line);  border-radius: 20px;  background:    radial-gradient(120% 130% at 85% -30%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 55%),    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),    var(--panel);  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.06),    0 14px 36px rgba(0, 0, 0, 0.20);  overflow: hidden;}html[data-theme="light"] .leaderboard-hero {  background:    radial-gradient(120% 130% at 85% -30%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%),    linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--panel));  box-shadow:    inset 0 1px 0 #fff,    0 12px 30px rgba(24, 24, 27, 0.07);}.leaderboard-hero h1 {  display: flex;  align-items: center;  gap: 12px;}.leaderboard-trophy {  display: inline-flex;  align-items: center;  justify-content: center;  width: 52px;  height: 52px;  flex: 0 0 auto;  border-radius: 16px;  background:    linear-gradient(135deg, color-mix(in srgb, var(--gold) 85%, #fff 10%), color-mix(in srgb, var(--gold-deep, var(--gold)) 90%, #000 5%));  box-shadow:    0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent),    0 8px 24px color-mix(in srgb, var(--gold) 38%, transparent);  font-size: 1.55rem;  line-height: 1;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 10px rgba(0, 0, 0, 0.28);}.leaderboard-sub {  margin: 6px 0 0 !important;  max-width: 58ch;  font-size: 0.98rem !important;  line-height: 1.6 !important;}.leaderboard-tabs {  display: inline-flex;  flex-wrap: wrap;  gap: 4px;  margin: 0 0 16px;  padding: 4px;  border: 1px solid var(--line);  border-radius: 999px;  background: var(--fill-subtle);}.leaderboard-tab {  display: inline-flex;  align-items: center;  gap: 7px;  padding: 8px 16px;  border-radius: 999px;  border: 1px solid transparent;  color: var(--muted);  font-size: 0.88rem;  font-weight: 700;  text-decoration: none;  white-space: nowrap;  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;}.leaderboard-tab:hover {  color: var(--cream);  background: var(--hover-fill);}.leaderboard-tab:focus-visible {  outline: 2px solid var(--gold-bright);  outline-offset: 2px;}.leaderboard-tab.is-active {  color: var(--gold-bright);  background: var(--panel);  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent);}.leaderboard-page.is-switching .leaderboard-list,.leaderboard-page.is-switching .leaderboard-empty,.leaderboard-page.is-switching .leaderboard-standing {  opacity: 0.42;  transition: opacity 0.14s ease;}.leaderboard-list,.leaderboard-empty,.leaderboard-standing {  transition: opacity 0.16s ease;}.leaderboard-countdown.is-hidden,.leaderboard-countdown[hidden] {  display: none !important;}.leaderboard-countdown-icon {  font-size: 0.85rem;  line-height: 1;}.leaderboard-countdown-icon--hidden {  visibility: hidden;}.leaderboard-list {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-direction: column;  gap: 6px;}.leaderboard-row {  display: grid;  grid-template-columns: 2.1rem minmax(0, 1fr);  gap: 5px;  align-items: stretch;}.leaderboard-rank {  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;  gap: 2px;  min-height: 100%;  padding: 3px 0;  border: 1px solid var(--line);  border-radius: 7px;  background: var(--fill-subtle);  font-variant-numeric: tabular-nums;  font-weight: 800;  font-size: 0.72rem;  color: var(--muted);  text-align: center;  line-height: 1.1;}.leaderboard-rank-medal {  font-size: 0.7rem;  line-height: 1;  min-height: 0;}.leaderboard-rank-medal:empty {  display: none;}.leaderboard-rank-num {  font-size: 0.72rem;}.leaderboard-row.is-you .leaderboard-rank {  color: var(--gold-bright);  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));  background: color-mix(in srgb, var(--gold) 10%, var(--fill-subtle));}.leaderboard-row.is-you .leaderboard-score-num {  color: var(--gold-bright);}.leaderboard-row .members-card {  align-items: center;  min-height: 0;  gap: 10px;  padding: 7px 12px;  border-radius: 10px;  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;}/* Compact ranking rows: the member-card primitives are sized for the roomy   /members directory and profile pages (72px avatars, 16px padding). On a   100-row ranking board they made each entry ~96px tall, so barely a screenful   of players fit. These overrides are scoped to the row so the directory and   profile pages keep their larger avatars and padding untouched. */.leaderboard-row .avatar-frame--sm {  --avatar-size: 40px;  --photo-inset: 3px;}.leaderboard-row .members-mark {  font-size: 1rem;}.leaderboard-row .members-copy strong {  font-size: 0.92rem;}.leaderboard-row .members-meta {  font-size: 0.72rem;  gap: 4px 6px;}a.leaderboard-row .members-card,.leaderboard-row a.members-card {  cursor: pointer;}.leaderboard-row a.members-card:hover {  transform: translateY(-1px);  border-color: var(--line-strong, var(--line));  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);}.leaderboard-score {  margin-left: auto;  padding-left: 12px;  display: inline-flex;  align-items: baseline;  gap: 6px;  font-variant-numeric: tabular-nums;  color: var(--cream);}.leaderboard-score-num {  font-size: 1.15rem;  font-weight: 800;  letter-spacing: -0.02em;}.leaderboard-score-unit {  font-size: 0.66rem;  font-weight: 800;  letter-spacing: 0.1em;  text-transform: uppercase;  color: var(--muted);}.leaderboard-delta {  display: inline-flex;  align-items: center;  margin-left: 4px;  padding: 1px 5px;  border-radius: 5px;  background: color-mix(in srgb, #22c55e 18%, transparent);  color: #22c55e;  font-size: 0.64rem;  font-weight: 800;  letter-spacing: -0.01em;  line-height: 1.3;}.leaderboard-you-badge {  display: inline-block;  vertical-align: 2px;  margin-left: 6px;  padding: 1px 8px;  border-radius: 999px;  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);  background: color-mix(in srgb, var(--gold) 16%, transparent);  color: var(--gold-bright);  font-size: 0.62rem;  font-weight: 800;  letter-spacing: 0.1em;  text-transform: uppercase;}.leaderboard-race {  display: grid;  gap: 14px;  margin: 0 0 20px;  padding: 16px 18px;  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));  border-radius: 18px;  background:    linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),    var(--panel);  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.05),    0 12px 30px rgba(0, 0, 0, 0.16);}.leaderboard-race-top {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  flex-wrap: wrap;}.leaderboard-standing-main {  display: grid;  grid-template-columns: auto minmax(0, 1fr) auto;  gap: 14px;  align-items: center;  padding: 12px 14px;  border: 1px solid var(--line);  border-radius: 14px;  background: color-mix(in srgb, var(--panel) 72%, transparent);}.leaderboard-standing-rank {  display: inline-flex;  align-items: center;  justify-content: center;  min-width: 64px;  height: 56px;  padding: 0 12px;  border-radius: 12px;  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 88%, #fff 8%), color-mix(in srgb, var(--gold-deep, var(--gold)) 92%, #000 4%));  color: #1a1405;  font-size: 1.5rem;  font-weight: 900;  letter-spacing: -0.02em;  font-variant-numeric: tabular-nums;}html[data-theme="light"] .leaderboard-standing-rank {  color: #fff;}.leaderboard-standing-copy {  min-width: 0;  display: grid;  gap: 4px;}.leaderboard-chase {  margin: 0;  color: var(--muted);  font-size: 0.86rem;}.leaderboard-chase.is-leading {  color: var(--gold-bright);  font-weight: 700;}.leaderboard-standing-score {  display: inline-flex;  align-items: baseline;  gap: 6px;  font-size: 1.7rem;  font-weight: 900;  letter-spacing: -0.025em;  color: var(--cream);  font-variant-numeric: tabular-nums;  white-space: nowrap;}.leaderboard-standing-score small {  font-size: 0.66rem;  font-weight: 800;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--muted);}.leaderboard-standing.is-guest {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  flex-wrap: wrap;  padding: 12px 14px;  border: 1px dashed color-mix(in srgb, var(--gold) 38%, var(--line));  border-radius: 14px;  background: color-mix(in srgb, var(--gold) 6%, transparent);}.leaderboard-cta {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 9px 16px;  border-radius: 999px;  background: linear-gradient(135deg, var(--gold), var(--gold-bright, var(--gold)));  color: #1a1405;  font-size: 0.86rem;  font-weight: 800;  text-decoration: none;  white-space: nowrap;  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 32%, transparent);  transition: transform 0.16s ease, box-shadow 0.16s ease;}html[data-theme="light"] .leaderboard-cta {  color: #fff;}.leaderboard-cta:hover {  transform: translateY(-1px);  box-shadow: 0 12px 28px color-mix(in srgb, var(--gold) 42%, transparent);}.leaderboard-cta:focus-visible {  outline: 2px solid var(--gold-bright);  outline-offset: 2px;}.leaderboard-board-label {  display: flex;  align-items: baseline;  justify-content: space-between;  gap: 10px;  flex-wrap: wrap;  margin: 4px 2px 12px;}.leaderboard-board-label h2 {  margin: 0;  font-size: 1.02rem;  font-weight: 800;  letter-spacing: -0.015em;  color: var(--cream);}.leaderboard-board-side {  display: inline-flex;  align-items: baseline;  gap: 10px;  flex-wrap: wrap;}.leaderboard-board-meta {  font-size: 0.74rem;  font-weight: 700;  letter-spacing: 0.08em;  text-transform: uppercase;  color: var(--muted);}.leaderboard-countdown {  display: inline-flex;  align-items: center;  gap: 7px;  padding: 3px 11px;  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));  border-radius: 999px;  background: color-mix(in srgb, var(--gold) 10%, var(--fill-subtle));  font-size: 0.72rem;  font-weight: 700;  color: var(--muted);  white-space: nowrap;}.leaderboard-countdown-icon {  font-size: 0.8rem;  line-height: 1;}.leaderboard-countdown-label {  letter-spacing: 0.06em;  text-transform: uppercase;}.leaderboard-countdown-time {  font-variant-numeric: tabular-nums;  color: var(--gold-bright);  letter-spacing: 0.01em;}.leaderboard-countdown-icon--hidden {  opacity: 0;  transform: scale(0.75);  filter: grayscale(1);}.leaderboard-live {  display: inline-flex;  align-items: center;  gap: 8px;  width: fit-content;  font-size: 0.68rem;  font-weight: 800;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--gold-bright);}.leaderboard-live i {  width: 8px;  height: 8px;  border-radius: 50%;  background: #4ade80;  animation: leaderboard-live-pulse 1.6s ease-out infinite;}.leaderboard-you-line {  margin: 0;  font-size: 1.05rem;  font-weight: 700;  letter-spacing: -0.02em;}.leaderboard-updated {  margin: 0;  color: var(--muted);  font-size: 0.8rem;}.leaderboard-row.is-you .members-card {  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));  background:    linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%),    var(--panel);  box-shadow:    inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent),    0 10px 28px color-mix(in srgb, var(--gold) 14%, transparent);}.leaderboard-row.is-podium .leaderboard-rank {  color: var(--gold-bright);}.leaderboard-row.is-1 .leaderboard-rank {  color: #1a1405;  border-color: transparent;  background: linear-gradient(135deg, #FFE9A8, var(--gold) 55%, color-mix(in srgb, var(--gold-deep, var(--gold)) 88%, #000 6%));  box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 38%, transparent);}html[data-theme="light"] .leaderboard-row.is-1 .leaderboard-rank {  color: #fff;}.leaderboard-row.is-2 .leaderboard-rank {  color: #0f172a;  border-color: color-mix(in srgb, #CBD5E1 70%, var(--line));  background: linear-gradient(135deg, #F8FAFC, #CBD5E1 70%, #94A3B8);}.leaderboard-row.is-3 .leaderboard-rank {  color: #2a1503;  border-color: color-mix(in srgb, #E5A06A 65%, var(--line));  background: linear-gradient(135deg, #FBDDB8, #E5A06A 70%, #B4632A);}.leaderboard-row.is-1 .members-card {  border-color: color-mix(in srgb, var(--gold) 58%, var(--line));  background:    linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));  box-shadow:    inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent),    0 12px 30px color-mix(in srgb, var(--gold) 16%, transparent);}.leaderboard-row.is-2 .members-card {  border-color: color-mix(in srgb, #CBD5E1 42%, var(--line));  background:    linear-gradient(135deg, color-mix(in srgb, #CBD5E1 12%, transparent), color-mix(in srgb, #CBD5E1 5%, transparent));}.leaderboard-row.is-3 .members-card {  border-color: color-mix(in srgb, #E5A06A 42%, var(--line));  background:    linear-gradient(135deg, color-mix(in srgb, #E5A06A 12%, transparent), color-mix(in srgb, #E5A06A 5%, transparent));}.leaderboard-row.is-up .leaderboard-score-num {  color: var(--data-up, #86efac);  animation: leaderboard-score-pop 0.45s ease;}.leaderboard-row.is-down .leaderboard-score-num {  color: var(--data-down, #fca5a5);}@keyframes leaderboard-score-pop {  from { transform: scale(1.18); }  to { transform: scale(1); }}@keyframes leaderboard-live-pulse {  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }}@media (prefers-reduced-motion: reduce) {  .leaderboard-live i,  .leaderboard-row.is-up .leaderboard-score-num,  .leaderboard-row a.members-card:hover,  .leaderboard-cta:hover {    animation: none;    transform: none;  }}/* Puzzles board — second section on the leaderboard page */.leaderboard-section {  margin-top: 28px;  padding: 22px 20px;  border: 1px solid var(--line);  border-radius: 20px;  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),    var(--panel);  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.05),    0 12px 30px rgba(0, 0, 0, 0.14);}html[data-theme="light"] .leaderboard-section {  background:    linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--panel));  box-shadow:    inset 0 1px 0 #fff,    0 10px 26px rgba(24, 24, 27, 0.06);}.puzzle-leaderboard-head {  display: flex;  align-items: flex-start;  gap: 14px;  margin: 0 0 14px;}.leaderboard-section-icon {  display: inline-flex;  align-items: center;  justify-content: center;  width: 44px;  height: 44px;  flex: 0 0 auto;  border-radius: 14px;  font-size: 1.35rem;  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));  background: color-mix(in srgb, var(--gold) 12%, var(--fill-subtle));}.leaderboard-section-copy {  min-width: 0;  display: grid;  gap: 2px;}.leaderboard-section-sub {  margin: 0;  color: var(--muted);  font-size: 0.82rem;}.puzzle-leaderboard-head .eyebrow {  margin: 0;}.puzzle-leaderboard-head h2 {  margin: 0;  font-size: 1.35rem;  font-weight: 800;  letter-spacing: -0.02em;  color: var(--cream);}.leaderboard-empty {  display: grid;  gap: 6px;  justify-items: start;  padding: 20px;  border: 1px dashed color-mix(in srgb, var(--gold) 34%, var(--line));  border-radius: 16px;  background: color-mix(in srgb, var(--gold) 5%, transparent);}.leaderboard-empty .members-count {  margin: 0;}.leaderboard-empty-title {  margin: 0;  font-size: 1.05rem;  font-weight: 800;  letter-spacing: -0.015em;  color: var(--cream);}.leaderboard-empty .leaderboard-cta {  margin-top: 8px;}@media (max-width: 640px) {  .leaderboard-hero {    padding: 20px 18px 18px;  }  .leaderboard-tabs {    width: 100%;  }  .leaderboard-tab {    flex: 1 1 auto;    justify-content: center;    padding: 8px 10px;  }  .leaderboard-row {    grid-template-columns: 2.6rem minmax(0, 1fr);  }  .leaderboard-row .members-card {    padding: 7px 10px;  }  .leaderboard-standing-main {    grid-template-columns: auto minmax(0, 1fr);  }  .leaderboard-standing-score {    grid-column: 2;    justify-self: start;    font-size: 1.4rem;  }  .leaderboard-section {    padding: 18px 14px;  }}.leaderboard-section .leaderboard-you-line {  margin: 0 0 14px;}.leaderboard-section .members-count a {  color: var(--gold);  font-weight: 600;}/* --- Account deletion (danger zone) --------------------------------------   Deliberately the last card on the page and visually distinct from every   other profile card, so an irreversible action is never one click away. */.profile-card--danger {  border-color: color-mix(in srgb, var(--data-down, #d9534f) 34%, var(--line-strong, #333));  background:    linear-gradient(      180deg,      color-mix(in srgb, var(--data-down, #d9534f) 5%, transparent),      transparent 60%    ),    var(--panel, #14141f);}.profile-card--danger h2 {  color: var(--data-down, #d9534f);}.danger-list {  margin: 0 0 1rem;  padding-left: 1.15rem;  color: var(--muted);  font-size: 0.9rem;  line-height: 1.7;}.danger-note {  margin: 0 0 1rem;  padding: 0.7rem 0.9rem;  border: 1px solid color-mix(in srgb, var(--data-warn, #e0a34a) 40%, transparent);  border-radius: 10px;  background: color-mix(in srgb, var(--data-warn, #e0a34a) 10%, transparent);  color: var(--text, #f2efe6);  font-size: 0.86rem;  line-height: 1.6;}/* `hidden` only sets display:none at UA specificity, so any author display   rule defeats it — .danger-form sets display:flex and once hid the form   behind a second "Delete my account" button that never went away. Same fix   as style_blog.css and style_mistakes.css. */.profile-page [hidden] {  display: none !important;}.danger-submit {  border: 1px solid color-mix(in srgb, var(--data-down, #d9534f) 55%, transparent);  border-radius: 10px;  background: color-mix(in srgb, var(--data-down, #d9534f) 14%, transparent);  color: var(--data-down, #d9534f);  font-weight: 700;  padding: 0.6rem 1.1rem;  cursor: pointer;  transition: background 0.2s ease, border-color 0.2s ease;}.danger-submit:hover {  background: color-mix(in srgb, var(--data-down, #d9534f) 22%, transparent);  border-color: var(--data-down, #d9534f);}.danger-submit:disabled {  opacity: 0.5;  cursor: not-allowed;}.danger-form {  margin-top: 1.1rem;  padding-top: 1.1rem;  border-top: 1px solid var(--line, #2a2a38);  display: flex;  flex-direction: column;  gap: 0.55rem;}.danger-label {  font-size: 0.78rem;  font-weight: 800;  letter-spacing: 0.1em;  text-transform: uppercase;  color: var(--muted);}.danger-form input[type="password"] {  width: 100%;  max-width: 22rem;  padding: 0.65rem 0.8rem;  border: 1px solid var(--line-strong, #333);  border-radius: 10px;  background: var(--bg, #0f0f15);  color: var(--text, #f2efe6);  font-size: 1rem;}.danger-form input[type="password"]:focus-visible {  outline: 2px solid color-mix(in srgb, var(--data-down, #d9534f) 60%, transparent);  outline-offset: 2px;}.danger-hint {  margin: 0;  color: var(--muted);  font-size: 0.78rem;  line-height: 1.5;}.danger-status {  margin: 0.2rem 0 0;  font-size: 0.86rem;  line-height: 1.5;}.danger-status.is-error {  color: var(--data-down, #d9534f);}/* ===== LEADERBOARD ENHANCEMENTS ======================================== *//* Alternating row tint — very subtle zebra stripe for scanability */.leaderboard-row:nth-child(even) .members-card {  background: color-mix(in srgb, var(--panel) 96%, #000 2%);}/* Streak badge shown inline */.leaderboard-streak-badge {  display: inline-flex;  align-items: center;  gap: 2px;  padding: 0 6px;  border-radius: 6px;  background: color-mix(in srgb, #f97316 18%, transparent);  color: #f97316;  font-size: 0.68rem;  font-weight: 800;  letter-spacing: -0.01em;  line-height: 1.4;}/* Level badge on leaderboard rows — numeric progression beside the name */.leaderboard-level-badge {  display: inline-flex;  align-items: center;  padding: 0 7px;  margin-left: 5px;  border-radius: 6px;  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));  background: color-mix(in srgb, var(--gold) 10%, transparent);  color: var(--gold-bright);  font-size: 0.66rem;  font-weight: 800;  letter-spacing: -0.01em;  line-height: 1.5;  vertical-align: middle;}/* Season tier badge on leaderboard rows */.leaderboard-season-badge {  display: inline-flex;  align-items: center;  padding: 0 7px;  border-radius: 6px;  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));  background: color-mix(in srgb, var(--gold) 10%, transparent);  color: var(--cream);  font-size: 0.68rem;  font-weight: 800;  letter-spacing: -0.01em;  line-height: 1.5;}/* "Hot" player — high streak >= 5 */.leaderboard-row.is-hot .leaderboard-rank {  border-color: color-mix(in srgb, #f97316 42%, var(--line));  background: color-mix(in srgb, #f97316 8%, var(--fill-subtle));  color: #f97316;}.leaderboard-row.is-hot .leaderboard-streak-badge {  background: color-mix(in srgb, #f97316 28%, transparent);  color: #fff;}/* "Your standing" card — streak / weekly stats row */.leaderboard-standing-stats {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: 8px 12px;  margin: 6px 0 0;}.leaderboard-standing-stat {  display: inline-flex;  align-items: center;  gap: 4px;  padding: 2px 8px;  border-radius: 8px;  background: color-mix(in srgb, var(--fill-subtle) 80%, transparent);  font-size: 0.78rem;  font-weight: 700;  line-height: 1.5;  letter-spacing: -0.01em;  color: var(--cream);}.ls-stat-icon {  font-size: 0.85rem;  line-height: 1;}.ls-stat-value {  font-variant-numeric: tabular-nums;  font-weight: 800;}.ls-stat-label {  color: var(--muted);  font-size: 0.68rem;  font-weight: 600;}.leaderboard-standing-bar {  display: inline-flex;  width: 48px;  height: 5px;  border-radius: 4px;  background: color-mix(in srgb, var(--line) 50%, transparent);  overflow: hidden;  vertical-align: middle;}.ls-bar {  display: block;  height: 100%;  border-radius: 4px;  background: var(--gold-bright);  transition: width 0.4s ease;}/* Podium entrance animation for Top 3 */@keyframes leaderboard-podium-in {  from {    opacity: 0;    transform: translateY(-6px) scale(0.96);  }  to {    opacity: 1;    transform: translateY(0) scale(1);  }}.leaderboard-row.is-podium {  animation: leaderboard-podium-in 0.4s ease-out both;}.leaderboard-row.is-1 {  animation-duration: 0.5s;}.leaderboard-row.is-2 {  animation-delay: 0.08s;}.leaderboard-row.is-3 {  animation-delay: 0.16s;}/* Responsive polish for the standing stats */@media (max-width: 640px) {  .leaderboard-standing-stats {    flex-direction: column;    align-items: flex-start;    gap: 6px;  }}@media (prefers-reduced-motion: reduce) {  .leaderboard-row.is-podium {    animation: none;  }}/* ===== LEADERBOARD TYPOGRAPHY: SERIF FONT FOR DATA/NUMBERS/NAMES ===== */.leaderboard-rank-num,.leaderboard-score-num,.leaderboard-score-unit,.leaderboard-rank,.members-copy strong,.leaderboard-standing-rank,.leaderboard-you-line,.leaderboard-chase,.leaderboard-standing-stat,.leaderboard-standing-stat .ls-stat-value,.leaderboard-level-badge,.leaderboard-season-badge,.leaderboard-streak-badge{font-family:var(--serif,Georgia,"Times New Roman",serif);}