/* ═══════════════════════════════════════════════════════════════════════════
   سه تمدن — صفحهٔ رتبه‌بندی
   ───────────────────────────────────────────────────────────────────────────
   Sits on style.css's night kit and adds one idea of its own: a palace wall.
   The top three stand on lapis plinths along a rampart of Persepolis' stepped
   merlons (کنگره), and the rest of the forty are the ledger set into that wall.

   A file of its own so the home page does not pay for it. Arvan keeps .css by
   extension, so style.css is left alone by this page's releases too.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* One stepped merlon. It is a mask, so whatever paints it keeps its metal; a
     browser without masks draws a plain metal strip, which still reads as a rim. */
  --rk-merlon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cpath d='M4 18V13H9V8H14V0H22V8H27V13H32V18Z'/%3E%3C/svg%3E");
  --rk-crown: clamp(112px, 24vw, 152px);
}

/* The game's three metals (MedalRankMetal), so a player meets one gold, one
   silver and one bronze on the app's board and here. */
.rk-m1 { --m-dark: #6E4406; --m-mid: #C89018; --m-light: #F7E3A6; }
.rk-m2 { --m-dark: #3C444D; --m-mid: #7C8894; --m-light: #EDF2F7; }
.rk-m3 { --m-dark: #4A2610; --m-mid: #A05E30; --m-light: #F2C293; }

/* ── Head + search ─────────────────────────────────────────────────────────── */
.rk-head { padding-block-end: clamp(1.8rem, 5vw, 3rem); }
.rk-title { font-size: clamp(2.4rem, 8vw, 4rem); }

.rk-search { max-width: 34rem; margin: 1.7rem auto 0; text-align: start; }
.rk-search-label { display: block; margin-block-end: .4rem; font-size: .88rem; color: var(--gold-pale); }

.rk-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .32rem; padding-inline-start: .85rem;
  border: 1.5px solid transparent; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(26,16,6,.97), rgba(12,7,3,.98)) padding-box,
    var(--frame-metal) border-box;
  box-shadow: var(--shadow-deep);
  transition: box-shadow .25s var(--ease);
}
.rk-bar:focus-within { box-shadow: 0 0 0 3px rgba(200,144,24,.24), var(--shadow-deep); }
.rk-bar-ico { flex: none; width: 1.2rem; height: 1.2rem; color: var(--gold-light); }
.rk-bar input {
  flex: 1; min-width: 0; padding: .5rem .35rem;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 1rem; color: var(--warm-white);
}
.rk-bar input::placeholder { color: rgba(159,146,119,.8); }
.rk-bar .btn { flex: none; padding: .58rem 1.15rem; font-size: .95rem; }

.rk-stamp { margin-block-start: 1rem; font-size: .8rem; color: var(--muted); text-wrap: balance; }

/* ── A search's answer ─────────────────────────────────────────────────────── */
.rk-result { max-width: 46rem; margin-inline: auto; text-align: start; }
.rk-result:empty { display: none; }

.rk-note {
  margin-block-start: 1rem; padding: .7rem 1rem; border-radius: 12px;
  font-size: .92rem; text-align: center; color: var(--warm-sub);
  border: 1px solid rgba(200,144,24,.3); background: rgba(11,7,3,.72);
}

.rk-card { margin-block-start: 1.2rem; padding: clamp(1rem, 3vw, 1.5rem); animation: rk-rise .45s var(--ease) both; }
.rk-card-head { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.rk-card-crown { flex: none; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.65)); }
.rk-card-who { min-width: 0; }
.rk-card-name {
  font-family: 'Lalezar', sans-serif; font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.35;
  color: var(--gold-pale); overflow-wrap: anywhere;
}
.rk-card-league { font-size: .9rem; color: var(--warm-sub); }

.rk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-block-start: 1rem; }
@media (max-width: 640px) { .rk-tiles { grid-template-columns: repeat(2, 1fr); } }

.rk-tile {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
  padding: .5rem .6rem; border-radius: 12px;
  border: 1px solid rgba(200,144,24,.24);
  background: rgba(11,7,3,.5);
}
.rk-tile img { flex: none; width: 2.3rem; height: 2.3rem; object-fit: contain; }
.rk-tile img.round { border-radius: 50%; }
.rk-tile div { min-width: 0; line-height: 1.5; }
.rk-tile span { display: block; font-size: .76rem; color: var(--muted); }
.rk-tile b { display: block; font-size: .95rem; color: var(--warm-white); }
.rk-tile small { display: block; font-size: .74rem; color: var(--gold-light); }
.rk-tile.none { opacity: .48; }

/* ── استاد بزرگ ────────────────────────────────────────────────────────────── */
/* Clipped sideways only: the rays are wider than a phone, and they must fade out
   over the head above rather than stop at this section's top edge. A browser
   without `clip` keeps `hidden`, and only loses the top of the rays. */
