/* Gallery: builds on feed.css (tokens, header, cards, fighter pairs, video frame). */
.gallery-page .feed-header,.gallery-shell{max-width:1180px}
.gallery-shell{margin:auto;padding:30px 16px 70px}
.gallery-shell .feed-intro{margin-bottom:22px}

/* Fight cards */
.fight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:22px;align-items:start}
.fight-grid .game-card{margin:0}
.game-card.linked{outline:3px solid var(--orange);outline-offset:3px}
.fight-card .game-content{padding:18px 14px 14px}
.gallery-shell .fighter img{border-radius:8px}
.fight-card .video-frame{box-shadow:0 5px 14px #25272018;border-radius:9px}
.fight-state{display:flex;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;margin:0;padding:16px;border:1px dashed #cfccc1;border-radius:9px;background:var(--paper);font-size:13px;text-align:center;color:var(--muted)}
.fight-state.failed{color:#a44124;border-color:#e6b7a6;background:#fdf1ec;overflow-wrap:anywhere}
.fight-state .dots{margin:0}


/* Creatures */
.creature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.creature-card{display:flex;flex-direction:column;gap:4px;padding:12px;background:white;border:1px solid #d7d5cc;border-radius:12px;box-shadow:2px 3px 0 #e2dfd5;min-width:0}
a.creature-card:hover{border-color:var(--ink)}
.creature-card img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:6px}
.creature-card strong{font-family:'Space Grotesk',sans-serif;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creature-card span{font-size:10px;color:var(--muted)}

@media(max-width:600px){
  .creature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:380px){.gallery-shell{padding:24px 16px 55px}}

/* Leaderboard: one row per doodle, the highest Elo first */
.leaderboard{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.leaderboard a{display:grid;grid-template-columns:28px 56px 1fr auto auto;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid #d7d5cc;border-radius:12px;box-shadow:2px 3px 0 #e2dfd5}
.leaderboard a:hover{border-color:var(--ink)}
.leaderboard b{font:700 18px 'Space Grotesk',sans-serif;color:var(--orange);text-align:center;font-variant-numeric:tabular-nums}
.leaderboard img{width:56px;height:42px;object-fit:contain}
.leaderboard strong{min-width:0;overflow-wrap:anywhere;font-size:14px}
.leaderboard span{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.leaderboard .elo{min-width:76px;text-align:right;color:var(--ink)}
.leaderboard .elo em{font:700 18px 'Space Grotesk',sans-serif;font-style:normal}
/* Phones: wins and losses go under the name, so the rating keeps its column. */
@media(max-width:520px){.leaderboard a{grid-template-columns:24px 48px 1fr auto;row-gap:2px}.leaderboard a>*{grid-row:1/3}.leaderboard a>strong{grid-row:1}.leaderboard a>span:not(.elo){grid-column:3;grid-row:2}.leaderboard .elo{grid-column:4;min-width:0}}

/* Loading, error and empty states */
.gallery-status{display:flex;align-items:center;justify-content:center;gap:10px;min-height:160px;margin:0 0 24px;border:1px dashed #cfccc1;border-radius:12px;font-size:13px;color:var(--muted)}
.gallery-status:empty{display:none}
.gallery-status .dots{margin:0}
.gallery-status.error{min-height:0;padding:14px 16px;border-style:solid;border-color:#e6b7a6;background:#fdf1ec;color:#a44124}
.fight-state.failed{flex-direction:column;gap:6px;font-weight:600}
.fight-state.failed small{max-width:100%;font-size:11px;font-weight:400;color:#8f4a33}