/* ═══════════════════════════════════════════════════════════════════════════
   §HR Phase 4B — Rating Card (shared component)
   ═══════════════════════════════════════════════════════════════════════════
   ONE stylesheet for the component used by BOTH the post-match summary modal
   (game page, fixed dark palette) and the Match Report (themed light/dark).

   Colours are driven by local custom properties so each host can retint the card
   without the component knowing which page it is on.

   Loaded on index.html, lobby.html and profile.html — the same three pages that
   load rating-card.js. */

.rt-card {
  --rt-ink: #eceff3;
  --rt-dim: #9aa3b2;
  --rt-line: rgba(212, 164, 48, .30);
  --rt-bg: rgba(255, 255, 255, .04);
  --rt-pos: #58c98a;
  --rt-neg: #e8836f;   /* muted coral, deliberately NOT alarm red */
  --rt-flat: #9aa3b2;
  --rt-accent: #d4a430;

  margin: 12px 18px 4px;
  padding: 12px 14px 14px;
  border: 1px solid var(--rt-line);
  border-radius: 12px;
  background: var(--rt-bg);
  color: var(--rt-ink);
  /* Establishes the card's own stacking context so it can never rise above the
     win-confetti layer or the modal chrome. */
  position: relative;
  z-index: 0;
}
.rt-card[hidden] { display: none !important; }

/* Match Report host: inherit the report's themed ink, not the modal's palette. */
.mr-rating .rt-card {
  margin: 0 0 8px;
  --rt-ink: var(--ink, #eceff3);
  --rt-bg: rgba(127, 127, 127, .07);
  --rt-line: rgba(127, 127, 127, .28);
}
:root[data-theme="light"] .mr-rating .rt-card {
  --rt-ink: #1b1b1b;
  --rt-dim: #5c6470;
  --rt-pos: #1e8a52;
  --rt-neg: #b8452c;
  --rt-flat: #5c6470;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.rt-title {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rt-dim);
}
.rt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.rt-badge {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rt-accent);
  color: var(--rt-accent);
  white-space: nowrap;
}
.rt-badge--casual { border-color: var(--rt-flat); color: var(--rt-flat); }

.rt-help-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -9px -9px -9px 0;   /* keep the 44px touch target from adding bulk */
  background: none;
  border: 0;
  color: var(--rt-dim);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.rt-help-btn::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rt-line);
  border-radius: 50%;
  font-size: .8rem;
}
.rt-help-btn:hover { color: var(--rt-ink); }
.rt-help-btn:hover::before { border-color: var(--rt-accent); }
.rt-card :focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 2px; }

/* ── the three numbers ──────────────────────────────────────────────────── */
.rt-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 5vw, 26px);
  flex-wrap: nowrap;
}
.rt-col { text-align: center; min-width: 0; }
.rt-val {
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;   /* no width jitter while counting */
  line-height: 1.15;
}
.rt-before { color: var(--rt-dim); }
.rt-after { color: var(--rt-ink); }
.rt-lab {
  margin-top: 2px;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rt-dim);
}
.rt-delta {
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.rt-arrow { font-size: .74em; margin-inline-end: 2px; }
.rt-pos { color: var(--rt-pos); }
.rt-neg { color: var(--rt-neg); }
.rt-flat { color: var(--rt-flat); }

/* Isolate numeric and name runs so an RTL paragraph cannot reverse
   "1500 -> 1522" or reorder a mixed-script username. */
.rt-num { unicode-bidi: isolate; }
.rt-name { unicode-bidi: isolate; }

/* ── meta ───────────────────────────────────────────────────────────────── */
.rt-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rt-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--rt-line);
  color: var(--rt-dim);
  white-space: nowrap;
}
.rt-chip--established { color: var(--rt-pos); border-color: rgba(88, 201, 138, .4); }
.rt-chip--calibrating { color: var(--rt-accent); border-color: rgba(212, 164, 48, .45); }
.rt-chip--rusty { color: var(--rt-flat); }
.rt-rank { font-size: .78rem; color: var(--rt-dim); font-weight: 600; }
.rt-rankmove { font-weight: 800; }
/* §4D — movement stated in words as well as by arrow and colour, so direction is never
   communicated by colour alone. */
.rt-ranksub { font-weight: 700; opacity: .85; }
.rt-note {
  margin-top: 8px;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--rt-dim);
  text-align: center;
}

