/* The Top writers page: a podium for the first three, then the ranked list. */
.board-page { --gold: #ffc83d; --silver: #cfd6e4; --bronze: #e39a62; }
.board-error { margin: 0; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); color: var(--dim); }
.board { padding-block: 8px 40px; display: grid; gap: 14px; }
.you { margin: 0 0 6px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 200, 61, 0.12); border: 1px solid rgba(255, 200, 61, 0.45); color: #ffe7a6; font: 600 1rem/1.4 var(--f-ui); }
.podium, .ranks, .last-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.entry { display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: #101012; border: 1px solid var(--line); min-width: 0; }
.entry-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rank av who" "stats stats stats"; gap: 10px 14px; align-items: center; }
.entry .rank { grid-area: rank; min-width: 1.4em; font-size: 2rem; line-height: 1; text-align: center; color: var(--dim); }
.entry .avatar { grid-area: av; width: 46px; height: 46px; font-size: 1rem; }
.who { grid-area: who; display: grid; gap: 2px; min-width: 0; }
.name { color: #fff; font: 700 1.05rem/1.2 var(--f-ui); text-decoration: none; overflow-wrap: anywhere; } .name:hover { text-decoration: underline; }
.handle { color: var(--faint); font-size: 0.85rem; }
.you-chip { justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--gold); color: #1a1300; font: 800 0.72rem/1.5 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.stats { grid-area: stats; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--dim); font-size: 0.85rem; } .stats b { color: #fff; font-size: 1.1rem; }
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #2a2a33, #15151a); color: #fff; text-decoration: none; }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.mini-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; font: 600 0.72rem/1.2 var(--f-ui); background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini.no-cover .mini-t { top: 0; display: flex; align-items: flex-end; background: none; font-size: 0.8rem; }
@media (hover: hover) { .mini:hover img { transform: scale(1.06); } }
/* the podium */
.entry.big .rank { font-size: 3rem; }
.entry.gold { border-color: rgba(255, 200, 61, 0.55); box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.2), 0 18px 50px rgba(255, 200, 61, 0.12); } .entry.gold .rank { color: var(--gold); }
.entry.silver { border-color: rgba(207, 214, 228, 0.45); } .entry.silver .rank { color: var(--silver); }
.entry.bronze { border-color: rgba(227, 154, 98, 0.5); } .entry.bronze .rank { color: var(--bronze); }
.entry.is-you { outline: 2px solid var(--gold); outline-offset: 2px; }
/* from 4th place down: one row per writer */
.ranks .entry { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.ranks .entry-top { grid-template-areas: "rank av who" "stats stats stats"; }
/* the empty board, the explanation, and last week */
.board-empty { display: grid; gap: 14px; justify-items: start; padding: 28px; border-radius: 22px; border: 1px dashed var(--line-2); }
.board-empty h3 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); }
.lastweek { padding-block: 24px 80px; }
.sub-h { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 16px; }
.last-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #101012; border: 1px solid var(--line); }
.last-row .rank { font-size: 1.6rem; color: var(--dim); min-width: 1.2em; text-align: center; } .last-row.gold .rank { color: var(--gold); } .last-row.silver .rank { color: var(--silver); } .last-row.bronze .rank { color: var(--bronze); }
.last-row .avatar { width: 38px; height: 38px; font-size: 0.85rem; } .last-score { color: var(--dim); font-size: 0.85rem; white-space: nowrap; }
.avatar { display: grid; place-items: center; border-radius: 50%; font: 900 1rem/1 var(--f-display); font-stretch: 70%; color: #0b0b0d; background: linear-gradient(135deg, var(--a1, #ffc7c6), var(--a2, #847dff)); flex: none; }
@media (max-width: 860px) { .podium { grid-template-columns: 1fr; } .ranks .entry { grid-template-columns: 1fr; } }
/* the front page positions .avatar absolutely for its writer cards; here it sits in the row */
.board-page .avatar { position: static; inset: auto; }
/* a cover already has the title drawn on it: keep the title for screen readers only */
.mini:not(.no-cover) .mini-t { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none; }
/* from 4th place down, the stories are small thumbnails at the right end of the row */
.ranks .entry { grid-template-columns: minmax(0, 1fr) auto; }
.ranks .works { display: flex; gap: 8px; justify-content: flex-end; }
.ranks .mini { width: 58px; flex: none; border-radius: 9px; }
@media (max-width: 860px) { .ranks .entry { grid-template-columns: 1fr; } .ranks .works { justify-content: flex-start; } .ranks .mini { width: 74px; } }