/* La Croziade — Ember site layer (lacroziade.eu only), 2026-09-28 split of ember.css: page
   layout (wrap, page header, landing, sub-nav, grids) and every @media / view-transition rule.
   Loaded after ember-core.css; tokens and components live there. */

@media (min-width: 768px) { :root { --gutter: 24px; } }
.lc-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
/* ==========================================================================
   Header: wordmark, game switch, Discord
   ========================================================================== */
.lc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; }
.lc-header__right { display: flex; align-items: center; gap: 12px; }
.lc-navlink { padding: 0 14px; font: 600 15px/1 var(--f-head); color: var(--soft); }
.lc-navlink:hover { color: var(--bright); }
@media (hover: none) { .lc-box__title a::after { opacity: 0.6; } }
.lc-box__foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.lc-box__foot b { color: var(--text); font-weight: 600; }
.lc-box__foot nav { display: flex; gap: 10px; }
.lc-box__foot nav a { flex: 1; }
/* ==========================================================================
   Landing layout
   ========================================================================== */
.lc-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 24px; }
.lc-intro h1 { font-size: 26px; }
.lc-intro__sub { margin-left: 14px; font: 400 14px/1 var(--f-text); color: var(--muted); }
.lc-live { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--f-num); color: var(--muted); }
.lc-games { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.lc-games > .lc-box { display: flex; flex-direction: column; }
.lc-games > .lc-box > .lc-box__foot { margin-top: auto; padding-top: 14px; }
.lc-discord {
  display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 12px 12px 12px 24px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.lc-discord__title { font: 600 18px/1 var(--f-head); color: var(--bright); }
.lc-discord__sub { flex: 1; font-size: 14px; color: var(--muted); }
.lc-discord__invite { font: 400 14px/1 var(--f-num); color: var(--soft); }
.lc-discord .lc-btn { margin-left: auto; }
.lc-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid var(--line-faint);
  font-size: 13px; color: var(--dim);
}
/* ==========================================================================
   Game pages: sub-nav tabs, stats bar, section panels
   ========================================================================== */
.lc-subnav { display: flex; gap: 4px; height: 46px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; font: 600 15px/1 var(--f-head); }
.lc-subnav::-webkit-scrollbar { display: none; }
.lc-subnav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--dim); white-space: nowrap; }
.lc-subnav a:hover { color: var(--text); }
.lc-subnav a[aria-current="page"] { color: var(--game); }
.lc-subnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--game); box-shadow: 0 0 calc(10px * var(--glow)) rgba(var(--game-rgb), calc(0.8 * var(--glow)));
}
.lc-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 24px; }
/* ==========================================================================
   Responsive: one site, phone layout below 768px
   ========================================================================== */
