/* M4 Eternal — the realm: clan crests (realm-core.js, the site's own SVG shields), the seats' cards (realm.html, and their compact
   tiles on the home page) and the clan ranking's rows. Tokens, badges and the kicker come from ds.css; the page head, the board
   title and the empty state from rankings.css. */

/* ---------- crest ---------- */
.crest { display: block; width: var(--crest, 44px); height: auto; aspect-ratio: 100 / 120; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.crest--sm { --crest: 30px; }
.crest--md { --crest: 48px; }
.crest--lg { --crest: clamp(72px, 7vw, 104px); }
.crest--vacant { color: var(--faint); filter: none; opacity: 0.8; }

/* ---------- seats ---------- */
.realm-body .rk-bar { align-items: baseline; }
.realm-body .rk-bar .rk-list-title { margin: 0; }
.realm-valleys-title { margin-top: var(--sp-10); }
.realm-castle { display: grid; gap: var(--sp-4); }
.realm-valleys { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.realm-castle[aria-busy="true"], .realm-valleys[aria-busy="true"] { min-height: 180px; }
.realm-ghost { min-height: 260px; border: 1px solid var(--gold-hair); background: linear-gradient(100deg, rgba(20, 29, 43, 0.4) 30%, rgba(36, 50, 70, 0.55) 50%, rgba(20, 29, 43, 0.4) 70%) 0 0 / 300% 100%; animation: rk-shimmer 1.4s linear infinite; }
.realm-ghost--castle { min-height: 300px; }
.realm-empty { display: grid; justify-items: center; gap: 14px; grid-column: 1 / -1; }

.seat {
  position: relative; display: grid; gap: var(--sp-4); align-content: start; min-width: 0; padding: var(--sp-5);
  background: var(--panel-grad); border: 1px solid var(--gold-hair); box-shadow: var(--sh-2, var(--shadow));
  transition: border-color var(--dur-2);
}
.seat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; }
.seat:hover { border-color: var(--gold-line); }
.seat--vacant::before { background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.seat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.seat__title { display: grid; gap: 2px; min-width: 0; }
.seat__kind { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cyan); }
.seat__name { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--gold-hi); letter-spacing: 0.04em; }
.realm-status { flex: none; white-space: nowrap; }

.seat__holder { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.seat__who { display: grid; gap: 4px; min-width: 0; }
.seat__label { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }
.seat__clan { font-size: var(--fs-xl); font-weight: inherit; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat--vacant .seat__clan { color: var(--muted); }
.seat__held { font-size: var(--fs-sm); color: var(--gold); }
.seat__hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }
.seat__facts { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); margin: 4px 0 0; }
.seat__facts > div { display: grid; gap: 1px; }
.seat__facts dt { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.seat__facts dd { margin: 0; font-size: var(--fs-base); color: var(--text-soft); }

/* the countdown: the one number of the card */
.seat__next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-hair); background: rgba(5, 7, 11, 0.55);
}
.seat__next-label { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.seat__next .countdown { grid-row: span 2; align-self: center; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--gold-hi); text-shadow: 0 0 22px rgba(210, 171, 103, 0.3); white-space: nowrap; }
.seat__next-at { font-size: var(--fs-sm); color: var(--faint); }
.seat__next.is-live { border-color: rgba(239, 106, 82, 0.5); background: linear-gradient(90deg, rgba(91, 19, 13, 0.55), rgba(5, 7, 11, 0.6)); }
.seat__next.is-live .countdown { color: #ffd7ce; text-shadow: 0 0 22px rgba(239, 106, 82, 0.35); }
.seat__next.is-none { grid-template-columns: 1fr; }

/* the castle: wide, the crest large and the steps of its cycle along the bottom */
.seat--full.seat--castle { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "head head" "holder next" "steps steps"; padding: var(--sp-6); }
.seat--full.seat--castle .seat__head { grid-area: head; }
.seat--full.seat--castle .seat__holder { grid-area: holder; }
.seat--full.seat--castle .seat__next { grid-area: next; align-self: center; }
.seat--full.seat--castle .seat__steps { grid-area: steps; }
.seat--full.seat--castle .seat__name { font-size: var(--fs-2xl); }
.seat--full.seat--castle::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(210, 171, 103, 0.12), transparent); z-index: 0;
}
.seat > * { position: relative; z-index: 1; }

.seat__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 0; padding: var(--sp-4) 0 0; list-style: none; border-top: 1px solid var(--gold-hair); }
.seat__step { position: relative; display: grid; gap: 2px; padding: 0 var(--sp-3) 0 22px; }
.seat__step-dot { position: absolute; left: 2px; top: 4px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gold-line); background: var(--night); }
.seat__step-name { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.seat__step-at { font-size: var(--fs-sm); color: var(--text-soft); }
.seat__step.is-done .seat__step-dot { background: var(--gold-lo); border-color: var(--gold-lo); }
.seat__step.is-done .seat__step-name, .seat__step.is-done .seat__step-at { color: var(--faint); }
.seat__step.is-next .seat__step-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.seat__step.is-next .seat__step-name { color: var(--cyan); }

.realm-note { margin-top: var(--sp-10); padding: var(--sp-5) var(--sp-6); border-left: 2px solid var(--gold-line); background: var(--surface-1); max-width: 820px; }
.realm-note__title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--gold-hi); letter-spacing: 0.06em; text-transform: uppercase; }
.realm-note p { margin: 0 0 var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); }
.realm-note p:last-child { margin: 0; }