/* ── "Why +N?" disclosure ───────────────────────────────────────────────── */
.rt-disclose {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  min-height: 44px;
  background: none;
  border: 1px dashed var(--rt-line);
  border-radius: 8px;
  color: var(--rt-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.rt-disclose:hover { border-color: var(--rt-accent); border-style: solid; }
.rt-disclose::before { content: '\25B8\00A0'; color: var(--rt-dim); }
.rt-disclose[aria-expanded="true"]::before { content: '\25BE\00A0'; }

.rt-bd { margin-top: 8px; }
.rt-bd[hidden] { display: none; }
.rt-bd-list { list-style: none; margin: 0; padding: 0; }
.rt-bd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 2px;
  font-size: .80rem;
  border-bottom: 1px solid rgba(127, 127, 127, .14);
}
/* Long or mixed-script names wrap instead of forcing horizontal scroll. */
.rt-bd-text { min-width: 0; overflow-wrap: anywhere; }
.rt-bd-pts { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-bd-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px 0;
  font-size: .82rem;
  font-weight: 800;
}

/* ── quiet states (unranked / pending / unavailable) ────────────────────── */
.rt-main--quiet { text-align: center; padding: 4px 0 2px; }
.rt-quiet-title { font-size: .92rem; font-weight: 700; color: var(--rt-ink); }
.rt-quiet-reason { margin-top: 4px; font-size: .78rem; color: var(--rt-dim); }

.rt-skeleton { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.rt-skeleton span {
  display: block;
  height: 10px;
  width: 54px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(127,127,127,.16), rgba(127,127,127,.34), rgba(127,127,127,.16));
  background-size: 200% 100%;
  animation: rtShimmer 1.25s linear infinite;
}
@keyframes rtShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── reveal ─────────────────────────────────────────────────────────────── */
/* Entry is opacity plus a small vertical lift only. No horizontal travel, so nothing
   needs mirroring under RTL. No overshoot or bounce: a spring reads as celebration,
   and it would apply identically to a loss. */
.rt-card[data-state] { animation: rtEnter .38s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rtEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rt-animating .rt-delta,
.rt-animating .rt-rank { opacity: 0; }
.rt-delta.rt-in,
.rt-rank.rt-in { animation: rtPop .18s ease-out both; }
@keyframes rtPop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.rt-settled .rt-delta,
.rt-settled .rt-rank { opacity: 1; animation: none; }

/* Reduced motion: identical information, no movement. Placed AFTER the defaults at
   equal specificity, per the MDN authoring pattern. Opacity-only transitions are
   outside the scope of WCAG 2.3.3, so the card still fades rather than snapping. */
@media (prefers-reduced-motion: reduce) {
  .rt-card[data-state] { animation: rtFade .2s linear both; }
  @keyframes rtFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .rt-delta.rt-in,
  .rt-rank.rt-in { animation: none; }
  .rt-animating .rt-delta,
  .rt-animating .rt-rank { opacity: 1; }
  .rt-skeleton span { animation: none; background: rgba(127, 127, 127, .22); }
}

/* ── explainer body (rendered inside the shared ui-dialog) ──────────────── */
.rt-help { text-align: start; max-width: 46ch; }
.rt-help-list { margin: 0 0 4px; padding-inline-start: 1.15em; }
.rt-help-list li { margin: 5px 0; font-size: .86rem; line-height: 1.45; }
.rt-help-sub {
  margin: 12px 0 4px;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .72;
}
.rt-help-dl { margin: 0; font-size: .84rem; line-height: 1.45; }
.rt-help-dl dt { font-weight: 800; margin-top: 6px; }
.rt-help-dl dd { margin: 1px 0 0; padding-inline-start: 0; opacity: .88; }

/* ── narrow screens ────────────────────────────────────────────────────── */
/* 320px is the tightest target. The three numbers stay on ONE row — stacking them
   would lose the before -> after story — so only the gap and type scale shrink;
   clamp() above already absorbs most of it. */
@media (max-width: 380px) {
  .rt-card { margin-inline: 12px; padding: 10px 11px 12px; }
  .rt-row { gap: 8px; }
  .rt-lab { font-size: .56rem; letter-spacing: .04em; }
  .rt-bd-row { font-size: .76rem; }
}

/* The live region must be reachable by assistive tech but never occupy space. */
.rt-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §HR Phase 4C — contextual Rating surfaces
   ═══════════════════════════════════════════════════════════════════════════
   Three small, restrained placements that reuse the component's tokens:
   the Profile card, the lobby account-menu self row, and the in-game popover row.
   None of them is a dashboard; each is one line or one small card. */

/* ── Profile Rating card ────────────────────────────────────────────────── */
.pf-rating .pf-section-hd { display: flex; align-items: center; gap: 8px; }
.pf-rt-help {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none;
  border: 1px solid currentColor; border-radius: 50%;
  color: inherit; opacity: .65;
  font: inherit; font-size: .72rem; font-weight: 800;
  cursor: pointer;
}
.pf-rt-help:hover { opacity: 1; }
.pf-rt-row {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pf-rt-value {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pf-rt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-rt-rank { font-size: .84rem; opacity: .75; font-weight: 600; }
.pf-rt-detail { margin-top: 6px; font-size: .8rem; opacity: .7; line-height: 1.4; }
.pf-rt-sub {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: .78rem; opacity: .7;
}

/* ── lobby account-menu self row ────────────────────────────────────────── */
/* One row, self only. Never a Rating anywhere else in the lobby. */
.ham-item-rating {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  text-decoration: none;
}
.ham-rt-label { font-weight: 700; opacity: .8; }
.ham-rt-value { font-weight: 900; font-variant-numeric: tabular-nums; }
.ham-rt-sub {
  flex: 1 1 100%;
  font-size: .72rem;
  opacity: .68;
  line-height: 1.3;
}

/* ── waiting-room pre-game badge ────────────────────────────────────────── */
/* Sits in the existing .rp-chips configuration row. Text-first: readable without
   relying on the icon or on colour alone. */
.rp-chip-ranked {
  border-color: rgba(212, 164, 48, .65) !important;
  color: #d4a430 !important;
  font-weight: 800;
  letter-spacing: .04em;
}
.rp-chip-casual {
  opacity: .82;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── in-game popover Rating row ─────────────────────────────────────────── */
/* Must not widen .pc-info-card: the sub-label wraps rather than stretching it. */
.pcic-row-rating { display: block; }
.pcic-rt-sub { opacity: .72; font-size: .92em; }

@media (max-width: 380px) {
  .pf-rt-value { font-size: 1.45rem; }
  .pf-rt-sub { gap: 10px; font-size: .74rem; }
}

/* ── §4D — profile private Rating history ──────────────────────────────────
   A compact list, deliberately not a chart or a dashboard. */
.pf-rt-history { margin-top: 14px; }
.pf-rt-history[hidden] { display: none; }
.pf-rt-hist-hd {
  font-size: .70rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; opacity: .7; margin-bottom: 6px;
}
.pf-rt-hist-list { list-style: none; margin: 0; padding: 0; }
.pf-rt-hist-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 2px;
  font-size: .82rem;
  border-bottom: 1px solid rgba(127, 127, 127, .14);
}
.pf-rt-hist-delta { flex: 0 0 auto; font-weight: 800; min-width: 3.2em; }
.pf-rt-hist-move { flex: 0 0 auto; opacity: .85; font-variant-numeric: tabular-nums; }
.pf-rt-hist-place { flex: 1 1 auto; opacity: .72; }
.pf-rt-hist-rank { font-weight: 800; }
.pf-rt-hist-date { flex: 0 0 auto; opacity: .6; font-size: .76rem; }
.pf-rt-hist-open {
  flex: 0 0 auto;
  padding: 4px 9px;
  min-height: 32px;
  background: none;
  border: 1px solid currentColor;
  border-radius: 7px;
  color: inherit;
  opacity: .65;
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.pf-rt-hist-open:hover { opacity: 1; }
.pf-rt-hist-more {
  margin-top: 8px;
  padding: 8px 14px;
  min-height: 40px;
  width: 100%;
  background: none;
  border: 1px dashed currentColor;
  border-radius: 8px;
  color: inherit;
  opacity: .75;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pf-rt-hist-more:hover { opacity: 1; }
.pf-rt-hist-more[disabled] { opacity: .5; cursor: default; }

@media (max-width: 380px) {
  .pf-rt-hist-row { gap: 6px; font-size: .78rem; }
  .pf-rt-hist-date { flex: 1 1 100%; }
}