/* ── صفحة التاريخ · /statistiken?t=15 ────────────────────────────────────────
 *
 * Three skins, one stylesheet.  Every colour, edge and texture is a custom
 * property declared on `[data-theme]`; the rules below never name a colour
 * directly, so adding a fourth skin is a block of variables and nothing else.
 *
 * The skin is chosen server-side and printed into `data-theme` — there is no
 * class-toggling script, because the page's CSP allows `script-src 'self'`
 * only and this page renders for guests too.
 *
 * Width note: this sits inside the game's `#content` column (~570px), not a
 * full-width page.  Every grid below is measured for that and only spreads
 * when the column is genuinely wider.
 */

/* 🔴 **لوحة واحدة بلا ثيمات** (أمر المالك 2026-08-17). كانت ثلاث جلود.

   🪤 **وهذه الصفحة فاتت الجولة الأولى كلَّها** — وهي «صفحة التاريخ» التي
   عناها المالك فعلاً (‏`/statistiken?t=15`، ورأس هذا الملف يسمّيها كذلك).
   فاتت لأن اسم ملفها `legends.css` تحت `ranking/`: لا «history» في المسار
   ولا في الاسم، فلم يبلغها بحثٌ عن أيٍّ منهما. كشفها **جردُ ألوان الحزمة**
   قبل الرفع، لا التصفّح.

   والأسماء `--hx-*` باقية: بقيّة الملف تقرأ منها. */
.history-page {
  --hx-ink: var(--swd-ink, #3b342a);
  --hx-ink-dim: #5c564d;
  --hx-page: var(--swd-parchment, #fdfbf5);
  --hx-page-2: var(--swd-tile, #f7f1e0);
  --hx-panel: #fff;
  --hx-panel-2: var(--swd-tile, #f7f1e0);
  --hx-edge: var(--swd-rule, #d9cfb4);
  --hx-edge-soft: var(--swd-tile-rule, #dcc794);
  --hx-accent: var(--swd-bronze, #8c6d1f);
  --hx-accent-2: var(--swd-bronze-deep, #6b5216);
  --hx-glow: rgba(140, 109, 31, .16);
  --hx-radius: 6px;
  --hx-head-font: "Amiri", "Scheherazade New", Georgia, serif;
  --hx-texture: none;
}

.history-page {
  color: var(--hx-ink);
  background: var(--hx-page);
  background-image: var(--hx-texture);
  padding: 10px 10px 18px;
  border: 1px solid var(--hx-edge);
  border-radius: var(--hx-radius);
  font-family: inherit;
}

.history-page a { color: var(--hx-accent); text-decoration: none; }
.history-page a:hover { color: var(--hx-ink); }

/* ── الترويسة ─────────────────────────────────────────────────────────────── */
.hx-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  background: var(--hx-panel);
  border: 1px solid var(--hx-edge-soft);
  border-radius: var(--hx-radius);
  position: relative;
}
.hx-hero::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--hx-edge-soft);
  border-radius: var(--hx-radius);
  pointer-events: none;
  opacity: .55;
}
.hx-hero__seal {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--hx-glow));
}
.hx-hero__seal::before { content: var(--hx-seal); }
.hx-hero__text { flex: 1 1 240px; min-width: 0; }
.hx-hero h2 {
  margin: 0 0 3px;
  font-family: var(--hx-head-font);
  font-size: 21px;
  font-weight: 700;
  color: var(--hx-accent);
  letter-spacing: .3px;
}
.hx-hero p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--hx-ink-dim); }

/* ── مبدّل السمات ─────────────────────────────────────────────────────────── */
.hx-skins { display: flex; gap: 5px; flex: 0 0 auto; }
.hx-skins__pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  border: 1px solid var(--hx-edge-soft);
  border-radius: var(--hx-radius);
  background: var(--hx-panel-2);
  color: var(--hx-ink-dim);
  white-space: nowrap;
}
.hx-skins__pick i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35);
  flex: 0 0 auto;
}
/* Each swatch shows its own skin, not the active one — that is the whole point
   of a switcher: you pick what you are about to get. */
.hx-skins__pick:hover { border-color: var(--hx-accent); color: var(--hx-ink); }
.hx-skins__pick.is-active {
  border-color: var(--hx-accent);
  color: var(--hx-ink);
  box-shadow: 0 0 0 1px var(--hx-glow) inset;
}

/* ── تبويبات الأقسام ──────────────────────────────────────────────────────── */
.hx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hx-edge-soft);
  padding-bottom: 6px;
}
.hx-tabs a {
  padding: 5px 11px;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: var(--hx-radius);
  color: var(--hx-ink-dim);
}
.hx-tabs a:hover { background: var(--hx-panel); color: var(--hx-ink); }
.hx-tabs a.is-on {
  background: var(--hx-panel-2);
  border-color: var(--hx-edge);
  color: var(--hx-accent);
  font-weight: 700;
}

