/* Sıralama: köy şeref panosu. One row language for medals, villages and clans: [rank medallion] [name | village] [points].
   --rk-col / --rk-gap / --rk-pad are shared by rows, section heads and the "Senin sıran" strip, so every column lines up. */
#ranking-content { --rk-col: 28px; --rk-gap: 10px; --rk-pad: 8px; }
/* Tabs: the shared .ui-tabs strip (style.css) with the tab look of #panel, which style.css scopes to #panel only. Two tabs stay equal (--tab-count). */
#ranking-content .ui-tabs { margin: 0 0 8px; }
#ranking-content .ui-tabs .ui-tab:enabled { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 66px; margin: 0; padding: var(--space-1); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--muted); font: 600 var(--text-xs)/1.15 var(--font-body); text-align: center; white-space: normal; overflow-wrap: normal; hyphens: none; }
#ranking-content .ui-tabs .ui-tab.on:enabled { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 -3px 0 var(--focus); }
@media (hover: hover) { #ranking-content .ui-tabs .ui-tab:hover:enabled:not(.on) { background: var(--surface); color: var(--ink); } }
#ranking-content .ui-tabs .ui-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#ranking-content > .community-status { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
/* The long rule text of the village / clan view: one tap under the one-line hint. */
.community-ranking-about { margin: -8px 0 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.community-ranking-about summary { display: flex; align-items: center; min-height: 32px; color: var(--a-accent-text, var(--focus)); font-weight: 600; cursor: var(--cursor-pointer, pointer); }
.community-ranking-about summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.community-ranking-about p { margin: 0 0 6px; }

/* Section title (medal kinds, "Senin sıran"): icon sits in the rank column, name in the name column; a hairline and air above every section but the first. */
#ranking-content .community-section-head { display: grid; grid-template-columns: minmax(var(--rk-col), auto) minmax(0, 1fr); align-items: center; gap: 0 var(--rk-gap); margin: 14px 0 4px; padding: 14px var(--rk-pad) 0; border-top: 1px solid var(--border-soft); font: 700 14px/1.25 var(--font-display); color: var(--ink); }
#ranking-content .community-section-head:first-of-type { margin-top: 2px; padding-top: 0; border-top: 0; }
#ranking-content .community-section-head .ico { text-align: center; font-size: 18px; line-height: 1; }
#community-mine { position: sticky; top: -12px; z-index: 2; margin: 0 -12px 8px; padding: 6px 12px 4px; background: var(--surface-selected); border: 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); border-radius: 0; box-shadow: inset 3px 0 0 var(--a-accent, var(--focus)); }
#community-mine .community-section-head, #community-mine .community-section-head:first-of-type { display: block; margin: 0; padding: 0 var(--rk-pad); border: 0; font: 600 12px/1.3 var(--font-body); color: var(--muted); }
#community-mine > p { margin: 0; padding: 8px var(--rk-pad) 10px; color: var(--ink); font-size: 13px; }

/* Row: ~48 px. Name in ink (bold), village muted after a thin divider; points right, tabular. */
.community-rank-row { grid-template-columns: minmax(var(--rk-col), auto) minmax(0, 1fr) auto; gap: 0 var(--rk-gap); min-height: 48px; padding: 2px var(--rk-pad); border-radius: var(--radius-sm); color: var(--ink); }
#ranking-content .community-rank-row .rank-no { display: grid; place-items: center; box-sizing: border-box; min-width: var(--rk-col); height: var(--rk-col); padding: 0 4px; border-radius: 999px; font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
/* Medallions: gold = the theme's gold, silver = cool grey, bronze = warm copper. Dark digits on all three (>= 5:1). */
#ranking-content .community-rank-row.place-1 .rank-no { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--even); color: #2b2112; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .45); }
#ranking-content .community-rank-row.place-2 .rank-no { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%), #aab5c1; color: #161b21; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .45); }
#ranking-content .community-rank-row.place-3 .rank-no { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%), #c27d4c; color: #26140a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .45); }
#ranking-content .community-rank-row button { display: block; min-width: 0; min-height: 44px; padding: 4px 0; color: var(--ink); font: 400 14px/1.3 var(--font-body); border: 0; border-image: none; background: none; box-shadow: none; text-align: left; overflow-wrap: anywhere; }
#ranking-content .community-rank-row .community-rank-clan { display: block; min-width: 0; padding: 4px 0; font: 400 14px/1.3 var(--font-body); white-space: normal; }
#ranking-content .community-rank-row .rank-nick { font: 700 14px/1.3 var(--font-body); color: var(--ink); white-space: normal; }
#ranking-content .community-rank-row .rank-village { font: 400 13px/1.3 var(--font-body); color: var(--muted); white-space: normal; }
#ranking-content .community-rank-row .rank-village::before { content: ''; display: inline-block; width: 1px; height: .9em; margin: 0 8px; background: var(--border); vertical-align: -1px; }
@media (max-width: 760px) { /* sheet width: the clan's level / member count takes its own line instead of breaking mid-text */
  #ranking-content .community-rank-clan .rank-village { display: block; }
  #ranking-content .community-rank-clan .rank-village::before { display: none; }
}
@media (hover: hover) { #ranking-content .community-rank-row button:not(:disabled):hover .rank-nick { text-decoration: underline; } }
#ranking-content .community-rank-row button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.community-rank-row button:disabled { opacity: 1; cursor: var(--cursor, default); }
#ranking-content .community-rank-row .community-rank-points { text-align: right; white-space: nowrap; font: 700 16px/1.2 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.community-rank-breakdown { grid-column: 1 / -1; margin: 0; padding: 0 0 8px calc(var(--rk-col) + var(--rk-gap)); font-size: 12px; line-height: 1.4; color: var(--muted); }
#ranking-content .community-rank-row button.community-rank-points { min-height: 44px; width: auto; padding: 0 4px; text-align: right; cursor: var(--cursor-pointer, pointer); }
button.community-rank-points:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.community-rank-points small { margin-left: 3px; font: 400 12px var(--font-body); color: var(--muted); }
/* mine: selected fill + left edge (one is-mine per row; the sticky "Senin sıran" strip already carries the fill, so its inner row stays plain) */
#ranking-content .community-rank-row.is-mine { background: var(--surface-selected); border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--a-accent, var(--focus)); }
#community-mine .community-rank-row, #community-mine .community-rank-row.is-mine { border: 0; background: none; box-shadow: none; }
#community-ranking, #community-medals { margin-bottom: 12px; }
#community-ranking > p { color: var(--muted); font-size: 13px; }
.community-ranking-refresh { display: block; margin: 0 auto; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: 500 13px 'Outfit', sans-serif; text-decoration: underline; cursor: var(--cursor-pointer, pointer); }

/* Lonca sancağı (public/clan-banner-art.js): etiket yanında küçük, lonca sekmesinde liste simgesi boyunda. */
.clan-banner { display: inline-block; width: 12px; height: 16px; margin-right: 3px; vertical-align: -3px; flex: 0 0 auto; }
.clan-banner .cosmetic-emblem { width: 32px; height: 32px; filter: none; } /* nested <svg>: .cosmetic-emblem (42px) would override its width attribute */
.row .ico .clan-banner { width: 24px; height: 32px; margin-right: 4px; }