.rk-league {
  position: relative;
  overflow-x: hidden; overflow-x: clip; overflow-y: visible;
  padding-block: clamp(2.6rem, 7vw, 4.4rem) clamp(2.6rem, 7vw, 4.6rem);
}

.rk-crown { position: relative; isolation: isolate; text-align: center; margin-block-end: clamp(1.6rem, 4vw, 2.4rem); }
/* Twelve rays, the sunburst the game sets its permanent medals on. Physical
   left + translate on purpose: this is wider than a phone, and auto margins do
   not centre an overflowing box (see the note at the top of style.css). */
.rk-rays {
  position: absolute; z-index: -1;
  left: 50%; top: calc(var(--rk-crown) / 2);
  width: min(660px, 135vw); aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(rgba(232,184,64,.2) 0deg 11deg, transparent 11deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, rgba(0,0,0,.5) 32%, transparent 68%);
  mask-image: radial-gradient(circle, #000 10%, rgba(0,0,0,.5) 32%, transparent 68%);
  animation: rk-spin 140s linear infinite;
  pointer-events: none;
}
@keyframes rk-spin { to { rotate: 360deg; } }

.rk-crown-img {
  width: var(--rk-crown); height: var(--rk-crown); margin-inline: auto; object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(232,184,64,.38));
  animation: float 7s ease-in-out infinite;
}
.rk-crown h2 { font-size: clamp(2rem, 6vw, 3rem); margin-block-start: .15rem; }
.rk-crown p { font-size: .95rem; }
.rk-how {
  display: inline-block; margin-block-start: .2rem; font-size: .84rem;
  color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px;
}
.rk-how:hover { color: var(--gold-pale); }

/* Three plinths. DOM order is first, second, third for a screen reader; `order`
   stands second on the right, the way the app's podium does under RTL. */
.rk-podium {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.16fr 1fr; align-items: end;
  gap: clamp(.35rem, 1.6vw, .9rem);
  width: min(46rem, 100%); margin-inline: auto;
  padding-inline: clamp(.4rem, 2vw, 1.2rem);
}
.rk-pod {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; text-align: center;
  animation: rk-rise .7s var(--ease) both;
}
.rk-pod.rk-m1 { order: 2; --h: clamp(6.4rem, 20vw, 8.8rem); animation-delay: .22s; }
.rk-pod.rk-m2 { order: 1; --h: clamp(4.8rem, 15vw, 6.6rem); animation-delay: .11s; }
.rk-pod.rk-m3 { order: 3; --h: clamp(3.6rem, 11vw, 5rem); }

.rk-pod-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; max-width: 100%;
  font-family: 'Lalezar', sans-serif; font-size: clamp(1rem, 2.8vw, 1.34rem); line-height: 1.4;
  color: var(--warm-white);
}
.rk-m1 .rk-pod-name { color: var(--gold-pale); font-size: clamp(1.1rem, 3.2vw, 1.55rem); }
.rk-pod-val { margin-block-end: .95rem; font-size: .84rem; font-weight: 700; color: var(--m-light); }

.rk-pod-step {
  position: relative; display: grid; place-items: center;
  width: 100%; height: var(--h);
  border: 1.5px solid var(--m-mid); border-block-end: 0; border-radius: 7px 7px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, var(--lapis), var(--lapis-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -8px 26px rgba(0,0,0,.4);
}
.rk-pod-step::before {
  content: ''; position: absolute;
  inset-inline: -1px; inset-block-end: 100%; height: 11px; margin-block-end: 1px;
  background: linear-gradient(90deg, var(--m-dark), var(--m-light) 50%, var(--m-dark));
  -webkit-mask: var(--rk-merlon) center bottom / 22px 11px round no-repeat;
  mask: var(--rk-merlon) center bottom / 22px 11px round no-repeat;
}
.rk-pod-num {
  font-family: 'Lalezar', sans-serif; font-size: clamp(2rem, 7vw, 3.3rem); line-height: 1;
  background: linear-gradient(180deg, var(--m-light), var(--m-mid) 78%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
}

/* The rampart: its merlons run behind the plinths' feet. */
.rk-wall {
  z-index: 1;
  border-radius: 5px 5px var(--radius) var(--radius);
  padding: clamp(1rem, 3vw, 1.7rem) clamp(.9rem, 3.2vw, 2.1rem);
}
.rk-wall::after {
  content: ''; position: absolute; z-index: 1;
  inset-inline: 0; inset-block-end: 100%; height: 14px; margin-block-end: 1px;
  background: var(--frame-metal);
  -webkit-mask: var(--rk-merlon) center bottom / 28px 14px round no-repeat;
  mask: var(--rk-merlon) center bottom / 28px 14px round no-repeat;
}

/* ── A ledger line ─────────────────────────────────────────────────────────── */
.rk-list { display: grid; align-content: start; min-width: 0; }
.rk-list-two { column-gap: clamp(1.6rem, 4.5vw, 3.4rem); }
@media (min-width: 760px) {
  /* Down the right column, then the left: a reader's order under RTL. */
  .rk-list-two {
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--rows, 19), auto);
  }
}