/* ── عنوان القسم ──────────────────────────────────────────────────────────── */
.hx-heading { margin: 0 0 10px; }
.hx-heading span {
  display: block;
  font-family: var(--hx-head-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--hx-ink);
}
.hx-heading small { display: block; margin-top: 2px; font-size: 11px; color: var(--hx-ink-dim); }

/* ── منصة الثلاثة الأوائل ─────────────────────────────────────────────────── */
.hx-podium {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  align-items: end;
}
.hx-podium__step {
  position: relative;
  padding: 12px 8px 10px;
  text-align: center;
  background: var(--hx-panel);
  border: 1px solid var(--hx-edge-soft);
  border-radius: var(--hx-radius);
  overflow: hidden;
}
/* Rank order, not source order: first place is the centre column and stands
   tallest, so the eye lands on the leader before it reads a single name. */
.hx-podium__step--1 { order: 2; padding-top: 20px; border-color: var(--hx-accent); box-shadow: 0 0 14px var(--hx-glow) inset; }
.hx-podium__step--2 { order: 1; }
.hx-podium__step--3 { order: 3; }
.hx-podium__medal { display: block; font-size: 20px; line-height: 1; margin-bottom: 4px; }
.hx-podium__step--1 .hx-podium__medal::before { content: "\1F947"; }
.hx-podium__step--2 .hx-podium__medal::before { content: "\1F948"; }
.hx-podium__step--3 .hx-podium__medal::before { content: "\1F949"; }
.hx-podium__place {
  position: absolute;
  inset-inline-start: 6px;
  top: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hx-edge);
}
.hx-podium__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--hx-ink);
  word-break: break-word;
}
.hx-podium__step--1 .hx-podium__name { font-size: 15px; color: var(--hx-accent); }
.hx-podium__score { display: block; margin-top: 3px; font-size: 11px; color: var(--hx-ink-dim); }

/* ── جدول 4–10 ────────────────────────────────────────────────────────────── */
.hx-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.hx-table td {
  padding: 6px 8px;
  font-size: 12px;
  background: var(--hx-panel);
  border-bottom: 1px solid var(--hx-edge-soft);
}
.hx-table tr:hover td { background: var(--hx-panel-2); }
.hx-table__rank { width: 34px; text-align: center; color: var(--hx-edge); font-weight: 700; }
.hx-table__name { font-weight: 700; color: var(--hx-ink); }
.hx-table__score { text-align: end; color: var(--hx-ink-dim); white-space: nowrap; }

/* ── بطاقات المعارك الخالدة ───────────────────────────────────────────────── */
.hx-battles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.hx-battle {
  display: block;
  position: relative;
  padding: 12px 12px 10px;
  background: var(--hx-panel);
  border: 1px solid var(--hx-edge-soft);
  border-radius: var(--hx-radius);
  color: var(--hx-ink);
  overflow: hidden;
}
.hx-battle:hover { border-color: var(--hx-accent); box-shadow: 0 0 12px var(--hx-glow) inset; color: var(--hx-ink); }
.hx-battle__no {
  position: absolute;
  inset-inline-end: 8px;
  top: 6px;
  font-family: var(--hx-head-font);
  font-size: 26px;
  line-height: 1;
  color: var(--hx-edge);
  opacity: .5;
}
.hx-battle h4 {
  margin: 0 0 4px;
  padding-inline-end: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hx-accent);
  line-height: 1.4;
}
.hx-battle__vs { display: block; font-size: 12px; margin-bottom: 7px; color: var(--hx-ink); }
.hx-battle__stats { display: flex; gap: 14px; margin: 0 0 6px; }
.hx-battle__stats dt { font-size: 10px; color: var(--hx-ink-dim); margin: 0; }
.hx-battle__stats dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--hx-ink); }
.hx-battle time { font-size: 10px; color: var(--hx-ink-dim); }

/* ── حالات فارغة وحواشٍ ───────────────────────────────────────────────────── */
.hx-empty {
  margin: 0 0 10px;
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--hx-ink-dim);
  background: var(--hx-panel);
  border: 1px dashed var(--hx-edge-soft);
  border-radius: var(--hx-radius);
}
.hx-note {
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--hx-ink-dim);
  background: var(--hx-panel);
  border-inline-start: 3px solid var(--hx-accent);
  border-radius: var(--hx-radius);
}
.hx-note b { color: var(--hx-accent); }

/* ── الأعمدة الضيقة ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .hx-podium { grid-template-columns: 1fr; }
  .hx-podium__step--1, .hx-podium__step--2, .hx-podium__step--3 { order: 0; }
  .hx-skins { width: 100%; }
}