/* ---------- home page band ---------- */
.band--realm { padding-top: clamp(36px, 4vw, 56px); }
.realm-strip { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.realm-strip .seat { padding: var(--sp-4); gap: var(--sp-3); }
.realm-strip .seat__clan { font-size: var(--fs-lg); }
.realm-strip .seat__next { padding: var(--sp-2) var(--sp-3); }
.realm-strip .seat__next .countdown { font-size: var(--fs-xl); }
.realm-strip .seat__next-at { display: none; }
.realm-strip .seat--castle { border-color: var(--gold-line); }
.realm-strip .empty { grid-column: 1 / -1; }

/* ---------- clan ranking rows (rankings.html, «Clans») ---------- */
.rk-row--clan { grid-template-columns: 68px minmax(0, 1.7fr) minmax(0, 1fr) 84px 96px 120px; }
.rk-row--clan.no-fame { grid-template-columns: 68px minmax(0, 1.7fr) minmax(0, 1fr) 84px 96px; }
.rk-clan { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rk-clan .crest { --crest: 34px; }
.rk-clan__text { display: grid; gap: 4px; min-width: 0; }
.rk-clan__name { font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row--1 .rk-clan__name { color: var(--gold-hi); }
.rk-seats { display: flex; flex-wrap: wrap; gap: 4px; }
.rk-seat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; font-size: var(--fs-2xs); letter-spacing: 0.06em; color: var(--gold-hi); border: 1px solid var(--gold-line); background: var(--gold-wash); white-space: nowrap; }
.rk-seat::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.rk-seat--valley { color: #d7f3ff; border-color: var(--cyan-line); background: var(--cyan-wash); }
.rk-seat--valley::before { background: var(--cyan); }
.rk-leader { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Hall of Heroes (rankings.html, «Hall of Heroes») ---------- */
.rk-hall-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: var(--sp-5); }
.rk-hall-week { display: grid; gap: 2px; }
.rk-hall-week__label { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }
.rk-hall-week__value { color: var(--text-soft); }
.rk-hall-reset { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--gold-hair); background: rgba(5, 7, 11, 0.55); }
.rk-hall-reset__label { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.rk-hall-reset .countdown { font-size: var(--fs-xl); color: var(--gold-hi); }
.rk-hall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-8); padding: 0; list-style: none; }
.rk-hero-card {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: var(--sp-5) var(--sp-3) var(--sp-4); text-align: center; min-width: 0;
  background: linear-gradient(180deg, rgba(24, 34, 49, 0.78), rgba(10, 15, 23, 0.95)); border: 1px solid var(--gold-hair);
}
.rk-hero-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.rk-hero-card--1 { border-color: var(--gold-line); box-shadow: 0 30px 60px -36px rgba(210, 171, 103, 0.45); }
.rk-hero-card__rank { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold); }
.rk-hero-card img.emblem { width: 48px; height: 48px; object-fit: contain; }
.rk-hero-card__name { max-width: 100%; margin: 0; font-size: var(--fs-md); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-hero-card--1 .rk-hero-card__name { color: var(--gold-hi); }
.rk-hero-card__clan { max-width: 100%; font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-hero-card__cp { font-size: var(--fs-lg); color: var(--gold-hi); }
.rk-likes { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); }
.rk-likes::before {
  content: ""; width: 12px; height: 11px; flex: none; background: var(--red-hi);
  clip-path: path("M6 11 L0.8 5.6 A3 3 0 0 1 6 1.8 A3 3 0 0 1 11.2 5.6 Z");
}
.rk-row--hall { grid-template-columns: 68px minmax(0, 1.6fr) minmax(0, 1fr) 84px 140px 84px; }

@media (max-width: 1100px) {
  .rk-hall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-row--clan { grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) 72px 84px 104px; }
  .rk-row--clan.no-fame { grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) 72px 84px; }
  .rk-row--hall { grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) 72px 124px 72px; }
}
@media (max-width: 860px) {
  .seat--full.seat--castle { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "holder" "next" "steps"; padding: var(--sp-5); }
}
@media (max-width: 760px) {
  .rk-hall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-hall > :first-child { grid-column: 1 / -1; }
  .seat__clan { font-size: var(--fs-lg); }
  .rk-row--clan, .rk-row--clan.no-fame {
    grid-template-columns: 52px minmax(0, 1fr) auto auto; grid-template-areas: "rank hero hero hero" "rank leader level members" "rank fame fame fame";
  }
  .rk-row--clan .rk-cell--hero { grid-area: hero; }
  .rk-row--clan .rk-cell--leader { grid-area: leader; }
  .rk-row--clan .rk-cell--level { grid-area: level; }
  .rk-row--clan .rk-cell--members { grid-area: members; }
  .rk-row--clan .rk-cell--fame { grid-area: fame; text-align: left; }
  .rk-row--clan .rk-cell--leader, .rk-row--clan .rk-cell--members, .rk-row--clan .rk-cell--fame { display: grid; gap: 1px; align-content: start; }
  .rk-row--hall { grid-template-columns: 52px minmax(0, 1fr) auto auto auto; grid-template-areas: "rank hero hero hero hero" "rank class level cp likes"; }
  .rk-row--hall .rk-cell--likes { grid-area: likes; display: grid; gap: 1px; align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .realm-ghost { animation: none; }
}