/* Public Maps gallery, thumbnails and vote button */
.gallery { width: min(1200px, 100% - 2rem); margin: 1.5rem auto; }
.gallery .lead { color: var(--muted); margin-top: 0; }
.sort-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.tab { padding: .4em .9em; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; background: var(--panel); }
.tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.list-status { color: var(--muted); }
.list-status:empty { display: none; }

.map-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.map-card { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.thumb-link { display: block; text-decoration: none; }
.thumb { --cell: 17px; --slot: 5px; --label: 0px; --boards: 1; display: flex; justify-content: center; gap: .5rem; padding: .3rem 0; overflow: hidden; width: 100%; max-width: 100%; }
.thumb .board-title, .thumb .row-labels, .thumb .col-labels, .thumb .coord { display: none; }
.thumb .board-body { grid-template-columns: auto; grid-template-rows: auto; }
.thumb .tile { border-width: 1px; font-size: 9px; }
.thumb .cell:hover { filter: none; }
.card-title { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-meta { margin: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.views { font-size: .8rem; color: var(--muted); }

.vote-btn { padding: .3em .8em; font-size: .9rem; min-width: 4.2em; }
.vote-btn.voted { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.pager .btn { text-decoration: none; }
.pager .btn.disabled { opacity: .4; pointer-events: none; }
.page-info { color: var(--muted); font-size: .9rem; }

/* "Breaks the rules" badge with a hoverable explanation (the link inside must stay clickable) */
.rules-flag { position: relative; display: inline-block; padding: .05em .5em; border-radius: 999px; background: #5a2a14; border: 1px solid #c4642d; color: #ffc9a3; font-size: .75rem; white-space: nowrap; cursor: help; }
.rules-flag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rules-tip {
  position: absolute; left: 0; top: 100%; z-index: 20; width: min(18rem, 80vw); padding: .65rem .75rem; margin-top: 2px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: .8rem; line-height: 1.4; white-space: normal; text-align: left; cursor: auto;
  visibility: hidden; opacity: 0; transition: opacity .12s;
}
.rules-flag::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } /* hover bridge to the tooltip */
.rules-flag:hover .rules-tip, .rules-flag:focus .rules-tip, .rules-flag:focus-within .rules-tip { visibility: visible; opacity: 1; }
@media print { .rules-flag { display: none; } }

/* Top 3 by votes: three strengths of gold. Colour is not the only cue; each card also carries a place ribbon. */
.map-card { position: relative; }
.map-card.medal-1 { border: 3px solid #ffc800; box-shadow: 0 0 0 1px #fff1a8 inset, 0 0 18px rgba(255, 200, 0, .55); }
.map-card.medal-2 { border: 3px solid #d2a23a; box-shadow: 0 0 10px rgba(210, 162, 58, .3); }
.map-card.medal-3 { border: 3px solid #9c7d4a; }
.ribbon { position: absolute; top: -.7em; left: .8rem; padding: .1em .7em; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #2a1a00; z-index: 2; }
.ribbon-1 { background: #ffc800; }
.ribbon-2 { background: #d2a23a; }
.ribbon-3 { background: #9c7d4a; color: #fff6e6; }

/* Map of the week: separate from the ranking, red border, above the list */
.motw-slot { margin: 1.25rem 0 .5rem; }
.motw-list { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.map-card.motw { border: 3px solid #e0314b; box-shadow: 0 0 16px rgba(224, 49, 75, .35); }
.ribbon-motw { background: #e0314b; color: #fff; font-size: .8rem; }

/* Two-board maps (3 and 4 players): the card spans two columns and the boards are sized from the card width,
   so both boards always fit without cropping. Single boards keep the fixed 17px cell. */
.map-card.wide { grid-column: span 2; container-type: inline-size; }
.map-card.wide .thumb {
  --cell: clamp(10px, calc((100cqw - 44px) / var(--units, 15)), 20px);
  --slot: calc(var(--cell) * .3);
  gap: .75rem;
  overflow: visible;
}
.map-card.wide .thumb .tile { font-size: max(8px, calc(var(--cell) * .5)); }
@media (max-width: 560px) { .map-card.wide { grid-column: auto; } }
.size-bar { margin-bottom: 0; }

/* "Map of the week" tag next to the title on the map page */
.tag-motw { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .15em .7em; border-radius: 999px; background: #e0314b; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
@media print { .tag-motw { display: none; } }