.rk-row {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding-block: .3rem;
  animation: rk-in .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 15ms);
}
.rk-place {
  flex: none; width: 2.1rem; text-align: center;
  font-family: 'Lalezar', sans-serif; font-size: 1.05rem; line-height: 1.75rem;
  color: var(--gold-light);
}
.rk-row[class*='rk-m'] .rk-place {
  width: 1.75rem; height: 1.75rem; margin-inline: .175rem; border-radius: 50%;
  font-size: .98rem; line-height: 1.85rem; color: #1C1206;
  background: radial-gradient(circle at 36% 30%, var(--m-light), var(--m-mid) 64%, var(--m-dark));
  box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.rk-name {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .95rem; font-weight: 700; color: var(--warm-white);
}
/* The dotted leader of an old ledger, from the name to its figure. */
.rk-dots {
  flex: 1 1 .8rem; min-width: .8rem; align-self: flex-end;
  margin-block-end: .62rem;
  border-block-end: 1.5px dotted rgba(200,144,24,.32);
}
.rk-val { flex: none; font-size: .9rem; color: var(--gold-pale); font-variant-numeric: tabular-nums; }

.rk-empty { padding-block: .9rem; text-align: center; font-size: .9rem; color: var(--muted); }

.rk-skel { display: flex; align-items: center; gap: .6rem; padding-block: .68rem; }
.rk-skel i {
  display: block; height: .62rem; border-radius: 6px;
  background: rgba(200,144,24,.16);
  animation: rk-pulse 1.4s ease-in-out infinite;
}
.rk-skel i:nth-child(1) { flex: none; width: 1.5rem; }
.rk-skel i:nth-child(2) { flex: 1; }
.rk-skel i:nth-child(3) { flex: none; width: 3rem; }
@keyframes rk-pulse { 50% { opacity: .45; } }

@keyframes rk-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rk-rise { from { opacity: 0; transform: translateY(22px); } }

/* ── Nations + categories ──────────────────────────────────────────────────── */
.rk-section { padding-block: clamp(2.6rem, 7vw, 4.4rem); }
.rk-section-last { padding-block-end: clamp(3.4rem, 9vw, 6rem); }
.rk-section .section-head { margin-bottom: clamp(1.8rem, 5vw, 3rem); }
.rk-section .section-head h2 { color: var(--gold-pale); }

/* The site's nation card, its painting cut to a banner: here the list is the
   content. */
.rk-nations .nation-art-clip { aspect-ratio: 16 / 7; }
/* Fades into the frame's own paper at that height, so no seam shows under the
   banner. The home page's taller card ends darker, on purpose. */
.rk-nations .nation-art-clip::after {
  background: linear-gradient(180deg, rgba(11,7,3,.12) 0%, rgba(30,19,7,.58) 56%, #271909 100%);
}
.rk-nations .nation:hover { transform: none; }
.rk-nations .nation-body { padding: 3.2rem 1.1rem 1.1rem; }
.rk-nations .nation-body h3 { margin-bottom: .55rem; }
.rk-nations .rk-list { text-align: start; }
.rk-nations .rk-place { color: var(--accent); }

.rk-cats { display: grid; gap: 2.4rem 1.2rem; grid-template-columns: repeat(4, 1fr); padding-block-start: 1.6rem; }
@media (max-width: 1120px) { .rk-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rk-cats { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* The medal hangs over the card's top edge, as a crest does on a nation card. */
.rk-cat { display: flex; flex-direction: column; min-width: 0; padding: 0 1.05rem 1.05rem; text-align: center; }
.rk-cat > img {
  width: 92px; height: 92px; margin: -2.2rem auto .4rem; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.65));
}
.rk-cat h3 { font-size: 1.3rem; color: var(--gold-pale); }
.rk-cat > p { min-height: 2.9em; margin-block-end: .4rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.rk-cat .rk-list { text-align: start; }
@media (max-width: 620px) { .rk-cat > p { min-height: 0; } }

/* ── Closed / failed ───────────────────────────────────────────────────────── */
.rk-notice { padding: clamp(1.8rem, 5vw, 3rem) 1.4rem; text-align: center; max-width: 34rem; margin-inline: auto; }
.rk-notice img { width: 96px; height: 96px; margin: 0 auto .6rem; object-fit: contain; }
.rk-notice h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--gold-pale); }
.rk-notice p { margin-block: .3rem 0; font-size: .95rem; }
.rk-notice .btn { margin-block-start: 1.1rem; }