:root {
  color-scheme: dark;
  --bg: #111720;
  --panel: #18212c;
  --panel-2: #202b38;
  --panel-3: #263241;
  --line: #425064;
  --text: #f0f2f5;
  --muted: #aab4c2;
  --accent: #8b7aa8;
  --accent-2: #76678f;
  --green: #83a88e;
  --red: #bb7f87;
  --amber: #bca062;
  --shadow: none;
  --radius: 6px;
  --clan-card-min: 138px;
  --clan-name-size: 15px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e8edf5;
  --panel: #ffffff;
  --panel-2: #f5f7fb;
  --panel-3: #e4eaf3;
  --line: #cbd5e3;
  --text: #172033;
  --muted: #59667c;
  --accent: #746486;
  --accent-2: #625572;
  --shadow: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.app-grid {
  --left-panel-width: 252px;
  --right-panel-width: 360px;
  display: grid;
  grid-template-columns: var(--left-panel-width) 7px minmax(480px, 1fr) 7px var(--right-panel-width);
  width: 100%;
  min-height: 100vh;
}
.app-grid.history-closed { grid-template-columns: var(--left-panel-width) 7px minmax(480px, 1fr) 0 0; }
.app-grid.history-closed .history-panel, .app-grid.history-closed [data-resize="right"] { display: none; }
.resize-handle {
  position: relative;
  z-index: 6;
  min-width: 7px;
  cursor: col-resize;
  touch-action: none;
  background: var(--bg);
}
.resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 3px;
  width: 1px;
  background: var(--line);
}
.resize-handle:hover::before, .resize-handle:focus-visible::before, .resize-handle.is-active::before { width: 2px; background: #746985; }
.resize-handle:focus-visible { outline: 1px solid #746985; outline-offset: -1px; }
body.is-resizing { cursor: col-resize; user-select: none; }
.workspace-panel { min-width: 0; }
.control-panel, .history-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--panel);
}
.control-panel {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 20px;
}
.tier-period-control { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.tier-period-control > strong { font-size: 12px; }
.tier-period-control label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.tier-period-control select, .tier-period-control input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); }
.tier-period-control small { color: var(--muted); font-size: 9px; }
.period-day-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tier-panel { position: relative; padding: 38px clamp(22px, 3vw, 48px) 80px; }
.history-panel { padding: 30px 22px; }
.public-tier-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 18px; padding: 9px; border: 1px solid var(--line); background: var(--panel); }
.public-tier-editor span { color: var(--muted); font-size: 11px; }
.tier-list.public-editing .clan-cell { cursor: grab; }
.tier-list.public-editing .clan-cell.is-dragging { opacity: .35; }
.tier-list.public-editing .clan-grid { min-height: 72px; outline: 1px dashed var(--line); outline-offset: -5px; }
.tier-list.public-editing .clan-grid.is-dragover { background: rgba(128, 99, 189, .10); }

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.brand strong { font-size: 16px; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: 11px; }
.brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.primary-nav { display: grid; gap: 6px; }
.primary-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 4px;
  color: var(--muted);
  font-weight: 650;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--text); background: var(--panel-2); }
