/* Porjaijaa trophy shelf (leaderboard). Everything is tenant-scoped.
   Layout rule: nothing is absolutely positioned over text and nothing uses negative
   margins, so boxes can't overlap at any width. The podium follows its own width
   (container queries), so the collapsible sidebar can't squeeze it into overlap. */
html[data-site="porjaijaa"] .pj-trophy {
  --pj-gold: #f2e6bd;
  --pj-gold-line: #d9c27a;
  --pj-silver: #dfe5ea;
  --pj-silver-line: #aab6c1;
  --pj-copper: #efd9cf;
  --pj-copper-line: #cf9f8a;
  container-type: inline-size;
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  color: var(--pj-ink);
}
html[data-site="porjaijaa"].dark .pj-trophy {
  --pj-gold: #5a5236;
  --pj-gold-line: #8f7f45;
  --pj-silver: #3a464d;
  --pj-silver-line: #6b7d88;
  --pj-copper: #5a4440;
  --pj-copper-line: #8f6559;
}

html[data-site="porjaijaa"] .pj-trophy-loading { display: grid; place-items: center; padding: 120px 0; }
html[data-site="porjaijaa"] .pj-trophy-loading::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--pj-sage-line); border-top-color: var(--pj-moss);
  animation: pj-trophy-spin .9s linear infinite;
}
@keyframes pj-trophy-spin { to { transform: rotate(360deg); } }

html[data-site="porjaijaa"] .pj-trophy-head h1 { margin: 0; font-family: var(--pj-hand); font-weight: 400; font-size: clamp(26px, 5cqw, 36px); line-height: 1.3; overflow-wrap: anywhere; }
html[data-site="porjaijaa"] .pj-trophy-head p { margin: 4px 0 0; color: var(--pj-muted-ink); font-size: 14.5px; }

html[data-site="porjaijaa"] .pj-trophy-me {
  justify-self: start;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0; padding: 10px 18px;
  background: var(--pj-sage-soft); border: 1.5px dashed var(--pj-sage-line); border-radius: 16px 16px 16px 6px;
  font-size: 14px;
}
html[data-site="porjaijaa"] .pj-trophy-me > b { font-family: var(--pj-hand); font-weight: 400; font-size: 24px; line-height: 1; color: var(--pj-moss); }

html[data-site="porjaijaa"] .pj-trophy-empty {
  display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center;
  background: var(--pj-cream); border: 1.5px dashed var(--pj-line); border-radius: 24px;
  color: var(--pj-muted-ink);
}
html[data-site="porjaijaa"] .pj-trophy-empty svg { width: 40px; height: 40px; color: var(--pj-moss); }