@media (min-width: 768px) { .lc-only-phone { display: none !important; } }
@media (max-width: 1023px) {
  .lc-games, .lc-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lc-statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-statbar > div:nth-child(4) { border-left: 0; }
  .lc-statbar > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .lc-only-desktop { display: none !important; }
  .lc-header--game .lc-wordmark { display: none; } /* switch + Discord need the room */
  .lc-header .lc-switch > a { padding: 0 14px; }
  .lc-header { height: 68px; }
  .lc-wordmark { font-size: 13px; }
  .lc-intro { margin: 16px 0; }
  .lc-intro__sub { display: none; }
  .lc-box { padding: 18px 16px 14px; }
  .lc-box__title { font-size: 22px; }
  .lc-strip { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .lc-strip__slots { justify-content: space-between; }
  .lc-pips i { width: 11px; height: 10px; }
  .lc-table { font-size: 14px; }
  .lc-table td { height: 38px; }
  .lc-hide-sm { display: none; }
  .lc-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-statbar > div:nth-child(odd) { border-left: 0; }
  .lc-statbar > div:nth-child(4) { border-left: 1px solid var(--line); }
  .lc-statbar > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lc-discord { padding: 12px 12px 12px 16px; }
  .lc-box__foot nav { flex-direction: column; gap: 10px; }   /* phone: the two box buttons stack, full width */
  .lc-box__foot nav a { flex: none; }
  .lc-discord__sub, .lc-discord__invite { display: none; }
  .lc-footer { flex-direction: column; text-align: center; }
  /* phone landing shows one game at a time; the switch sets data-active */
  .lc-games[data-active="rtba"] > [data-game="hl2dm"],
  .lc-games[data-active="hl2dm"] > [data-game="rtba"] { display: none; }
}
/* Switching game (HL2DM page -> RTBA page, or the phone tab) crossfades the
   whole palette instead of flashing. Progressive: browsers without View
   Transitions just switch instantly. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Site extensions (lc_stats_ember.py, 2026-09-28): ember.css tokens only
   ========================================================================== */
[hidden] { display: none !important; }
.lc-gap { margin-top: 24px; }
.lc-small { font-size: 13px; }
.lc-note { margin-top: 10px; font-size: 13px; }
.lc-note--top { margin: 0 0 10px; }
.lc-acc { color: var(--acc); }
.up { color: var(--online); }
.down { color: #f08a7a; }
.lc-page-title { margin-top: 28px; }
.lc-page-title + .lc-gap, .lc-page-title + .lc-statbar { margin-top: 16px; }
.lc-titleline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.lc-titleline .lc-muted { font-size: 14px; }
.lc-box__head--tools { align-items: center; flex-wrap: wrap; }
.lc-panel > .lc-section-head:first-child, .lc-box > .lc-section-head:first-child { margin-top: 0; }
.lc-section-head__sub { margin-left: 6px; font: 400 13px/1 var(--f-text); color: var(--dim); }
.lc-header__right--games { gap: 10px; }
.lc-strip__name { font-weight: 600; color: var(--bright); white-space: nowrap; }
.lc-discord__icon { display: flex; color: var(--acc); }
.lc-discord__icon svg { width: 18px; height: 18px; }
.lc-copy { margin-top: 14px; }
.lc-copy__line { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; }
.lc-linkbtn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.lc-linkbtn:hover { color: var(--bright); }
.lc-more { padding: 12px 0 2px; text-align: center; font-size: 14px; }

/* names are links; they keep the table's colours (white, #1 in the game colour) */
.lc-table .name a, .lc-feed b a, .lc-record .v a, .lc-statbar__who a { color: inherit; }
.lc-table .name a:hover, .lc-feed b a:hover, .lc-record .v a:hover, .lc-statbar__who a:hover { color: var(--bright); }
.lc-map { font-family: var(--f-num); font-size: 14px; }
.lc-map a { color: var(--text); }
.lc-map a:hover { color: var(--bright); }
.lc-map--title { font: 500 26px/1.2 var(--f-num); color: var(--bright); overflow-wrap: anywhere; }
.lc-crumb { font-size: 13px; color: var(--dim); }
.lc-crumb a { color: var(--dim); }
.lc-crumb a:hover { color: var(--text); }

/* stats bar: the two text tiles (hot map, on fire) */
.lc-statbar .v.lc-statbar__map { padding-top: 4px; font-size: 15px; }
.lc-statbar__map a { color: var(--acc); }
.lc-statbar .v.lc-statbar__who { padding-top: 4px; font: 600 15px/1.2 var(--f-text); color: var(--bright); }
.lc-statbar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.lc-statbar--2 > div:nth-child(n) { border-top: 0; }
.lc-statbar--2 > div + div { border-left: 1px solid var(--line); }

/* collapsed rows / cards: .is-extra shows once the list is expanded or searched */
.lc-collapsible tr.is-extra, .lc-collapsible .lc-ach.is-extra { display: none; }
.lc-collapsible.is-all tr.is-extra, .lc-collapsible.is-filtering tr.is-extra { display: table-row; }
.lc-collapsible.is-all .lc-ach.is-extra { display: flex; }
.lc-sortable th { cursor: pointer; user-select: none; }
.lc-sortable th:hover { color: var(--text); }
.lc-sortable th.sorted[data-dir="desc"]::after { content: " \25BE"; }
.lc-sortable th.sorted[data-dir="asc"]::after { content: " \25B4"; }
.lc-table--dense th, .lc-table--dense td { padding-right: 10px; font-size: 13px; }
.lc-table--dense .name { min-width: 140px; }
.lc-table--plain td { height: 38px; }
.lc-scroll--tall { max-height: 560px; overflow-y: auto; }
/* maps page: the Map pages list fills its panel so both panels line up (desktop) */
.lc-maps-grid > .lc-panel:last-child { display: flex; flex-direction: column; }
.lc-maps-grid > .lc-panel:last-child > .lc-scroll--tall { flex: 1 1 0; min-height: 360px; max-height: none; }
.lc-progress-cell { width: 170px; }
.lc-progress { display: flex; align-items: center; gap: 8px; }
.lc-progress .lc-bar { flex: 1; }
.lc-progress .lc-num { font-size: 12px; }

/* grids */
.lc-grid-2--wide-left { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.lc-grid-2--top { align-items: start; }
.lc-table td.who { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.lc-table td.who--wide { max-width: 240px; }
.lc-bars__label a { color: var(--text); }
.lc-bars__label a:hover { color: var(--bright); }
.lc-duels td.lc-map { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.lc-grid-3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }

/* unlock feed (ladder page) */
.lc-feed { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lc-feed li { display: flex; align-items: center; gap: 12px; height: 38px; border-bottom: 1px solid var(--row-line); font-size: 14px; }
.lc-feed__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-feed b { font-weight: 600; }
.lc-feed__ach { color: var(--acc); }

/* bars: label | bar | value (favourite weapons, kills by weapon/map) */
.lc-bars { display: grid; gap: 7px; }
.lc-bars__row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 52px; align-items: center; gap: 14px; font-size: 14px; }
.lc-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.lc-bars__track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lc-bars__track > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
.lc-bars__val { font: 400 13px/1 var(--f-num); color: var(--muted); text-align: right; }
.lc-bars--danger .lc-bars__track > span { background: linear-gradient(90deg, #b8483d, #e0685a); }
.lc-bars--mono .lc-bars__row { grid-template-columns: 210px minmax(0, 1fr) 60px; }
.lc-bars--mono .lc-bars__label { font: 400 13px/1.3 var(--f-num); }
.lc-panel .lc-bars + .lc-section-head { margin-top: 22px; }

/* SVG charts: rating history, hours, heatmap */
.lc-chart { margin-top: 4px; color: var(--game); }
.lc-chart__svg { display: block; width: 100%; height: auto; }
.lc-chart__line { fill: none; stroke: var(--game); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 calc(4px * var(--glow)) rgba(var(--game-rgb), calc(0.55 * var(--glow)))); }
.lc-chart__dot { fill: var(--game); }
.lc-chart__now { fill: var(--acc); }
.lc-chart__band { font: 400 11px var(--f-text); }
.lc-chart__lbl { fill: var(--text); font: 400 12px var(--f-num); }
.lc-chart__lbl--now { fill: var(--acc); }
.lc-chart__axis { fill: var(--dim); font: 400 11px var(--f-num); }
.lc-chart__bar { fill: var(--game); opacity: 0.6; }
.lc-chart__day { stroke: var(--line); stroke-width: 1; }
.lc-chart__day-lbl { fill: var(--dim); font: 400 10px var(--f-num); }
.lc-heat rect { fill: var(--game); }
.lc-heat .lc-heat__bg { fill: var(--inset); }

/* player profile header */
.lc-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.lc-profile__name { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.lc-profile__name h1 { font: 700 40px/1.1 var(--f-head); overflow-wrap: anywhere; }
.lc-profile__name .lc-rank { font-size: 13px; padding: 3px 10px; }
.lc-profile__name .lc-avatar--lg { margin-right: 0; }
.lc-profile__meta { margin-top: 8px; font-size: 14px; color: var(--muted); }
.lc-profile__meta a { color: var(--soft); }
.lc-profile__meta a:hover { color: var(--bright); }
.lc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lc-badge { color: var(--soft); }
.lc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 540px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); }
.lc-kpis > div { padding: 14px 16px; min-width: 0; }
.lc-kpis > div:not(:nth-child(4n+1)) { border-left: 1px solid var(--line); }
.lc-kpis > div:nth-child(n+5) { border-top: 1px solid var(--line); }
.lc-kpis .v { font: 500 26px/1.2 var(--f-num); color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-kpis .k { margin-top: 2px; font-size: 12px; color: var(--dim); }

/* achievement cards (profile + catalogue) */
.lc-achgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.lc-ach { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.08), rgba(var(--acc-rgb), 0) 70px), var(--inset); }
.lc-ach.is-locked { border-color: var(--line); background: var(--inset); opacity: 0.55; }
.lc-ach__t { display: flex; align-items: center; gap: 8px; font: 600 15px/1.25 var(--f-head); color: var(--bright); }
.lc-ach__t > span { min-width: 0; }
.lc-ach__d { font-size: 12px; color: var(--muted); }
.lc-ach__bar { margin-top: 6px; }
.lc-ach__bar > span { background: var(--acc); }
.lc-ach__f { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--dim); }
.lc-ach--more { align-items: center; justify-content: center; gap: 6px; border-style: dashed; border-color: var(--line-strong);
  background: none; color: var(--muted); font: 400 13px/1.3 var(--f-text); cursor: pointer; }
.lc-ach--more:hover { color: var(--text); }
.lc-ach__plus { font: 500 20px/1 var(--f-num); color: var(--text); }
.achc { cursor: pointer; }
.achc.open { grid-column: 1 / -1; opacity: 1; border-color: var(--acc); }
.aplink { margin-left: auto; color: var(--dim); font: 400 13px/1 var(--f-num); visibility: hidden; }
.achc:hover .aplink, .achc:focus .aplink, .achc.open .aplink { visibility: visible; }
@media (hover: none) { .aplink { visibility: visible; } }
.achhold { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); cursor: auto; max-height: 260px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.achhold ol { margin: 0; padding-left: 24px; font-size: 12px; columns: auto 190px; column-gap: 22px; }
.achhold li { padding: 1px 0; break-inside: avoid; }
.achhold li .lc-dim { margin-left: 6px; font-size: 11px; }

/* records, rivalries */
.lc-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lc-record { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); }
.lc-record .k { font-size: 12px; color: var(--dim); }
.lc-record .v { margin: 4px 0 2px; font: 600 16px/1.3 var(--f-head); color: var(--bright); overflow-wrap: anywhere; }
.lc-split { display: block; width: 140px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lc-split > span { display: block; height: 100%; background: var(--game); }

/* how to join */
.lc-about h2 { margin-bottom: 12px; font-size: 17px; }
.lc-about p + p, .lc-about p + table, .lc-about table + p { margin-top: 10px; }
.lc-about__danger { color: #f08a7a !important; }
.lc-about .lc-btn + .lc-btn { margin-left: 8px; }
code { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset);
  font: 400 13px/1.5 var(--f-num); color: var(--acc); }
.lc-cmds td { height: auto; padding: 9px 12px 9px 0; white-space: normal; }
.lc-cmds td:first-child { width: 1%; white-space: nowrap; }

@media (max-width: 1023px) {
  .lc-grid-2--wide-left, .lc-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .lc-maps-grid > .lc-panel:last-child > .lc-scroll--tall { flex: none; min-height: 0; max-height: 560px; }
  .lc-profile { grid-template-columns: minmax(0, 1fr); }
  .lc-kpis { min-width: 0; }
}
@media (max-width: 767px) {
  .lc-page-title { margin-top: 20px; font-size: 22px; }
  .lc-gap, .lc-grid-3 { margin-top: 16px; }
  .lc-grid-2 { gap: 16px; margin-top: 16px; }
  .lc-panel { padding: 16px 14px 12px; }
  .lc-search { width: 100%; }
  .lc-profile__name h1 { font-size: 30px; }
  .lc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-kpis > div:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .lc-kpis > div:nth-child(-n+2) { border-top: 0; }
  .lc-kpis > div:nth-child(even) { border-left: 1px solid var(--line); }
  .lc-kpis .v { font-size: 22px; }
  .lc-bars__row { grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; }
  .lc-bars--mono .lc-bars__row { grid-template-columns: 150px minmax(0, 1fr) 52px; }
  .lc-progress-cell { width: 120px; }
  .lc-cmds td:first-child { white-space: normal; width: 38%; }
  .lc-table td.name { min-width: 120px; }   /* the avatar must not squeeze the name to nothing */
  .lc-about .lc-btn + .lc-btn { margin: 8px 0 0; }
  .lc-copy__line { flex-wrap: wrap; }
}