.primary-nav a.active { color: var(--text); background: #282332; border-left: 3px solid #82749a; }
.primary-nav a span { width: 22px; text-align: center; font-size: 18px; }
.primary-nav .nav-disabled { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 12px; border-radius: 4px; color: #626b78; cursor: not-allowed; }
.primary-nav .nav-disabled > span { width: 22px; text-align: center; font-size: 18px; }
.primary-nav .nav-disabled small { margin-left: auto; padding: 1px 5px; border: 1px solid #3a424e; border-radius: 3px; font-size: 8px; text-transform: uppercase; }

.control-group { display: grid; gap: 10px; }
.eyebrow {
  margin: 0 0 7px;
  color: #8f82a8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.field-label { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.search-wrap { position: relative; }
.search-wrap span { position: absolute; left: 12px; top: 50%; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  background: var(--panel-2);
  color: var(--text);
}
input, textarea { padding: 9px 12px; }
textarea { resize: vertical; }
.search-wrap input { padding-left: 36px; }
select { padding: 8px 34px 8px 12px; }
input:focus, select:focus, textarea:focus { border-color: #776b8a; box-shadow: none; }
.check-row { display: flex; align-items: center; gap: 9px; margin: 3px 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.check-row input { width: 17px; min-height: 17px; accent-color: var(--accent); }
.secondary-button, .theme-button, .icon-button, .danger-button, .row-delete {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.secondary-button { min-height: 39px; margin-top: 3px; }
.secondary-button:hover, .theme-button:hover { background: var(--panel-2); }
.clear-focus-button { width: 100%; margin-top: 0; }
.motion-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.motion-control > div { display: grid; min-width: 0; }
.motion-control strong { font-size: 12px; }
.motion-control small { color: var(--muted); font-size: 10px; }
.toggle-switch { position: relative; flex: 0 0 auto; width: 34px; height: 19px; cursor: pointer; }
.toggle-switch input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.toggle-switch > span:first-of-type { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: background .18s ease, border-color .18s ease; }
.toggle-switch > span:first-of-type::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .18s ease; }
.toggle-switch input:checked + span { border-color: #71657f; background: #40384b; }
.toggle-switch input:checked + span::after { transform: translateX(15px); background: #c2b8cf; }
.toggle-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.sidebar-footer { display: grid; gap: 7px; margin-top: auto; color: var(--muted); font-size: 12px; }
.sidebar-footer a:hover { color: var(--text); }
.theme-button { padding: 9px 10px; text-align: left; color: var(--muted); }

.panel-heading, .history-header, .section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -.025em; }
h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.panel-description { max-width: 640px; margin: 12px 0 28px; color: var(--muted); }
.status-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; }
.status-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.tier-list { display: grid; gap: 13px; }
.tier-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
  background: var(--panel);
  box-shadow: none;
}
.tier-label {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 14px 7px;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.tier-brand-icon { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; object-fit: contain; border-radius: 2px; }
.tier-row[data-tier^="S"] .tier-label { background: #873e55; }
.tier-row[data-tier^="A"] .tier-label { background: #8d5837; }
.tier-row[data-tier^="B"] .tier-label { background: #806d3c; }
.tier-row[data-tier="C"] .tier-label { background: #496a79; }
.tier-row[data-tier="Calibration"] .tier-label { background: #4d5662; font-size: 17px; writing-mode: vertical-rl; transform: rotate(180deg); }
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--clan-card-min), 1fr)); gap: 7px; min-width: 0; padding: 10px; align-content: start; }
.clan-cell { display: grid; align-content: start; min-width: 0; }
.match-history-chip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  min-width: 0;
  min-height: 40px;
  margin: 0 1px 5px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-3);
  box-shadow: none;
  opacity: 1;
  transition: opacity .2s ease, border-color .2s ease, background-color .2s ease;
}
.match-history-chip[hidden] { display: none; }
.tier-list.smooth-mode .match-history-chip[hidden] { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }
.match-history-chip strong { min-width: 0; overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.match-history-chip span { font-size: 9px; font-weight: 800; white-space: nowrap; }
.match-history-chip small { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.match-history-chip.opponent-win { border-color: var(--green); background: rgba(108, 162, 123, .10); }
.match-history-chip.opponent-loss { border-color: var(--red); background: rgba(184, 111, 121, .10); }
.match-history-chip.opponent-draw { border-color: var(--amber); background: rgba(185, 154, 87, .10); }
.match-history-chip.opponent-neutral { border-color: var(--line); }
.match-history-chip.opponent-win strong { color: var(--green); }
.match-history-chip.opponent-loss strong { color: var(--red); }
.match-history-chip.opponent-draw strong { color: var(--amber); }
.clan-card {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 60px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.clan-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.clan-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: #756985; transform: scaleX(0); transform-origin: left; }
.clan-card.hover-pending::after { animation: hover-delay 1.2s linear forwards; }
.clan-card:hover { border-color: #43506a; }
.clan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clan-card.selected { border-color: var(--accent); background: rgba(128, 99, 189, .10); }
.clan-card.selected::before { background: var(--accent); }
.clan-card.is-source { border-color: var(--accent); background: rgba(128, 99, 189, .12); box-shadow: none; opacity: 1; }
.clan-card.opponent-win { border-color: var(--green); background: rgba(108, 162, 123, .12); box-shadow: none; opacity: 1; }
.clan-card.opponent-loss { border-color: var(--red); background: rgba(184, 111, 121, .12); box-shadow: none; opacity: 1; }
.clan-card.opponent-draw { border-color: var(--amber); background: rgba(185, 154, 87, .12); box-shadow: none; opacity: 1; }
.clan-card.opponent-win::before { background: var(--green); }
.clan-card.opponent-loss::before { background: var(--red); }
.clan-card.opponent-draw::before { background: var(--amber); }
.clan-card.opponent-neutral { border-color: var(--muted); opacity: 1; }
.tier-list.relations-active .clan-card:not(.is-source):not(.has-relation) { opacity: .42; filter: saturate(.65); }
@keyframes hover-delay { to { transform: scaleX(1); } }
.clan-name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  font-size: var(--clan-name-size);
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.clan-name.faction-merc { color: #87a9dc; }
.clan-name.faction-covenant { color: #ae92d0; }
.clan-name.faction-freedom { color: #85b990; }
.clan-name.faction-duty { color: #ca8c92; }
.clan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.record-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.record-badge.win { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.record-badge.loss { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.record-badge.draw { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.skeleton-card { height: 104px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

.history-header { align-items: center; margin-bottom: 24px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; font-size: 22px; }
.history-content { min-width: 0; }
.history-placeholder { display: grid; justify-items: center; padding: 70px 10px 30px; text-align: center; color: var(--muted); }
.history-placeholder strong { color: var(--text); }
.history-placeholder p { max-width: 250px; margin: 8px 0 0; font-size: 13px; }
.placeholder-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: #8f82a8; font-size: 21px; }
.clan-summary { display: grid; gap: 14px; margin-bottom: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.clan-summary-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.clan-summary h3 { min-width: 0; margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.tier-chip { flex: 0 0 auto; padding: 4px 8px; border-radius: 3px; color: var(--text); background: #4b415b; font-size: 11px; font-weight: 800; }
.summary-record { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.summary-record div { padding: 8px; border-radius: 3px; background: var(--panel); text-align: center; }
.summary-record strong { display: block; font-size: 18px; }
.summary-record span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.match-list { display: grid; gap: 8px; }
.match-card { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 11px 12px 11px 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.result-line { align-self: stretch; border-radius: 0 4px 4px 0; background: var(--muted); }
.match-card.win .result-line { background: var(--green); }
.match-card.loss .result-line { background: var(--red); }
.match-card.draw .result-line { background: var(--amber); }
.match-info { min-width: 0; }
.match-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-info span { color: var(--muted); font-size: 10px; }
.match-score { font-size: 18px; font-weight: 900; white-space: nowrap; }
.history-count { margin: 0 0 9px; color: var(--muted); font-size: 11px; }
.admin-comment { margin: 0 0 22px; padding: 14px 15px; border-left: 3px solid #746585; border-radius: 3px; background: var(--panel-2); }
.admin-comment p:last-child { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.map-stats { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.clan-compare-control { margin: 0 0 12px; }
.clan-compare-control label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.clan-compare-control select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel-2); }
.clan-comparison-result { margin: 0 0 16px; padding: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.clan-comparison-result > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.comparison-clans { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.comparison-clans div { min-width: 0; }
.comparison-clans div:last-child { text-align: right; }
.comparison-clans strong, .comparison-clans span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-clans span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.comparison-clans b { color: var(--muted); font-size: 10px; }
.map-stats-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.map-stats-title .eyebrow { margin: 0; }
.map-stats-title > span { color: var(--muted); font-size: 10px; }
.map-stats-list { display: grid; gap: 9px; }
.map-stat-row { padding: 10px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.map-stat-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.map-stat-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-stat-head span { color: var(--text); font-weight: 800; }
.map-progress { height: 4px; margin: 7px 0 6px; overflow: hidden; border-radius: 4px; background: var(--line); }
.map-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.map-stat-row small { color: var(--muted); font-size: 9px; }
.empty-state { padding: 48px 16px; text-align: center; color: var(--muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: var(--text); }

.site-footer { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 28px 30px; margin-top: 42px; padding: 28px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.site-footer h2 { margin: 0 0 4px; color: var(--text); font-size: 12px; letter-spacing: 0; }
.site-footer a { overflow-wrap: anywhere; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-brand { gap: 8px; }
.site-footer .footer-brand .brand-icon { width: 32px; height: 32px; }
.site-footer .footer-brand p { max-width: 220px; margin: 0; }
.footer-contacts button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; text-align: left; cursor: pointer; }
.footer-contacts button:hover, .footer-contacts button:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-socials a { display: flex; align-items: center; gap: 8px; }
.footer-socials svg { flex: 0 0 auto; width: 17px; height: 17px; fill: currentColor; }
.site-footer .footer-bottom { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0 24px; border-top: 1px solid var(--line); }
.contact-dialog { width: min(420px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--panel); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }
.contact-dialog::backdrop { background: rgba(6, 10, 15, .72); }
.contact-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.contact-dialog p:not(.eyebrow) { margin: 0 0 14px; color: var(--muted); }
.contact-dialog > a, .contact-dialog > span { display: block; width: max-content; max-width: 100%; margin-top: 8px; overflow-wrap: anywhere; }
.contact-dialog > a { color: #9eb6da; }

.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 32px, 940px); margin: 0 auto; padding: 22px 0; border-bottom: 1px solid var(--line); }
.secondary-link { padding: 8px 11px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 12px; }
.secondary-link:hover, .secondary-link:focus-visible { color: var(--text); background: var(--panel-2); }
.legal-layout { width: min(100% - 32px, 940px); margin: 0 auto; padding: 46px 0 80px; }
.legal-document { padding: clamp(22px, 5vw, 56px); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.legal-document h1 { max-width: 760px; margin-bottom: 16px; }
.legal-document h2 { margin: 38px 0 12px; padding-top: 4px; font-size: 18px; }
.legal-document p { margin: 0 0 13px; color: var(--muted); }
.legal-document a { color: #a99aba; text-decoration: underline; text-underline-offset: 3px; }
.legal-document strong { color: var(--text); }
.legal-lead { max-width: 720px; font-size: 16px; }
.legal-contacts { margin-top: 14px; padding: 16px 18px; border-left: 3px solid #746585; background: var(--panel-2); }
.legal-contacts p:last-child { margin-bottom: 0; }

.players-layout { display: grid; grid-template-columns: 230px minmax(600px, 1fr) minmax(300px, 350px); min-height: 100vh; }
.players-layout.player-details-closed { grid-template-columns: 230px minmax(600px, 1fr) 0; }
.players-layout.player-details-closed .player-details { display: none; }
.players-sidebar, .player-details { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel); }
.players-sidebar { display: flex; flex-direction: column; gap: 28px; padding: 26px 18px; border-right: 1px solid var(--line); }
.players-content { min-width: 0; padding: 38px clamp(20px, 2.5vw, 42px) 70px; }
.player-details { padding: 30px 20px; border-left: 1px solid var(--line); }
.player-tier-switch, .players-inline-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.player-tier-switch button, .players-inline-tabs button { min-height: 37px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }
.player-tier-switch button[aria-selected="true"], .players-inline-tabs button[aria-selected="true"] { color: var(--text); background: #40364c; }
.players-inline-tabs { display: none; }
.player-source-note { display: grid; gap: 6px; padding: 12px; border-left: 3px solid var(--amber); background: var(--panel-2); font-size: 11px; }
.player-source-note span { color: var(--muted); }
.players-heading { align-items: center; }
.period-badge { display: grid; min-width: 190px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); text-align: right; }
.period-badge small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.period-badge strong { font-size: 13px; }
.rankings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); gap: 14px; align-items: start; justify-content: start; }
.ranking-board { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.ranking-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 49px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.ranking-title h2 { font-size: 14px; }
.ranking-title h2 { margin: 0; }
.ranking-title small { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; }
.ranking-title > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 3px; background: #51445f; font-size: 12px; font-weight: 900; }
.ranking-columns, .ranking-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 76px; align-items: center; }
.ranking-columns { min-height: 30px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--panel-2); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ranking-columns span:last-child { text-align: right; }
.ranking-row { width: 100%; min-height: 48px; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row:hover, .ranking-row:focus-visible { background: var(--panel-2); }
.ranking-row.selected { background: rgba(128, 99, 189, .13); box-shadow: inset 3px 0 #756985; }
.rank-position { color: var(--muted); font-size: 12px; font-weight: 900; }
.rank-person { display: grid; min-width: 0; line-height: 1.25; }
.rank-person strong, .rank-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-person strong { font-size: 12px; }
.rank-person small { color: var(--muted); font-size: 10px; }
.rank-person small.faction-merc, .player-clan.faction-merc { color: #87a9dc; }
.rank-person small.faction-covenant, .player-clan.faction-covenant { color: #ae92d0; }
.rank-person small.faction-freedom, .player-clan.faction-freedom { color: #85b990; }
.rank-person small.faction-duty, .player-clan.faction-duty { color: #ca8c92; }
.rank-value { text-align: right; font-size: 13px; font-weight: 900; }
.ranking-empty { padding: 34px 12px; color: var(--muted); text-align: center; font-size: 11px; }
.player-summary { margin-bottom: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.player-summary h3 { margin: 0 0 13px; overflow-wrap: anywhere; font-size: 20px; }
.player-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.player-stat-grid > div, .player-day-stats > div { padding: 8px; border-radius: 3px; background: var(--panel); }
.player-stat-grid span, .player-day-stats span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.player-stat-grid strong, .player-day-stats strong { display: block; margin-top: 2px; font-size: 16px; }
.player-day { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.player-day h3 { margin: 0 0 9px; font-size: 12px; }
.player-day-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.raw-data-notice { margin: 0 0 18px; padding: 11px 12px; border-left: 3px solid var(--amber); background: var(--panel-2); color: var(--muted); font-size: 11px; }
.raw-data-notice strong { display: block; margin-bottom: 3px; color: var(--text); }
.player-compare-control { margin: 0 0 14px; }
.player-compare-control label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.player-compare-control select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel-2); }
.player-comparison { margin-bottom: 18px; padding: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.comparison-player-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; align-items: center; margin-bottom: 10px; }
.comparison-player-head div:last-child { text-align: right; }
.comparison-player-head strong, .comparison-player-head span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-player-head span { margin-top: 2px; font-size: 9px; }
.comparison-player-head b { color: var(--muted); font-size: 9px; }
.player-comparison-grid { display: grid; gap: 4px; }
.player-comparison-grid div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 6px 7px; background: var(--panel); }
.player-comparison-grid span { color: var(--muted); font-size: 9px; }
.player-comparison-grid strong, .player-comparison-grid em { min-width: 48px; font-size: 11px; font-style: normal; text-align: right; }
.player-comparison-grid strong { color: #c5b4df; }

.mobile-header, .mobile-tabs { display: none; }
.public-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.community-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 28px; height: 100vh; padding: 26px 18px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.community-sidebar .sidebar-footer { margin-top: auto; }
.public-shell-main { min-width: 0; }
.public-shell-main > .community-header, .public-shell-main > .legal-header { display: none; }
.sidebar-link-button { width: 100%; padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.sidebar-link-button:hover { color: var(--text); }
.secret-tier-settings { width: min(92vw, 390px); padding: 18px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--panel); }
.secret-tier-settings::backdrop { background: rgba(5, 8, 12, .72); }
.secret-tier-settings label { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 15px 0; font-size: 12px; font-weight: 700; }
.secret-tier-settings input { grid-column: 1 / -1; width: 100%; }
.secret-tier-settings output { color: var(--muted); }
.secret-settings-head { display: flex; align-items: center; justify-content: space-between; }

.auth-layout, .simple-layout { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card, .simple-card { width: min(100%, 450px); padding: clamp(24px, 5vw, 42px); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: none; }
.auth-card .brand { margin-bottom: 40px; }
.auth-card h1, .simple-card h1 { margin-bottom: 24px; }
.stack-form { display: grid; gap: 15px; }
.stack-form label, .match-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.primary-button { min-height: 43px; padding: 10px 16px; border: 1px solid #766b88; border-radius: 4px; color: var(--text); background: #544966; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: var(--accent-2); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.button-link { display: inline-flex; align-items: center; justify-content: center; width: max-content; padding-inline: 16px; }
.secondary-button.button-link { padding: 9px 14px; }
.primary-button.inline { display: inline-flex; align-items: center; width: auto; margin-top: 12px; }
.text-link { display: inline-block; margin-top: 22px; color: var(--muted); font-size: 13px; }
.flash { margin: 0 0 18px; padding: 11px 13px; border-radius: 4px; background: var(--panel-2); }
.flash.success { color: var(--green); }
.flash.error { color: var(--red); }
.simple-layout { align-content: center; gap: 30px; }
.simple-layout > .brand { width: min(100%, 450px); }
.simple-card p:not(.eyebrow) { color: var(--muted); }

.admin-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 32px; height: 100vh; padding: 26px 20px; border-right: 1px solid var(--line); background: var(--panel); }
.admin-sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-sidebar-footer a { display: block; padding: 10px 12px; color: var(--muted); }
.admin-sidebar-footer a:hover { color: var(--text); background: var(--panel-2); }
.admin-content { min-width: 0; padding: 38px clamp(18px, 4vw, 55px) 70px; }
.admin-card { min-width: 0; margin-top: 22px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.admin-card h2 { margin-bottom: 18px; }
.admin-hint { margin: -8px 0 18px; color: var(--muted); font-size: 13px; }
.admin-hint.is-pending { color: var(--amber); }
.clan-tier-add { display: grid; grid-template-columns: minmax(220px, 1fr) 170px auto; gap: 12px; align-items: end; margin: 18px 0; }
.clan-tier-add label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-tier-editor { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 10px; align-items: start; }
#admin-tier-editor.draft-tier-editor { grid-template-columns: 1fr; gap: 13px; }
.draft-tier-row { min-height: 86px; }
.draft-tier-row .tier-label { display: flex; flex-direction: column; gap: 4px; }
.draft-tier-row .tier-label span { font-size: 10px; opacity: .8; }
.draft-tier-row .admin-tier-dropzone { min-height: 72px; }
.draft-clan-item { min-height: 58px; background: var(--panel-2); }
.admin-tier-column { min-width: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.admin-tier-column > header { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin-tier-column > header span { min-width: 24px; padding: 2px 6px; border-radius: 3px; color: var(--muted); background: var(--panel); font-size: 10px; text-align: center; }
.admin-tier-dropzone { display: grid; align-content: start; gap: 5px; min-height: 64px; padding: 7px; transition: background .15s ease; }
.admin-tier-dropzone.is-dragover { background: rgba(141, 119, 160, .12); }
.admin-clan-item { display: grid; grid-template-columns: 18px minmax(62px, 1fr) 78px 28px 28px 28px; align-items: center; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); cursor: grab; }
.admin-clan-item.is-dragging { opacity: .35; }
.admin-clan-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-clan-grip { color: var(--muted); }
.admin-clan-item select { min-height: 28px; padding: 3px 5px; font-size: 10px; }
.admin-clan-item button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; cursor: pointer; }
.admin-clan-item button:hover { color: var(--text); background: var(--panel-2); }
.admin-clan-item [data-remove-clan] { color: var(--red); }
.draft-publish-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.draft-publish-form span { color: var(--muted); font-size: 11px; }
.match-form { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 13px; }
.match-form .primary-button { align-self: end; }
.comment-form { display: grid; gap: 14px; max-width: 720px; }
.comment-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.comment-form .primary-button { width: max-content; }
.period-form { display: grid; grid-template-columns: repeat(2, minmax(160px, 220px)) auto; gap: 12px; align-items: end; margin-bottom: 24px; }
.period-form label, .ranking-admin-form label, .snapshot-import-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ranking-admin-form { display: grid; gap: 13px; max-width: 760px; padding-top: 20px; border-top: 1px solid var(--line); }
.ranking-admin-fields { display: grid; grid-template-columns: 140px minmax(220px, 1fr); gap: 12px; }
.ranking-admin-form .primary-button { width: max-content; }
.player-top-editor { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.player-top-editor h3 { margin: 0; font-size: 17px; }
.player-top-editor h4 { margin: 20px 0 9px; }
.player-top-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(360px, 1fr)); gap: 10px; align-items: start; }
.player-top-admin-board { min-width: 0; border: 1px solid var(--line); background: var(--panel-2); }
.player-top-admin-board > header { display: flex; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.player-top-admin-row { display: grid; grid-template-columns: 24px minmax(90px, .8fr) minmax(100px, 1fr) 82px auto; gap: 5px; align-items: center; padding: 5px 7px; border-bottom: 1px solid var(--line); }
.player-top-admin-row:last-child { border-bottom: 0; }
.player-top-admin-row > span { color: var(--muted); font-size: 11px; }
.player-top-admin-row > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.player-top-admin-row input { min-width: 0; min-height: 32px; padding: 5px 7px; font-size: 11px; }
.player-top-admin-row .secondary-button { min-height: 32px; padding: 5px 8px; font-size: 10px; }
.player-stats-admin { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.player-stats-admin h3 { margin: 0; font-size: 17px; }
.player-stats-form { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.player-stats-form label, .week-import-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.player-stats-form .days-json-field { grid-column: 1 / -1; }
.player-stats-actions { display: flex; flex-wrap: wrap; gap: 9px; grid-column: 1 / -1; }
.manual-player-list { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 7px; margin-top: 18px; }
.manual-player-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.manual-player-list > div > button { display: grid; gap: 2px; min-width: 0; padding: 9px 11px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.manual-player-list strong, .manual-player-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-player-list span { color: var(--muted); font-size: 10px; }
.week-import-form { display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: 12px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.week-import-form .admin-hint { grid-column: 1 / -1; margin: 0; }
.snapshot-runtime { padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.snapshot-runtime.running { border-color: var(--amber); color: var(--amber); }
.snapshot-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; margin: 18px 0 22px; }
.snapshot-card { display: grid; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.snapshot-card.complete { border-left: 3px solid var(--green); }
.snapshot-card > div { display: grid; min-width: 0; }
.snapshot-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-card .secondary-button { width: 100%; min-height: 31px; font-size: 10px; }
.snapshot-card .secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.snapshot-import-form { display: grid; grid-template-columns: 130px minmax(230px, 1fr) auto; gap: 12px; align-items: end; padding-top: 20px; border-top: 1px solid var(--line); }
.snapshot-import-form input[type="file"] { padding: 7px; font-size: 11px; }
.admin-user-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto; gap: 12px; align-items: end; }
.admin-user-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-user-list { display: grid; gap: 7px; margin-top: 22px; }
.admin-user-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 1fr) auto; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.admin-user-row span { color: var(--muted); font-size: 11px; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.section-actions .secondary-button { display: inline-flex; align-items: center; }
.danger-button { padding: 8px 11px; color: var(--red); }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; }
td { font-size: 13px; }
.muted { color: var(--muted); }
.row-delete { width: 30px; height: 30px; color: var(--red); font-size: 19px; }
.empty-cell { padding: 40px; color: var(--muted); text-align: center; }

/* Public community pages: registration, news and character profiles. */
.community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 36px, 1180px);
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.community-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; color: var(--muted); font-size: 12px; font-weight: 650; }
.community-header nav a:hover, .community-header nav a:focus-visible { color: var(--text); }
.community-layout { width: min(100% - 36px, 1180px); margin: 0 auto; padding: 42px 0 80px; }
.community-layout.narrow-layout, .article-layout { width: min(100% - 36px, 940px); }
.page-heading { margin-bottom: 25px; }
.page-heading > p:last-child { max-width: 680px; margin: 12px 0 0; color: var(--muted); }
.community-card { min-width: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.community-card + .community-card { margin-top: 16px; }
.community-card > h1, .community-card > h2 { margin-bottom: 13px; }
.community-card p { color: var(--muted); }
.auth-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.auth-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.auth-choice h2, .auth-choice p { margin: 0; }
.auth-choice > .primary-button, .auth-choice > form { margin-top: auto; }
.auth-choice > small { color: var(--muted); font-size: 10px; }
.inline-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.verification-code { width: 100%; padding: 14px; border: 1px dashed var(--accent); background: var(--panel-2); font: 800 clamp(24px, 5vw, 38px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; text-align: center; user-select: all; }
.verification-expiry { margin: 0; font-size: 11px; }
.login-card { width: min(100%, 500px); margin: 20px auto 0; }
.login-card h1 { margin-bottom: 24px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-note { margin: 20px 0 0; font-size: 12px; }
.form-note a, .comment-login-note a { color: #a99aba; text-decoration: underline; text-underline-offset: 3px; }
.account-summary, .profile-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.profile-hero { position: relative; overflow: hidden; isolation: isolate; }
.profile-hero > * { position: relative; z-index: 2; }
.profile-faction-emblem { position: absolute; z-index: 0; top: 50%; right: 80px; width: min(260px, 32vw); height: min(260px, 32vw); object-fit: contain; opacity: .12; transform: translateY(-50%); pointer-events: none; }
.profile-title-emblem { width: 42px; height: 42px; margin-right: 10px; object-fit: contain; vertical-align: middle; }
.faction-surface-merc { background: linear-gradient(110deg, var(--panel) 55%, rgba(67, 105, 164, .22)); }
.faction-surface-duty { background: linear-gradient(110deg, var(--panel) 55%, rgba(164, 67, 75, .22)); }
.faction-surface-freedom { background: linear-gradient(110deg, var(--panel) 55%, rgba(67, 140, 85, .22)); }
.faction-surface-covenant { background: linear-gradient(110deg, var(--panel) 55%, rgba(128, 74, 160, .22)); }
.account-summary h1, .profile-hero h1 { margin-bottom: 8px; }
.account-summary p, .profile-hero p { margin: 0; }
.profile-layout { display: grid; gap: 14px; }
.profile-layout .site-footer { margin-top: 24px; }
.profile-identity { min-width: 0; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.profile-tags span { padding: 5px 8px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11px; font-weight: 800; }
.profile-layout .faction-merc { color: #87a9dc; }
.profile-layout .faction-covenant { color: #ae92d0; }
.profile-layout .faction-freedom { color: #85b990; }
.profile-layout .faction-duty { color: #ca8c92; }
.profile-status { max-width: 720px; margin-top: 14px !important; padding-left: 11px; border-left: 3px solid #776b8a; overflow-wrap: anywhere; }
.formatted-game-text { line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.formatted-game-text > div:empty { min-height: 1.55em; }
.clan-description { margin-top: 13px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.profile-stat-grid article { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.profile-stat-grid span { color: var(--muted); font-size: 10px; }
.profile-stat-grid strong { overflow-wrap: anywhere; font-size: 18px; }
.profile-stat-grid.compact strong { font-size: 16px; }
.profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-columns > * { min-width: 0; }
.profile-facts { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.profile-facts > div { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.profile-facts dt { color: var(--muted); font-size: 10px; }
.profile-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12px; text-align: right; }
.character-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 18px; }
.character-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 9px; padding: 11px 12px; border: 1px solid var(--line); background: var(--panel-2); }
.character-list a:hover, .character-list a:focus-visible { border-color: #776b8a; }
.character-list strong, .character-list small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-list small { grid-column: 2; color: var(--muted); font-size: 10px; }
.region-tag { grid-row: 1 / 3; align-self: center; padding: 3px 5px; background: #4b415b; font-size: 9px; font-weight: 850; }
.character-search { display: grid; grid-template-columns: 120px minmax(230px, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.character-search label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.compare-invite { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.compare-invite h2, .compare-invite p { margin: 0; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.character-compare-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 14px; align-items: end; }
.character-compare-form fieldset { display: grid; grid-template-columns: 100px minmax(160px, 1fr); gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.character-compare-form legend { grid-column: 1 / -1; margin-bottom: 7px; font-weight: 800; }
.character-compare-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.character-compare-form select, .character-compare-form input { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel-2); }
.character-compare-form > b { align-self: center; color: var(--muted); }
.profile-versus { margin-top: 14px; }
.versus-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.versus-head article { position: relative; min-width: 0; padding: 15px; overflow: hidden; border: 1px solid var(--line); }
.versus-head article:last-child { text-align: right; }
.versus-head article img { position: absolute; right: 8px; bottom: 4px; width: 80px; height: 80px; object-fit: contain; opacity: .15; }
.versus-head article:last-child img { right: auto; left: 8px; }
.versus-head h2 { margin: 3px 0; }
.versus-head > b { align-self: center; color: var(--muted); }
.versus-stats { display: grid; gap: 4px; margin-top: 14px; }
.versus-stats div { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(70px, auto) minmax(70px, auto); gap: 12px; padding: 8px 10px; background: var(--panel-2); }
.versus-stats span { color: var(--muted); font-size: 10px; }
.versus-stats strong, .versus-stats em { font-size: 12px; font-style: normal; text-align: right; }
.versus-stats strong { color: #c5b4df; }
.cache-badge { display: grid; flex: 0 0 auto; padding: 9px 11px; border: 1px solid var(--line); background: var(--panel-2); text-align: right; }
.cache-badge strong { font-size: 11px; }
.cache-badge small { color: var(--muted); font-size: 9px; }
.row-count { align-self: flex-start; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.profile-disclaimer { margin: 11px 0 18px; font-size: 12px; }
.profile-fields { margin: 0; border-top: 1px solid var(--line); }
.profile-fields > div { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 18px; padding: 9px 5px; border-bottom: 1px solid var(--line); }
.profile-fields dt { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.profile-fields dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.news-card { display: grid; gap: 11px; }
.news-card + .news-card { margin-top: 0; }
.news-card h2, .news-card p { margin: 0; }
.news-card h2 a:hover, .news-card h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.news-card > div { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.news-article h1 { max-width: 800px; margin-bottom: 13px; }
.news-lead { max-width: 760px; font-size: 16px; }
.news-body { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-compose { display: grid; gap: 10px; margin: 18px 0 24px; }
.comment-compose label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.comment-compose .primary-button { width: max-content; }
.comment-login-note { margin: 18px 0 24px; padding: 12px; border-left: 3px solid var(--accent); background: var(--panel-2); }
.comment-list { display: grid; gap: 8px; }
.comment-list article { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel-2); }
.comment-list article > div { display: flex; justify-content: space-between; gap: 14px; }
.comment-list time { color: var(--muted); font-size: 9px; }
.comment-list p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-news-list { display: grid; gap: 8px; }
.admin-news-list details { padding: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.admin-news-list summary { display: flex; justify-content: space-between; gap: 18px; cursor: pointer; }
.admin-news-list summary > span:first-child { display: grid; }
.admin-news-list summary small { color: var(--muted); }
.admin-news-list details > form { margin-top: 16px; }
.admin-comment-list { display: grid; gap: 8px; }
.admin-comment-list article { position: relative; padding: 12px 48px 12px 13px; border: 1px solid var(--line); background: var(--panel-2); }
.admin-comment-list article > div { display: grid; }
.admin-comment-list article span { color: var(--muted); font-size: 10px; }
.admin-comment-list article p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-comment-list form { position: absolute; top: 10px; right: 10px; }
#save-all-player-top-status.is-success { color: var(--green); }
#save-all-player-top-status.is-error { color: var(--red); }

@media (max-width: 1150px) {
  .app-grid { --left-panel-width: 220px; --right-panel-width: 300px; grid-template-columns: var(--left-panel-width) 7px minmax(390px, 1fr) 7px var(--right-panel-width); }
  .tier-panel { padding-inline: 22px; }
  .clan-grid { grid-template-columns: repeat(auto-fill, minmax(var(--clan-card-min), 1fr)); }
  .match-form { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .snapshot-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .admin-tier-editor { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .player-top-admin-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .players-layout { grid-template-columns: 205px minmax(520px, 1fr) 290px; }
  .rankings-grid { grid-template-columns: minmax(280px, 520px); }
}

@media (max-width: 960px) {
  body.players-page { padding-top: 62px; }
  .players-mobile-header { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 62px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
  .players-mobile-header .brand-icon { width: 38px; height: 38px; }
  .players-layout { display: block; min-height: calc(100vh - 62px); }
  .players-sidebar { display: none; }
  .players-content, .player-details { position: static; width: 100%; height: auto; min-height: 0; overflow: visible; border: 0; }
  .players-content { padding: 28px 16px 42px; }
  .player-details { padding: 28px 16px 60px; border-top: 1px solid var(--line); background: var(--bg); }
  .players-layout.player-details-closed .player-details { display: none; }
  .players-inline-tabs { display: grid; margin-bottom: 16px; }
}

@media (max-width: 900px) {
  .public-shell { display: block; }
  .community-sidebar { position: static; width: 100%; height: auto; min-height: 0; gap: 14px; padding: 16px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .community-sidebar .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-sidebar .sidebar-footer { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 0; }
  body.tier-page { padding-top: 116px; }
  .mobile-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: max(10px, env(safe-area-inset-top)) 16px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .brand.compact { font-weight: 800; }
  .brand.compact .brand-icon { width: 38px; height: 38px; }
  .mobile-tabs {
    position: fixed;
    inset: 62px 0 auto;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 54px;
    padding: 7px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
  }
  .mobile-tabs button { border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
  .mobile-tabs button[aria-current="page"] { color: var(--text); background: #40364c; }
  .app-grid { display: block; min-height: calc(100vh - 116px); }
  .resize-handle { display: none; }
  .workspace-panel { display: none; position: static; width: 100%; height: auto; min-height: calc(100vh - 116px); overflow: visible; border: 0; }
  .workspace-panel.is-mobile-active { display: block; }
  .control-panel.is-mobile-active { display: flex; }
  .control-panel { padding: 24px 18px 40px; }
  .control-panel > .brand { display: none; }
  .sidebar-footer { margin-top: 20px; }
  .tier-panel, .history-panel { padding: 26px 16px 70px; }
  .history-panel { background: var(--bg); }
  .history-placeholder { padding-top: 100px; }
  .match-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-sidebar .primary-nav { grid-template-columns: repeat(2, 1fr); }
  .match-form { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .period-form, .snapshot-import-form, .admin-user-form, .clan-tier-add, .player-stats-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-form .primary-button, .snapshot-import-form .primary-button, .admin-user-form .primary-button, .clan-tier-add .secondary-button { grid-column: 1 / -1; }
  .snapshot-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .panel-heading { display: block; }
  .status-pill { width: max-content; margin-top: 15px; }
  .tier-row { grid-template-columns: 48px minmax(0, 1fr); border-radius: 5px; }
  .tier-label { font-size: 16px; }
  .clan-grid { grid-template-columns: 1fr; padding: 10px; }
  .clan-card { min-height: 68px; }
  .match-list { grid-template-columns: 1fr; }
  .match-form { grid-template-columns: 1fr; }
  .period-form, .ranking-admin-fields, .snapshot-import-form, .snapshot-grid, .admin-user-form, .admin-user-row, .clan-tier-add, .admin-tier-editor, .player-stats-form, .manual-player-list, .week-import-form { grid-template-columns: 1fr; }
  .player-top-admin-row { grid-template-columns: 24px minmax(80px, 1fr) 1fr 70px; }
  .player-top-admin-row .secondary-button { grid-column: 2 / -1; }
  .period-form .primary-button, .snapshot-import-form .primary-button, .admin-user-form .primary-button, .clan-tier-add .secondary-button { grid-column: auto; }
  .admin-sidebar .primary-nav { grid-template-columns: 1fr; }
  .admin-content { padding: 25px 12px 50px; }
  .auth-layout, .simple-layout { padding: 12px; }
  .community-sidebar .primary-nav { grid-template-columns: 1fr; }
  .character-compare-form { grid-template-columns: 1fr; }
  .character-compare-form fieldset { grid-template-columns: 86px minmax(0, 1fr); }
  .character-compare-form > b { display: none; }
  .versus-head { grid-template-columns: 1fr; }
  .versus-head > b { justify-self: center; }
  .versus-head article:last-child { text-align: left; }
  .versus-head article:last-child img { right: 8px; left: auto; }
  .versus-stats div { grid-template-columns: minmax(90px, 1fr) auto auto; gap: 7px; }
  .compare-invite { display: grid; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer .footer-bottom { display: flex; grid-column: auto; flex-direction: column; align-items: flex-start; }
  .legal-header { align-items: flex-start; }
  .legal-header .brand small { display: none; }
  .legal-layout { padding-top: 24px; }
  .legal-document { padding: 20px 16px; }
  .players-heading { display: block; }
  .period-badge { width: max-content; min-width: 0; margin-top: 14px; text-align: left; }
  .rankings-grid { grid-template-columns: 1fr; }
  .ranking-columns, .ranking-row { grid-template-columns: 46px minmax(0, 1fr) 68px; }
  .community-header { align-items: flex-start; width: min(100% - 24px, 1180px); }
  .community-header .brand small { display: none; }
  .community-header nav { display: grid; justify-items: end; gap: 4px; }
  .community-layout, .community-layout.narrow-layout, .article-layout { width: min(100% - 24px, 1180px); padding-top: 26px; }
  .auth-choice-grid, .character-search { grid-template-columns: 1fr; }
  .inline-fields { grid-template-columns: 90px minmax(0, 1fr); }
  .account-summary, .profile-hero { display: grid; }
  .profile-columns { grid-template-columns: 1fr; }
  .profile-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-facts > div { grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); }
  .cache-badge { width: max-content; text-align: left; }
  .profile-fields > div { grid-template-columns: 1fr; gap: 3px; }
  .comment-list article > div { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}