/* ── Podium: 2 · 1 · 3 on wide screens ─────────────────────────────────────── */
html[data-site="porjaijaa"] .pj-podium {
  padding: 22px 18px 0;
  background:
    radial-gradient(circle, rgb(122 108 94 / 12%) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--pj-cream);
  border: 1.5px solid var(--pj-line);
  border-radius: 28px 28px 10px 10px;
  box-shadow: 5px 6px 0 rgb(110 96 75 / 8%);
}
html[data-site="porjaijaa"] .pj-podium ol {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "second first third";
  align-items: end;
  gap: 12px;
}
html[data-site="porjaijaa"] .pj-podium-spot { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
html[data-site="porjaijaa"] .pj-podium-spot[data-rank="1"] { grid-area: first; --pj-step: var(--pj-gold); --pj-step-line: var(--pj-gold-line); --pj-step-h: 116px; }
html[data-site="porjaijaa"] .pj-podium-spot[data-rank="2"] { grid-area: second; --pj-step: var(--pj-silver); --pj-step-line: var(--pj-silver-line); --pj-step-h: 84px; }
html[data-site="porjaijaa"] .pj-podium-spot[data-rank="3"] { grid-area: third; --pj-step: var(--pj-copper); --pj-step-line: var(--pj-copper-line); --pj-step-h: 62px; }

html[data-site="porjaijaa"] .pj-podium-person {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 4px 12px;
  text-align: center;
}
html[data-site="porjaijaa"] .pj-podium-avatar { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
html[data-site="porjaijaa"] .pj-podium-crown { width: 30px; height: 30px; margin-bottom: 2px; color: #b08a2e; fill: var(--pj-gold); transform: rotate(-8deg); }
html[data-site="porjaijaa"].dark .pj-podium-crown { color: #e3c56b; }
html[data-site="porjaijaa"] .pj-podium-text { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
html[data-site="porjaijaa"] .pj-podium-name {
  max-width: 100%;
  font-family: var(--pj-hand); font-size: 20px; line-height: 1.35;
  /* Long nicknames wrap (Thai has no spaces) and stop at two lines. */
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html[data-site="porjaijaa"] .pj-podium-spot[data-rank="1"] .pj-podium-name { font-size: 23px; }
html[data-site="porjaijaa"] .pj-podium-me {
  max-width: 100%;
  padding: 0 10px; border-radius: 999px; font-size: 12px; line-height: 1.8;
  color: #fdfbf7; background: var(--pj-moss);
}
html[data-site="porjaijaa"].dark .pj-podium-me { color: #20251f; }
html[data-site="porjaijaa"] .pj-podium-badges { max-width: 100%; flex-wrap: wrap; justify-content: center; }
html[data-site="porjaijaa"] .pj-podium-points { max-width: 100%; color: var(--pj-muted-ink); font-size: 13px; overflow-wrap: anywhere; }
html[data-site="porjaijaa"] .pj-podium-points b { font-family: var(--pj-hand); font-weight: 400; font-size: 20px; color: var(--pj-ink); }

html[data-site="porjaijaa"] .pj-podium-step {
  height: var(--pj-step-h);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 8px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgb(255 255 255 / 22%) 9px 11px),
    var(--pj-step);
  border: 1.5px solid var(--pj-step-line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 28%);
}
html[data-site="porjaijaa"] .pj-podium-step span {
  font-family: var(--pj-hand); font-size: 36px; line-height: 1.2;
  color: var(--pj-ink); opacity: .75;
  transform: rotate(-4deg);
}

/* Narrow (phones, or a squeezed column): one card per winner, 1 → 2 → 3. */
@container (max-width: 520px) {
  html[data-site="porjaijaa"] .pj-podium { padding: 12px; border-radius: 22px; }
  html[data-site="porjaijaa"] .pj-podium ol { grid-template-columns: minmax(0, 1fr); grid-template-areas: "first" "second" "third"; gap: 10px; }
  html[data-site="porjaijaa"] .pj-podium-spot {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--pj-step); border: 1.5px solid var(--pj-step-line); border-radius: 18px 18px 18px 6px;
  }
  html[data-site="porjaijaa"] .pj-podium-step {
    order: -1; flex-shrink: 0;
    width: 40px; height: 40px; padding: 0; align-items: center;
    background: var(--pj-cream); border: 1.5px dashed var(--pj-step-line); border-radius: 50%; box-shadow: none;
  }
  html[data-site="porjaijaa"] .pj-podium-step span { font-size: 22px; transform: none; }
  html[data-site="porjaijaa"] .pj-podium-person { flex: 1; flex-direction: row; align-items: center; gap: 10px; padding: 0; text-align: left; }
  html[data-site="porjaijaa"] .pj-podium-avatar { flex-direction: row; }
  html[data-site="porjaijaa"] .pj-podium-avatar > [data-framed-avatar] { width: 64px !important; height: 64px !important; }
  html[data-site="porjaijaa"] .pj-podium-crown { display: none; }
  html[data-site="porjaijaa"] .pj-podium-text { align-items: flex-start; gap: 2px; }
  html[data-site="porjaijaa"] .pj-podium-name, html[data-site="porjaijaa"] .pj-podium-spot[data-rank="1"] .pj-podium-name { font-size: 19px; }
  html[data-site="porjaijaa"] .pj-podium-badges { justify-content: flex-start; }
}

/* ── Everyone ──────────────────────────────────────────────────────────────── */
html[data-site="porjaijaa"] .pj-ranks {
  background: var(--pj-cream); border: 1.5px solid var(--pj-line); border-radius: 24px;
  overflow: hidden;
}
html[data-site="porjaijaa"] .pj-ranks h2, html[data-site="porjaijaa"] .pj-trophy-ways h2 {
  margin: 0; font-family: var(--pj-hand); font-weight: 400; font-size: 22px; line-height: 1.3;
}
html[data-site="porjaijaa"] .pj-ranks h2 { padding: 14px 18px 10px; border-bottom: 1.5px dashed var(--pj-line); }
html[data-site="porjaijaa"] .pj-ranks ol { list-style: none; margin: 0; padding: 0; }
html[data-site="porjaijaa"] .pj-rank-row {
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--pj-line);
}
html[data-site="porjaijaa"] .pj-rank-row:last-child { border-bottom: 0; }
html[data-site="porjaijaa"] .pj-rank-row[data-me] { background: var(--pj-sage-soft); }
html[data-site="porjaijaa"] .pj-rank-number { font-family: var(--pj-hand); font-size: 20px; text-align: center; color: var(--pj-muted-ink); }
html[data-site="porjaijaa"] .pj-rank-row[data-rank="1"] .pj-rank-number { color: #a8822a; }
html[data-site="porjaijaa"] .pj-rank-row[data-rank="2"] .pj-rank-number { color: #6f7f8b; }
html[data-site="porjaijaa"] .pj-rank-row[data-rank="3"] .pj-rank-number { color: #a4664f; }
html[data-site="porjaijaa"].dark .pj-rank-row[data-rank] .pj-rank-number { color: var(--pj-cocoa); }
html[data-site="porjaijaa"] .pj-rank-who { min-width: 0; display: grid; gap: 1px; }
html[data-site="porjaijaa"] .pj-rank-line { min-width: 0; display: flex; align-items: center; gap: 6px; }
html[data-site="porjaijaa"] .pj-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
html[data-site="porjaijaa"] .pj-rank-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pj-muted-ink); font-size: 12px; }
html[data-site="porjaijaa"] .pj-rank-points { text-align: right; white-space: nowrap; color: var(--pj-muted-ink); font-size: 12px; }
html[data-site="porjaijaa"] .pj-rank-points b { display: block; font-family: var(--pj-hand); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--pj-ink); }
@container (max-width: 380px) {
  html[data-site="porjaijaa"] .pj-rank-row { grid-template-columns: 22px auto minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  html[data-site="porjaijaa"] .pj-rank-row > [data-framed-avatar] { width: 44px !important; height: 44px !important; }
}

/* ── How to earn ───────────────────────────────────────────────────────────── */
html[data-site="porjaijaa"] .pj-trophy-ways { padding: 14px 18px 16px; background: var(--pj-paper-2); border: 1.5px dashed var(--pj-line); border-radius: 20px; }
html[data-site="porjaijaa"] .pj-trophy-ways ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 18px; }
html[data-site="porjaijaa"] .pj-trophy-ways li { min-width: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
html[data-site="porjaijaa"] .pj-trophy-ways li span { min-width: 0; overflow-wrap: anywhere; }
html[data-site="porjaijaa"] .pj-trophy-ways li b { flex-shrink: 0; font-weight: 400; color: var(--pj-moss); }

@media (prefers-reduced-motion: reduce) {
  html[data-site="porjaijaa"] .pj-trophy-loading::before { animation: none; }
}