/* MidRound — steel-slate tactical theme */
/* Palette: #FAFBFC #DCE3EA #A7B7C7 #6B8296 #2B3E52 (+ derived slate depths), T-orange / CT-blue side colors */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-var-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #101a24;
  --shadow-card: 0 10px 26px rgba(5, 10, 16, 0.38), 0 2px 8px rgba(5, 10, 16, 0.28);
  --bg-raised: #1a2836;
  --bg-panel: #1e2c3c;
  --bg-hover: #273848;
  --border: #2e4155;
  --border-strong: #6b8296;
  --text: #fafbfc;
  --text-2: #dce3ea;
  --text-3: #a7b7c7;
  --accent: #fafbfc;
  --accent-dim: #a7b7c7;
  --accent-bg: rgba(250, 251, 252, 0.12);
  --blue: #5fa8e8;
  --blue-bg: rgba(95, 168, 232, 0.13);
  --danger: #e06c5f;
  --danger-bg: rgba(224, 108, 95, 0.12);
  --ok: #57b97e;
  --ok-bg: rgba(87, 185, 126, 0.12);
  --t-color: #e0a458;
  --t-bg: rgba(224, 164, 88, 0.13);
  --ct-color: #5fa8e8;
  --radius: 10px;
  --radius-sm: 7px;
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* reserve the window scrollbar lane so page-height changes never shift the layout */
html { scrollbar-gutter: stable; }
body {
  background: radial-gradient(circle at top, #1e3042, var(--bg) 55%) fixed, var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dim); }
textarea { resize: vertical; min-height: 74px; }
label { display: block; font-size: 0.82rem; color: var(--text-2); margin-bottom: 4px; font-weight: 600; }
.field { margin-bottom: 14px; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--text-3); }

/* layout */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 218px; flex-shrink: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { flex: 1; min-width: 0; padding: 0 0 60px; }
.main > #view { max-width: 1176px; margin: 0 auto; padding: 18px 28px 0; }

/* topbar: full-width bar — brand · Match Mode · search · profile */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.tb-brand {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 800; font-size: 1.12rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(250, 251, 252, 0.28);
}
.tb-spacer { flex: 1; }
.tb-profile-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-panel);
  font-weight: 600; font-size: 0.9rem;
}
.tb-profile-btn:hover { background: var(--bg-hover); }
.tb-profile-btn .chev { color: var(--text-3); }
.tb-profile-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tb-profile .dd-menu { left: auto; right: 0; min-width: 230px; }
.tb-who { padding: 8px 12px 9px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.tb-who b { display: block; }
.tb-user-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-profile-btn { position: relative; }
.tb-profile-btn.has-invites::after {
  content: ""; position: absolute; top: 5px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-color); box-shadow: 0 0 8px rgba(224, 164, 88, 0.8);
}
.tb-profile .dd-menu { min-width: 270px; }
.pm-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); font-weight: 700; padding: 9px 12px 3px;
  border-top: 1px solid var(--border); margin-top: 5px;
}
.pm-invite { padding: 7px 12px 9px; display: flex; flex-direction: column; gap: 8px; }
.pm-invite + .pm-invite { border-top: 1px solid var(--border); }
.pm-invite-actions { display: flex; gap: 7px; }
.dd-item.active { background: var(--accent-bg); color: var(--text); }
a.dd-item { text-decoration: none; }
.global-search { position: relative; }
.global-search input {
  width: 220px; padding: 7px 12px 7px 32px;
  border-radius: 999px; font-size: 0.87rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  transition: width 0.15s, border-color 0.15s;
}
.global-search input:focus { width: 300px; border-color: var(--accent-dim); }
.gs-icon { position: absolute; left: 11px; top: 8px; color: var(--text-3); pointer-events: none; }
.gs-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 420px; max-width: calc(100vw - 40px); max-height: 62vh; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  z-index: 120;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.gs-panel.open { display: block; }
.gs-group {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); font-weight: 700; padding: 8px 10px 4px;
}
.gs-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px; font-size: 0.88rem;
}
.gs-row:hover { background: var(--bg-hover); }
.gs-row b { font-weight: 600; }
.gs-row .gs-side { margin-left: auto; color: var(--text-3); font-size: 0.78rem; white-space: nowrap; padding-left: 10px; }
.gs-row .gs-text { color: var(--text-2); }
.gs-row .side-tag { min-width: 26px; padding: 1px 6px; font-size: 0.62rem; }
.gs-empty { padding: 14px 12px; color: var(--text-3); font-size: 0.88rem; text-align: center; }
.wordmark { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; }
.wordmark svg { flex-shrink: 0; }
.wordmark .wm-name { font-weight: 700; font-size: 1.08rem; letter-spacing: 0.01em; }
.wordmark .wm-sub { font-size: 0.68rem; color: var(--text-3); display: block; margin-top: -3px; }
.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 0.92rem; font-weight: 500;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link { position: relative; }
.nav-link.active { background: var(--accent-bg); color: var(--accent); }
.nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.map-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.nav-link svg { flex-shrink: 0; opacity: 0.85; }
.nav-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 14px 10px 5px; font-weight: 700; }
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; }
.sidebar-footer .who { color: var(--text-2); padding: 4px 8px; }
.sidebar-footer .who b { color: var(--text); display: block; }
.side-logo {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 8px 20px; text-align: center;
}
.side-logo-badge {
  width: 58px; height: 58px; border-radius: 14px;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  display: grid; place-items: center;
}
.side-logo-badge svg { width: 34px; height: 34px; }
.side-logo-sub {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 0.7rem; color: var(--text-3); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  line-height: 1.7; padding: 0 4px;
}
/* Each line is its own block: letter-spacing leaves a trailing gap after the
   last letter, which pulls centered text left, and text-indent only corrects
   a block's first line. One block per line indents both by the same 2px. */
.side-logo-sub span { display: block; text-indent: 2px; }

/* Shiny CTA — animated conic-gradient border + dots + inner shimmer
   (same technique as LaneLens's Analyze button, in MidRound silver).
   Applied to .matchmode-btn (static markup) and auto-added to every
   .btn.primary by ui.js, which wraps their content in a .shine-in span. */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }

.matchmode-btn {
  display: inline-flex; align-items: center;
  padding: 9px 22px;
  font-size: 0.94rem; font-weight: 700; line-height: 1.2;
  border-radius: 999px;
}
.shine-cta {
  --shiny-cta-bg: var(--accent);
  --shiny-cta-bg-subtle: #a7b7c7;
  --shiny-cta-fg: #14202c;
  --shiny-cta-highlight: #ffffff;
  --shiny-cta-highlight-subtle: #f4f6fb;
  --animation: gradient-angle linear infinite;
  --duration: 4.5s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  outline-offset: 4px;
  border: 1px solid transparent;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--transition);
  transition-property: --gradient-percent, --gradient-shine;
}
/* out-specify .btn.primary's own fill/hover so the animated layers win */
.btn.primary.shine-cta, .btn.primary.shine-cta:hover {
  border-color: transparent;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transform: none;
}
.shine-cta::before,
.shine-cta::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.shine-cta:active { translate: 0 1px; }
/* dots pattern */
.shine-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}
/* inner shimmer */
.shine-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}
.shine-cta > span, .shine-cta .shine-in {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
}
.shine-cta,
.shine-cta::before,
.shine-cta::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.85) reverse paused;
  animation-composition: add;
}
.shine-cta:is(:hover, :focus-visible) {
  --gradient-percent: 25%;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}
.shine-cta:is(:hover, :focus-visible),
.shine-cta:is(:hover, :focus-visible)::before,
.shine-cta:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .shine-cta, .shine-cta::before, .shine-cta::after { animation: none; }
}

/* headers */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1, .detail-head h1, .mm-detail-head h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}
.page-head h1 { font-size: 1.4rem; font-weight: 700; }
.page-head .sub { color: var(--text-3); font-size: 0.9rem; margin-top: 2px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 17px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  min-height: 38px;
}
.btn:hover { background: var(--bg-hover); }
.btn { transition: background 0.12s, box-shadow 0.12s, transform 0.12s; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #14202c; }
.btn.primary:hover { background: #ffffff; box-shadow: 0 4px 20px rgba(250, 251, 252, 0.22); transform: translateY(-1px); }
.btn.danger { color: var(--danger); border-color: rgba(224,108,95,.45); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { padding: 4px 10px; min-height: 30px; font-size: 0.8rem; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* cards & panels */
.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.panel h2, .panel-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 700; margin-bottom: 12px; }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.card {
  display: block; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 14px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s, background 0.12s;
}
/* tiles float above the darker page */
.panel, .list-card, .dash-topcard, .dash-side, .stat-tile, .cal-card,
.opp-profile, .mm-groupbox, .hero, .rolecard {
  box-shadow: var(--shadow-card);
}
.card .card-title .grow { flex: 1; min-width: 0; }
.card.tint-t {
  background: radial-gradient(260px 140px at 100% 0%, rgba(224, 164, 88, 0.11), transparent 65%), var(--bg-panel);
  border-color: rgba(224, 164, 88, 0.22);
}
.card.tint-ct {
  background: radial-gradient(260px 140px at 100% 0%, rgba(95, 168, 232, 0.11), transparent 65%), var(--bg-panel);
  border-color: rgba(95, 168, 232, 0.22);
}
a.card.tint-t:hover {
  background: radial-gradient(260px 140px at 100% 0%, rgba(224, 164, 88, 0.16), transparent 65%), var(--bg-hover);
  border-color: rgba(224, 164, 88, 0.38);
}
a.card.tint-ct:hover {
  background: radial-gradient(260px 140px at 100% 0%, rgba(95, 168, 232, 0.16), transparent 65%), var(--bg-hover);
  border-color: rgba(95, 168, 232, 0.38);
}
.side-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 9px; border-radius: 7px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  color: #14202c; flex-shrink: 0;
}
.side-tag.t { background: var(--t-color); }
.side-tag.ct { background: var(--ct-color); }
a.card:hover, .card.clickable:hover {
  border-color: var(--border-strong); background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(5, 10, 16, 0.5), 0 4px 12px rgba(5, 10, 16, 0.32);
}
.card .card-title { font-weight: 650; font-size: 0.97rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .card-sub { color: var(--text-3); font-size: 0.82rem; }
.card .card-summary { color: var(--text-2); font-size: 0.86rem; margin-top: 7px; }

/* badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge.t { background: var(--t-bg); color: var(--t-color); border-color: rgba(224,164,88,.3); }
.badge.ct { background: var(--blue-bg); color: var(--ct-color); border-color: rgba(95,168,232,.3); }
.badge.neutral { background: var(--bg-hover); color: var(--text-2); border-color: var(--border); }
.badge.warn { background: var(--danger-bg); color: var(--danger); border-color: rgba(224,108,95,.3); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(87,185,126,.3); }
.badge.draft { background: var(--blue-bg); color: var(--blue); border-color: rgba(95,168,232,.3); }
.badge.archived { background: var(--bg-hover); color: var(--text-3); border-color: var(--border); text-decoration: line-through; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 5px; background: var(--bg-hover); color: var(--text-2); font-size: 0.74rem; margin: 2px 3px 2px 0; }

/* lists */
.rowlist { display: flex; flex-direction: column; }
.rowlist > * { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.rowlist > *:last-child { border-bottom: none; }
.row-item { display: flex; align-items: center; gap: 10px; }
.row-item .grow { flex: 1; min-width: 0; }
.muted { color: var(--text-3); }
.small { font-size: 0.83rem; }

/* filter bar */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filterbar select, .filterbar input { width: auto; min-width: 110px; padding: 7px 9px; font-size: 0.87rem; }
.filterbar input[type="search"] { min-width: 200px; flex: 1; max-width: 340px; }

/* toolbar chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  transition: background 0.1s, color 0.1s, transform 0.1s, border-color 0.1s;
  padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--border-strong); background: var(--bg-panel);
  font-size: 0.85rem; font-weight: 600; color: var(--text-2);
  min-height: 36px;
}
.chip:hover { color: var(--text); background: var(--bg-hover); transform: translateY(-1px); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip:disabled:hover { color: var(--text-2); background: var(--bg-panel); transform: none; }
.chip.active { background: var(--accent-bg); border-color: var(--accent-dim); color: var(--accent); }
.chip.active.ct { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }

/* strategy detail */
.detail-head { margin-bottom: 18px; }
.detail-head h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.callout {
  background: var(--t-bg); border: 1px solid rgba(224,164,88,.35);
  border-left-width: 3px;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  font-size: 1.02rem; font-weight: 600; color: #ecc389;
}
.callout.blue { background: var(--blue-bg); border-color: rgba(95,168,232,.4); color: #a9cdf0; }
.warnbox {
  background: var(--danger-bg); border: 1px solid rgba(224,108,95,.35);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.warnbox ul { margin-left: 18px; }
.warnbox li { color: #eba79a; font-size: 0.92rem; margin: 3px 0; }
.section { margin-bottom: 18px; }
.section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 8px; font-weight: 700; }
.steps { counter-reset: step; list-style: none; }
.steps li { counter-increment: step; display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-hover); border: 1px solid var(--border-strong);
  color: var(--accent); font-size: 0.78rem; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
.rolecard { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.rolecard .rc-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rolecard .rc-slot { font-size: 0.74rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rolecard .rc-role { color: var(--accent); font-weight: 650; font-size: 0.88rem; }
.rolecard .rc-name { font-weight: 650; }
.rolecard .rc-duty { color: var(--text-2); font-size: 0.87rem; margin-top: 5px; }
.rolecard .rc-util { color: var(--blue); font-size: 0.82rem; margin-top: 4px; }
.bullets { list-style: none; }
.bullets li { padding: 5px 0 5px 18px; position: relative; font-size: 0.93rem; color: var(--text-2); }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-dim); }
.bullets.blue li::before { background: var(--blue); }

/* tendency */
.tendency {
  position: relative;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.tendency.high {
  background: radial-gradient(260px 120px at 100% 0%, rgba(224, 108, 95, 0.13), transparent 65%), var(--bg-panel);
  border-color: rgba(224, 108, 95, 0.32);
}
.tendency .t-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; padding-right: 24px; }
.tendency .t-text { font-size: 0.92rem; }
.t-del {
  position: absolute; top: 7px; right: 9px;
  padding: 3px 7px; border-radius: 7px;
  color: var(--text-3); font-size: 0.78rem; line-height: 1;
}
.t-del:hover { color: var(--danger); background: var(--danger-bg); }

/* player profile cards */
.player-card { position: relative; text-align: center; padding: 16px 14px 13px; }
.player-card .pc-avatar { width: 38px; height: 38px; font-size: 0.74rem; margin: 0 auto 8px; }
.player-card .rc-name { font-size: 0.97rem; }
.player-card .pc-sub { color: var(--accent-dim); font-weight: 650; font-size: 0.85rem; margin: 2px 0 7px; }
.player-card .pc-sub .badge { margin-left: 6px; }
.pc-elo { font-size: 0.83rem; color: var(--text-2); margin-bottom: 1px; }
.pc-elo b { font-variant-numeric: tabular-nums; }
.pc-stats { font-size: 0.75rem; color: var(--text-3); margin-bottom: 7px; font-variant-numeric: tabular-nums; }

/* match mode v2 */
.mm-top2 {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.mm-top2.side-t { box-shadow: inset 0 3px 0 var(--t-color); }
.mm-top2.side-ct { box-shadow: inset 0 3px 0 var(--ct-color); }
.mm-mapdd { position: relative; display: inline-block; }
.mm-mapdd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 150px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg-panel); font-weight: 700;
  transition: background 0.1s, border-color 0.1s;
}
.mm-mapdd-btn:hover { background: var(--bg-hover); }
.mm-mapdd-btn .chev { margin-left: auto; color: var(--text-3); transition: transform 0.12s; }
.mm-mapdd-btn[aria-expanded="true"] { border-color: var(--accent-dim); }
.mm-mapdd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mm-mapdd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 100%; padding: 5px;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.mm-mapdd-item {
  display: flex; align-items: center; width: 100%;
  padding: 8px 12px; border-radius: 5px; text-align: left;
  color: var(--text-2); font-weight: 600; font-size: 0.93rem;
  white-space: nowrap;
}
.mm-mapdd-item:hover { background: var(--bg-hover); color: var(--text); }
.mm-mapdd-item.active { background: var(--accent-bg); color: var(--text); }
/* call count for the side you're on, so an empty map is obvious before you pick it */
.mm-mapdd-count {
  margin-left: auto; padding-left: 18px;
  color: var(--text-3); font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.mm-mapdd-item.no-calls { color: var(--text-3); }
/* strategy-source switch (Solo | Team), same pill language as the map picker */
.mm-left { display: flex; align-items: center; gap: 10px; }
.mm-modes {
  display: inline-flex;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-panel); overflow: hidden;
}
.mm-mode-btn {
  padding: 8px 16px; border: none; background: transparent;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-3);
  transition: background 0.1s, color 0.1s;
}
.mm-mode-btn + .mm-mode-btn { border-left: 1px solid var(--border-strong); }
.mm-mode-btn.active { background: var(--accent-bg); color: var(--accent); }
.mm-mode-btn:not(.active):hover { color: var(--text); background: var(--bg-hover); }
.mm-sides {
  display: flex; justify-self: center;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-panel); overflow: hidden;
}
.mm-side-btn {
  min-width: 170px; padding: 12px 30px;
  border: none; border-radius: 0;
  background: transparent;
  font-size: 1.12rem; font-weight: 800; letter-spacing: 0.09em;
  color: var(--text-3);
  transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}
.mm-side-btn + .mm-side-btn { border-left: 1px solid var(--border-strong); }
.mm-side-btn.ct.active {
  background: var(--blue-bg); color: var(--ct-color);
  box-shadow: inset 0 -3px 0 var(--ct-color);
}
.mm-side-btn.t.active {
  background: var(--t-bg); color: var(--t-color);
  box-shadow: inset 0 -3px 0 var(--t-color);
}
.mm-side-btn:not(.active):hover { color: var(--text); background: var(--bg-hover); }
.mm-top2 .mm-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.mm-top2 .mm-ctx { color: var(--text-2); font-size: 0.88rem; font-weight: 600; }
.mm-shell2 { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.mm-body2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 430px;
  gap: 10px; padding: 10px 12px;
  width: 100%; margin: 0 auto;
  align-items: stretch; flex: 1; min-height: 0;
}
.mm-main2 { min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-right: 2px; }
.mm-aside { display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; }
.mm-panel { padding: 12px 13px; border-radius: 8px; }
.mm-panel .tendency { border-radius: 6px; }
.mm-reminders {
  flex: 0 1 auto; max-height: 42%;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.mm-tendencies {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.mm-panel h2 { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.95rem; }
.mm-panel { padding: 14px 16px; }
.mm-panel .tendency { padding: 11px 13px; margin-bottom: 9px; }
.mm-panel .t-text { font-size: 1.02rem; line-height: 1.5; }
.mm-panel .t-meta .badge { font-size: 0.82rem; padding: 2px 10px; }
.mm-reminders .bullets li { font-size: 1.1rem; padding: 6px 0 6px 21px; }
.mm-reminders .bullets li::before { top: 15px; width: 8px; height: 8px; }
.mm-group-head {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-3); font-weight: 700; margin-bottom: 7px; padding-left: 2px;
  position: sticky; top: 0; background: var(--bg); z-index: 2; padding-bottom: 4px;
}
.mm-pin { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.mm-strats { display: grid; grid-template-columns: 0.8fr 1.48fr; gap: 8px; align-items: start; }
.mm-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-groupbox {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 10px 5px; background: var(--bg-raised); min-width: 0;
}
.mm-groupbox .mm-group-head { position: static; background: transparent; padding-bottom: 0; margin-bottom: 8px; }
.mm-groupbox .mm-row { background: var(--bg-panel); }
.mm-groupbox .mm-row.pinned {
  background: linear-gradient(180deg, rgba(250, 251, 252, 0.08), rgba(250, 251, 252, 0.03)), var(--bg-panel);
}
@media (max-width: 900px) { .mm-strats { grid-template-columns: 1fr; } }
.mm-row {
  display: block; width: 100%; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 11px 9px; margin-bottom: 5px;
  transition: border-color 0.1s, background 0.1s;
}
.mm-row:hover { border-color: var(--accent-dim); background: var(--bg-hover); }
.mm-row.pinned {
  border-color: var(--accent-dim);
  background: linear-gradient(180deg, rgba(250, 251, 252, 0.07), rgba(250, 251, 252, 0.03)), var(--bg-panel);
  box-shadow: 0 0 12px rgba(250, 251, 252, 0.06);
}
.mm-row.pinned:hover { background: var(--bg-hover); }
.mm-row .mr-name {
  display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.02rem;
  color: var(--text);
}
.mm-row .mr-site {
  font-size: 0.62rem; font-weight: 800; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px;
}
.mm-row .mr-call {
  display: block; color: var(--text-2); font-size: 0.88rem; font-weight: 500;
  line-height: 1.45; margin-top: 3px;
}

/* match mode — strat detail (centered reading column) */
.mm-detail { max-width: 920px; margin: 0 auto; padding: 4px 2px 32px; }
.mm-detail-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 20px;
}
.mm-detail-esc { color: var(--text-3); font-size: 0.9rem; }
.mm-detail-head {
  text-align: center; margin-bottom: 22px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.mm-detail-head::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 96px; height: 2px; border-radius: 2px;
}
.mm-detail.side-t .mm-detail-head::after { background: var(--t-color); }
.mm-detail.side-ct .mm-detail-head::after { background: var(--ct-color); }
.mm-detail-head h1 { font-size: 2.05rem; letter-spacing: -0.01em; justify-content: center; }
.mm-detail-head .detail-meta { justify-content: center; margin-top: 12px; }
.mm-detail-head .badge { font-size: 0.95rem; padding: 3px 12px; }
.mm-detail .callout {
  border-left-width: 1px; border-radius: 8px;
  text-align: center; font-size: 1.35rem; line-height: 1.5;
  padding: 20px 24px; margin-bottom: 12px;
}
.mm-detail .warnbox { border-radius: 8px; margin-bottom: 12px; padding: 16px 20px; }
.mm-detail .warnbox li { font-size: 1.15rem; margin: 5px 0; }
.mm-detail .section {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 17px 20px; margin-bottom: 12px;
}
.mm-detail .section h3 { margin-bottom: 11px; font-size: 1rem; }
.mm-detail .section > p { font-size: 1.22rem; }
.mm-detail .section .small { font-size: 1.15rem; }
.mm-detail .steps li { border-bottom-color: var(--border); font-size: 1.22rem; padding: 11px 0; gap: 14px; }
.mm-detail .steps li::before { width: 31px; height: 31px; font-size: 1rem; margin-top: 2px; }
.mm-detail .bullets li { font-size: 1.15rem; }
@media (max-width: 900px) {
  .mm-shell2 { height: auto; overflow: visible; }
  .mm-body2 { grid-template-columns: 1fr; }
  .mm-main2, .mm-aside { overflow-y: visible; }
  /* minmax(0,…) lets both columns shrink below their content width; without it
     the fixed-width side buttons overflow the row and sit on top of the map
     picker and the source switch in a narrow in-game window */
  .mm-top2 { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .mm-top2 .mm-right { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  .mm-left { flex-wrap: wrap; }
  .mm-mapdd-btn { min-width: 0; }
  .mm-sides { width: 100%; }
  .mm-side-btn { flex: 1; min-width: 0; padding: 10px 12px; font-size: 1rem; }
}

/* match mode */
.mm-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.mm-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background:
    radial-gradient(420px 120px at 8% 0%, rgba(224, 164, 88, 0.06), transparent 65%),
    radial-gradient(420px 120px at 92% 100%, rgba(95, 168, 232, 0.06), transparent 65%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 32px),
    var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
}
.mm-top .mm-title { font-weight: 700; }
.mm-top .mm-vs { color: var(--text-2); font-size: 0.9rem; }
.mm-exit { margin-left: auto; }
.mm-nav {
  display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap;
  background: var(--bg-raised); border-bottom: 1px solid var(--border);
  position: sticky; top: 49px; z-index: 9;
}
.mm-body { padding: 16px; max-width: 1100px; width: 100%; margin: 0 auto; flex: 1; }
.mm-side-t { box-shadow: inset 0 2px 0 var(--t-color); }
.mm-side-ct { box-shadow: inset 0 2px 0 var(--ct-color); }
.mm-strat-btn {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  width: 100%; gap: 2px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 15px; min-height: 60px;
  transition: border-color 0.12s, background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.mm-strat-btn.t {
  background: radial-gradient(260px 120px at 100% 0%, rgba(224, 164, 88, 0.11), transparent 65%), var(--bg-panel);
  border-color: rgba(224, 164, 88, 0.22);
}
.mm-strat-btn.ct {
  background: radial-gradient(260px 120px at 100% 0%, rgba(95, 168, 232, 0.11), transparent 65%), var(--bg-panel);
  border-color: rgba(95, 168, 232, 0.22);
}
.mm-strat-btn.t:hover {
  background: radial-gradient(260px 120px at 100% 0%, rgba(224, 164, 88, 0.16), transparent 65%), var(--bg-hover);
  border-color: rgba(224, 164, 88, 0.38);
}
.mm-strat-btn.ct:hover {
  background: radial-gradient(260px 120px at 100% 0%, rgba(95, 168, 232, 0.16), transparent 65%), var(--bg-hover);
  border-color: rgba(95, 168, 232, 0.38);
}
.mm-strat-btn:hover {
  border-color: var(--accent-dim); background: var(--bg-hover);
  transform: translateY(-2px);
}
.mm-strat-btn .n { font-weight: 650; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mm-strat-btn .s { color: var(--text-3); font-size: 0.8rem; }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--bg-raised); font-size: 0.75rem; font-family: ui-monospace, monospace; color: var(--text-2); }

/* checklist */
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: none; }
.check-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.check-item.done .ct-text { color: var(--text-3); text-decoration: line-through; }
.progressbar { height: 7px; background: var(--bg-hover); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.progressbar > div { height: 100%; background: var(--ok); border-radius: 99px; }

/* dashboard */
.kicker { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 700; }
.page-head.center { justify-content: center; text-align: center; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; align-items: start; }
@media (max-width: 1150px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-topcard {
  background:
    radial-gradient(560px 240px at 12% -10%, rgba(224, 164, 88, 0.08), transparent 62%),
    radial-gradient(560px 240px at 88% 110%, rgba(95, 168, 232, 0.08), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, #243646, #1e2c3c);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 24px 26px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px;
  margin-bottom: 22px; align-items: start;
}
@media (max-width: 900px) { .dash-topcard { grid-template-columns: 1fr; } }
.h-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.h-info { text-align: center; align-self: center; }
.h-info .h-maps, .h-info .h-actions { justify-content: center; }
.cal-embed { min-width: 0; }
.sec-head .head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sec-head .head-left .filter-chips { margin-bottom: 0; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chips .chip { padding: 5px 13px; min-height: 32px; font-size: 0.82rem; }
#strat-list { max-height: 428px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.lib-filters { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.lib-filters .filter-chips { justify-content: center; }
.chip-divider { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--border-strong); }
.map-tiles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.map-tile {
  position: relative; width: 104px; height: 66px;
  border-radius: 12px; border: 1px solid var(--border-strong);
  background-color: var(--bg-panel);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 6px; overflow: hidden;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.map-tile span {
  font-size: 0.78rem; font-weight: 700; color: var(--text-2);
  letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.map-tile:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.map-tile:hover span { color: var(--text); }
.map-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(250, 251, 252, 0.15);
}
.map-tile.active span { color: var(--text); }
/* the "+ Add map" tile is currently not rendered — kept so restoring the
   button is a one-line change in manage.js */
.map-tile.add { align-items: center; border-style: dashed; }
.map-tile.add span { color: var(--text-3); }
.map-tile.add:hover span { color: var(--text); }
.map-card {
  background-size: cover; background-position: center;
  min-height: 128px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.map-card .card-title { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.map-card .card-sub { color: var(--text-2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* right roster column */
.dash-side {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 22px 16px 14px;
}
.team-card { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.team-logo {
  position: relative;
  width: 78px; height: 78px; border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(180deg, #2e4152, #1e2c3c);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0.03em; color: var(--accent);
}
.team-logo::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 220deg, var(--t-color), var(--ct-color), var(--t-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  opacity: 0.75;
}
.team-card .tc-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.team-card .tc-org { color: var(--text-3); font-size: 0.82rem; margin-top: 1px; }
.dash-side .cal-head { padding: 0 4px; }
.dash-side .list-row { padding: 8px 6px; }
.hero {
  background: linear-gradient(180deg, #243646, #1e2c3c);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex; gap: 28px; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
}
.hero .h-opp, .h-info .h-opp, .mh-title {
  font-family: 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 1.5px; margin-top: 3px;
  background: linear-gradient(180deg, #ffffff, #dce3ea);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 7px; vertical-align: 1px;
  animation: mr-pulse 2.2s ease-in-out infinite;
}
@keyframes mr-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(87, 185, 126, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(87, 185, 126, 0); }
}
.hero .h-meta { color: var(--text-2); font-size: 0.92rem; margin-top: 2px; }
.hero .h-when { color: var(--text-3); font-size: 0.88rem; margin-top: 2px; }
.hero .h-when b { color: var(--text); font-weight: 650; }
.hero .h-maps { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.map-chip {
  padding: 3px 13px; border: 1px solid var(--border-strong); border-radius: 99px;
  font-size: 0.8rem; color: var(--text-2); background: var(--bg-raised); font-weight: 600;
}
.hero-side { min-width: 250px; max-width: 320px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.hero-note { font-size: 0.82rem; color: var(--text-3); margin-top: 10px; }
.hero-note b { color: var(--text-2); }

/* calendar */
.cal-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 16px 18px 14px;
  display: flex; flex-direction: column;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 0.92rem; font-weight: 650; }
.cal-nav { display: flex; gap: 5px; }
.cal-nav button {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: var(--text-2);
  font-size: 0.95rem; line-height: 1;
}
.cal-nav button:hover { color: var(--accent); border-color: var(--accent-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-dow { font-size: 0.66rem; color: var(--text-3); font-weight: 700; padding: 3px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.cal-day {
  height: 33px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 0.83rem; color: var(--text-2);
  font-variant-numeric: tabular-nums; width: 100%;
}
button.cal-day:hover { background: var(--bg-hover); }
.cal-day.out { color: var(--text-3); opacity: 0.38; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--accent-dim); color: var(--text); font-weight: 650; }
.cal-day.match { background: var(--accent); color: #14202c; font-weight: 700; box-shadow: 0 2px 12px rgba(250, 251, 252, 0.22); }
button.cal-day.match:hover { background: #ffffff; }
.cal-day.match.past { background: var(--bg-hover); color: var(--text-2); font-weight: 600; }
.cal-agenda { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.cal-agenda a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 0.85rem; }
.cal-agenda a:hover { background: var(--bg-hover); }
.cal-agenda .a-t { color: var(--text-3); font-size: 0.78rem; margin-left: auto; white-space: nowrap; }
.cal-date-chip {
  min-width: 52px; text-align: center; padding: 2px 9px; border-radius: 99px;
  background: var(--accent-bg); color: var(--accent);
  font-weight: 700; font-size: 0.73rem; white-space: nowrap;
}
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-tile { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px 12px; }
.stat-tile .v { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-tile .v .dim { color: var(--text-3); font-size: 1rem; font-weight: 600; }
.stat-tile .l { font-size: 0.78rem; color: var(--text-3); margin-top: 1px; }
.dash-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 1020px) { .dash-cols { grid-template-columns: 1fr; } }
.sec { margin-bottom: 26px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; padding: 0 2px; }
.sec-head h2 { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em; }
.sec-head .h-count { color: var(--text-3); font-weight: 600; font-size: 0.8rem; margin-left: 4px; }
.sec-head a { font-size: 0.8rem; color: var(--text-3); font-weight: 600; }
.sec-head a:hover { color: var(--accent); }
.list-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 5px 7px; }
.list-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px; font-size: 0.9rem;
  transition: background 0.1s, transform 0.1s;
}
a.list-row:hover { background: var(--bg-hover); transform: translateX(3px); }
.list-row + .list-row { position: relative; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .r-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .r-sub { color: var(--text-3); font-size: 0.8rem; }
.list-row .r-side { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-rail { width: 3px; height: 30px; border-radius: 2px; flex-shrink: 0; background: var(--border-strong); }
.side-rail.t { background: var(--t-color); }
.side-rail.ct { background: var(--ct-color); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-hover); border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.02em;
}
.cov-row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; }
a.cov-row:hover { background: var(--bg-hover); }
.cov-row .cv-map { font-weight: 600; font-size: 0.88rem; }
.cov-row.zero .cv-map { color: var(--text-3); font-weight: 500; }
.cov-bars { display: flex; flex-direction: column; gap: 3px; }
.cov-bar { height: 5px; border-radius: 3px; background: var(--t-color); }
.cov-bar.ct { background: var(--ct-color); }
.cov-bar.none { background: var(--bg-hover); }
.cov-n { font-size: 0.78rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* dashboard — wider canvas, larger scale, ambient background */
.main:has(.dash-page) {
  background:
    radial-gradient(1250px 640px at 50% -12%, rgba(250, 251, 252, 0.095), transparent 62%),
    radial-gradient(1700px 950px at 50% 32%, rgba(95, 168, 232, 0.055), transparent 66%),
    radial-gradient(1300px 800px at 50% 114%, rgba(224, 164, 88, 0.045), transparent 66%),
    linear-gradient(180deg, #1c2c3b 0%, #15212d 46%, var(--bg) 82%);
}
.main > #view:has(> .dash-page) { max-width: 1416px; }
.dash-page .page-head h1 { font-size: 1.75rem; }
.dash-page .page-head .sub { font-size: 1.05rem; margin-top: 3px; }
.dash-page .dash-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
.dash-page .dash-topcard { padding: 30px 34px; gap: 34px; }
.dash-page .kicker { font-size: 0.8rem; }
.dash-page .h-info .h-opp { font-size: 1.9rem; }
.dash-page .h-info .h-meta { font-size: 1.08rem; color: var(--text-2); margin-top: 3px; }
.dash-page .h-info .h-when { font-size: 1rem; color: var(--text-3); margin-top: 4px; }
.dash-page .h-info .h-when b { color: var(--text); font-weight: 650; }
.dash-page .h-info .h-maps { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.dash-page .map-chip { font-size: 0.95rem; padding: 5px 16px; }
.dash-page .hero-note { font-size: 0.95rem; margin-top: 12px; }
.dash-page .h-actions .btn { font-size: 1.02rem; padding: 10px 21px; min-height: 44px; }
.dash-page .sec-head h2 { font-size: 1.15rem; }
.dash-page .sec-head .h-count, .dash-page .sec-head a { font-size: 0.95rem; }
.dash-page .filter-chips .chip { font-size: 0.95rem; padding: 6px 16px; min-height: 37px; }
.dash-page .list-row { font-size: 1.05rem; padding: 11px 12px; }
.dash-page .list-row .r-sub, .dash-page .list-row .r-side { font-size: 0.92rem; }
.dash-page .avatar { width: 36px; height: 36px; font-size: 0.8rem; }
.dash-page .side-rail { height: 36px; }
/* reserve the scrollbar lane so switching map filters never shifts the layout */
.dash-page #strat-list { max-height: 520px; scrollbar-gutter: stable; }
/* rows flow into the tile on every filter switch (list is re-rendered each time) */
#strat-list > * { animation: fadeUp 0.32s ease backwards; }
#strat-list > *:nth-child(2) { animation-delay: 0.03s; }
#strat-list > *:nth-child(3) { animation-delay: 0.06s; }
#strat-list > *:nth-child(4) { animation-delay: 0.09s; }
#strat-list > *:nth-child(5) { animation-delay: 0.12s; }
#strat-list > *:nth-child(6) { animation-delay: 0.15s; }
#strat-list > *:nth-child(7) { animation-delay: 0.18s; }
#strat-list > *:nth-child(n+8) { animation-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) { #strat-list > * { animation: none; } }
.dash-page .dash-side {
  padding: 26px 20px 16px;
  background:
    radial-gradient(440px 250px at 50% -14%, rgba(250, 251, 252, 0.08), transparent 60%),
    linear-gradient(160deg, rgba(224, 164, 88, 0.055), transparent 42%),
    linear-gradient(340deg, rgba(95, 168, 232, 0.065), transparent 42%),
    linear-gradient(180deg, #243646, #1e2c3c);
  border-color: var(--border-strong);
}
.dash-page #strat-list, .dash-page .cov-row { background-size: cover; background-position: center; }

/* FACEIT level badges */
.fc-badge { display: block; flex-shrink: 0; }
.fc-side { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fc-side b { font-size: 0.88rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lu-right { display: inline-flex; align-items: center; gap: 8px; }
.fc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 5px; margin: 2px 4px 2px 0;
  border: 1px solid var(--border); border-radius: 99px;
  background: var(--bg-hover); color: var(--text-2);
  font-size: 0.8rem; font-weight: 600;
}
.fc-chip b { color: var(--text); font-variant-numeric: tabular-nums; }

/* themed dropdowns (auto-enhanced native selects) */
.dd { position: relative; min-width: 0; }
.dd.grow { flex: 1; }
.dd.dd-auto { width: fit-content; }
.dd > select { display: none !important; }
.dd-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-weight: 600; font-size: 0.92rem;
  transition: border-color 0.1s, background 0.1s;
}
.dd-btn:hover:not(:disabled) { background: var(--bg-hover); }
.dd-btn[aria-expanded="true"] { border-color: var(--accent-dim); }
.dd-btn:disabled { opacity: 0.55; cursor: default; }
.dd-btn .dd-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn .chev { color: var(--text-3); flex-shrink: 0; transition: transform 0.12s; }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 100%; max-height: 300px; overflow-y: auto; padding: 5px;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.dd-item {
  display: flex; align-items: center; width: 100%;
  padding: 7px 11px; border-radius: 5px; text-align: left;
  color: var(--text-2); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
}
/* `display: flex` above outranks the browser's own [hidden] { display: none },
   so without this a dropdown row marked hidden still paints, looking normal
   while doing nothing. */
.dd-item[hidden] { display: none; }
.dd-item:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.dd-item.active { background: var(--accent-bg); color: var(--text); }
.dd-item:disabled { opacity: 0.5; }

/* strategy library — faint map band at the top of the page, fading out downward */
/* contain: paint clips the (blurred, slightly scaled) band to the page area
   so it can't bleed over the sidebar */
.main.map-ambient { position: relative; z-index: 0; contain: paint; }
.main.map-ambient::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  /* band height tracks page width and the image scales with it, so the same
     slice of the map is visible at every window size */
  aspect-ratio: 16 / 7;
  background: var(--map-img) center top / 100% auto no-repeat;
  opacity: 0.26; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
  /* the pseudo is recreated on every map switch, so this eases each new map in */
  animation: mapFadeIn 1.1s ease;
}
@keyframes mapFadeIn { from { opacity: 0; } }

/* strat detail over a map image — one large tile wrapping everything, with
   fainter inner tiles per section keeping the text readable */
.main.map-ambient .strat-wrap {
  background: rgba(20, 31, 43, 0.52);
  border: 1px solid rgba(46, 65, 85, 0.5);
  border-radius: 16px;
  padding: 22px 26px 18px;
  box-shadow: var(--shadow-card);
}
.main.map-ambient .detail-head,
.main.map-ambient .section {
  background: rgba(24, 37, 51, 0.72);
  border: 1px solid rgba(46, 65, 85, 0.55);
  border-radius: 10px;
  padding: 14px 18px;
}
.main.map-ambient .section { margin-bottom: 14px; }
/* detail pages sit text directly on the image — soften it */
.main.map-ambient.map-blur::before { filter: blur(7px); transform: scale(1.03); }

/* strategy library — larger scale */
.lib-page .page-head h1 { font-size: 1.6rem; }
.lib-page .page-head .sub { font-size: 1rem; }
.lib-page .map-tile { width: 115px; height: 73px; }
.lib-page .map-tile span { font-size: 0.86rem; }
.lib-page .filter-chips .chip { font-size: 0.91rem; padding: 6px 15px; min-height: 35px; }
.lib-page .grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.lib-page .card { padding: 15px 16px; }
/* cards flow into the grid on each in-place filter switch */
#strat-grid > * { animation: fadeUp 0.32s ease backwards; }
#strat-grid > *:nth-child(2) { animation-delay: 0.03s; }
#strat-grid > *:nth-child(3) { animation-delay: 0.06s; }
#strat-grid > *:nth-child(4) { animation-delay: 0.09s; }
#strat-grid > *:nth-child(5) { animation-delay: 0.12s; }
#strat-grid > *:nth-child(6) { animation-delay: 0.15s; }
#strat-grid > *:nth-child(7) { animation-delay: 0.18s; }
#strat-grid > *:nth-child(n+8) { animation-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) { #strat-grid > * { animation: none; } }
.lib-page .card .card-title { font-size: 1.07rem; }
.lib-page .card .card-sub { font-size: 0.9rem; }
.lib-page .card .card-summary { font-size: 0.95rem; }

/* player lookup (scaled ~30% up from the base page sizes) */
.lookup-page .page-head h1 { font-size: 1.85rem; }
.lookup-page .page-head .sub { font-size: 1.15rem; margin-top: 4px; }
.lookup-bar { display: flex; gap: 12px; max-width: 700px; margin: 0 auto 26px; }
.lookup-bar input { font-size: 1.35rem; padding: 15px 20px; }
.lookup-bar .btn { font-size: 1.12rem; padding: 12px 27px; flex-shrink: 0; }
.lookup-bar .btn .shine-in { white-space: nowrap; }
#lookup-result { max-width: 1080px; margin: 0 auto; }
.lookup-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 32px;
  box-shadow: var(--shadow-card);
}
.lookup-head { display: flex; align-items: center; gap: 19px; flex-wrap: wrap; }
.lookup-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 1.75rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
}
.lookup-card .lookup-head .small { font-size: 1rem; }
.lookup-card .pp-elo { font-size: 2.35rem; }
.lookup-card .stat-tile { padding: 18px 23px 16px; }
.lookup-card .stat-tile .v { font-size: 2rem; }
.lookup-card .stat-tile .l { font-size: 1rem; margin-top: 2px; }
.lookup-card .rate-chip { font-size: 0.88rem; padding: 2px 13px; margin-top: 10px; }
/* stat bars: grow from 0 to the player's value, colored by rating */
.stat-bar {
  height: 7px; border-radius: 4px; background: var(--bg-hover);
  overflow: hidden; margin-top: 11px;
}
.stat-bar > span {
  display: block; height: 100%; border-radius: 4px;
  background: var(--accent-dim);
  animation: barGrow 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.15s backwards;
}
.stat-bar > span.good { background: var(--ok); }
.stat-bar > span.ok { background: #f0c04a; }
.stat-bar > span.bad { background: var(--danger); }
.lookup-card .stat-tile:nth-child(2) .stat-bar > span { animation-delay: 0.25s; }
.lookup-card .stat-tile:nth-child(3) .stat-bar > span { animation-delay: 0.35s; }
.lookup-card .stat-tile:nth-child(4) .stat-bar > span { animation-delay: 0.45s; }
@keyframes barGrow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .stat-bar > span { animation: none; } }
.lookup-card .sec-head h2 { font-size: 1.2rem; }
.lookup-card .sec-head .h-count { font-size: 1rem; }
.lookup-card .pp-match {
  grid-template-columns: 36px 166px 88px 1fr auto;
  gap: 16px; padding: 11px 13px; font-size: 1.2rem;
}
.lookup-card .pp-res { width: 31px; height: 31px; font-size: 1rem; border-radius: 8px; }
.lookup-card .pp-match .small { font-size: 1rem; }
.rate-chip {
  display: inline-block; margin-top: 7px; padding: 1px 10px;
  border-radius: 99px; border: 1px solid transparent;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.rate-chip.good { background: var(--ok-bg); color: var(--ok); border-color: rgba(87, 185, 126, 0.35); }
.rate-chip.ok { background: rgba(240, 192, 74, 0.13); color: #f0c04a; border-color: rgba(240, 192, 74, 0.35); }
.rate-chip.bad { background: var(--danger-bg); color: var(--danger); border-color: rgba(224, 108, 95, 0.35); }

/* collapsed match history: last rows blur as a preview, View More floats
   over them on a fade-to-dark wash (LaneLens matchup-history treatment) */
.lu-matches { position: relative; }
.lu-matches .lu-blur-soft { filter: blur(1.5px); opacity: 0.75; pointer-events: none; }
.lu-matches .lu-blur-hard { filter: blur(3px); opacity: 0.5; pointer-events: none; }
.lu-viewmore {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, transparent, rgba(16, 26, 36, 0.72));
}

/* player profile */
.pp-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr; } }
.pp-elo-row { display: flex; align-items: center; gap: 15px; }
.pp-elo { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pp-match {
  display: grid; grid-template-columns: 28px 128px 68px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 0.92rem; font-variant-numeric: tabular-nums;
}
.pp-match:last-child { border-bottom: none; }
.pp-res {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 800;
}
.pp-res.w { background: var(--ok-bg); color: var(--ok); }
.pp-res.l { background: var(--danger-bg); color: var(--danger); }
.pp-map { font-weight: 600; white-space: nowrap; }
.pp-score { color: var(--text-2); }
.pp-kda { color: var(--text-2); }
.pp-when { text-align: right; white-space: nowrap; }
@media (max-width: 700px) { .pp-match { grid-template-columns: 28px 1fr auto; } .pp-score, .pp-when { display: none; } }
a.lu-row { border-radius: 8px; }
a.lu-row:hover { background: var(--bg-hover); }

/* opponent players — compact expandable rows */
.pl-item { border-bottom: 1px solid var(--border); }
.pl-item:last-child { border-bottom: none; }
.pl-item > summary { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; list-style: none; }
.pl-item > summary::-webkit-details-marker { display: none; }
.pl-item > summary:hover { background: var(--bg-hover); }
.pl-item > summary .grow { flex: 1; min-width: 0; }
.pl-item .r-name { font-weight: 600; }
.pl-item .r-sub { color: var(--text-3); font-size: 0.8rem; }
.pl-item .pl-chev { color: var(--text-3); flex-shrink: 0; transition: transform 0.12s; }
.pl-item[open] > summary .pl-chev { transform: rotate(180deg); }
.pl-item .pl-body { padding: 2px 12px 12px 51px; }
.pl-item .pl-body .rc-duty { margin-top: 4px; }

/* opponent FACEIT intel */
.fi-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fi-form { display: inline-flex; gap: 4px; }
.fi-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fi-dot.w { background: var(--ok); }
.fi-dot.l { background: var(--danger); }
.fi-maps { display: flex; flex-direction: column; gap: 7px; }
.fi-map { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: center; }
.fi-map .fi-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.fi-map .fi-bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.fi-map .fi-bar > span { display: block; height: 100%; background: var(--accent-dim); border-radius: 3px; }
.fi-map .fi-n { font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-page .team-logo { width: 94px; height: 94px; font-size: 1.8rem; }
.dash-page .team-card .tc-name { font-size: 1.25rem; }
.dash-page .team-card .tc-org { font-size: 0.95rem; }
.dash-page .cal-head b { font-size: 1.05rem; }
.dash-page .cal-dow { font-size: 0.76rem; }
.dash-page .cal-day { height: 40px; font-size: 0.98rem; }
.dash-page .cal-agenda a { font-size: 0.98rem; }
.dash-page .cal-date-chip { font-size: 0.85rem; }
.dash-page .cov-row { grid-template-columns: 94px 1fr auto; padding: 10px 12px; }
.dash-page .cov-row .cv-map { font-size: 1rem; }
.dash-page .cov-bar { height: 6px; }
.dash-page .cov-n { font-size: 0.92rem; }

/* matches list */
.match-list {
  background:
    radial-gradient(560px 200px at 8% -20%, rgba(224, 164, 88, 0.05), transparent 62%),
    radial-gradient(560px 200px at 92% 120%, rgba(95, 168, 232, 0.05), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 32px),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 8px;
}
.match-row { padding: 13px 12px; border-radius: 12px; gap: 13px; }
.match-row .cal-date-chip { min-width: 56px; }
.match-row .r-name { font-size: 0.97rem; }
.match-row.next {
  background: rgba(250, 251, 252, 0.045);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
a.match-row.next:hover { background: var(--bg-hover); }
.mr-maps { display: flex; align-items: center; flex-shrink: 0; }
.mr-until { color: var(--ok); font-weight: 600; }
@media (max-width: 700px) { .match-row .mr-maps { display: none; } }

/* match result + lineups + scoreboard */
.result-strip {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 15px 18px; border-radius: 14px; margin-bottom: 16px;
  border: 1px solid var(--border-strong); flex-wrap: wrap;
}
.lu-avatar {
  width: 22px; height: 22px; font-size: 0.52rem;
  display: inline-grid; vertical-align: middle; margin-right: 8px;
}
.result-strip.win { background: var(--ok-bg); border-color: rgba(87, 185, 126, 0.35); }
.result-strip.loss { background: var(--danger-bg); border-color: rgba(224, 108, 95, 0.35); }
.result-strip .rs-letter { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.result-strip.win .rs-letter { color: var(--ok); }
.result-strip.loss .rs-letter { color: var(--danger); }
.result-strip .rs-score { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lineup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 700px) { .lineup-cols { grid-template-columns: 1fr; } }
.lu-head { font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; }
.lu-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.87rem; }
.lu-row:last-of-type { border-bottom: none; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.sb-table th {
  text-align: right; color: var(--text-3); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  padding: 5px 7px; border-bottom: 1px solid var(--border-strong);
}
.sb-table td { text-align: right; padding: 6px 7px; border-bottom: 1px solid var(--border); }
.sb-table th:first-child, .sb-table td:first-child { text-align: left; }
.sb-table td:first-child { font-weight: 600; }
.sb-table tr:last-child td { border-bottom: none; }

/* opponent rows */
.opp-row { padding: 13px 12px; border-radius: 12px; gap: 14px; }
/* matches + opponents combined tab */
.mo-cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .mo-cols { grid-template-columns: 1fr; } }

/* matches tab — larger scale */
.mo-page .page-head h1 { font-size: 1.7rem; }
.mo-page .page-head .sub { font-size: 1.05rem; margin-top: 3px; }
.mo-page .head-actions .btn { font-size: 1.02rem; padding: 10px 21px; min-height: 44px; }
.mo-page .sec-head h2 { font-size: 1.15rem; }
.mo-page .sec-head .h-count { font-size: 0.95rem; }
.mo-page .list-row { font-size: 1.08rem; padding: 11px 12px; gap: 13px; }
.mo-page .list-row .r-sub, .mo-page .list-row .r-side { font-size: 0.95rem; }
.mo-page .avatar { width: 37px; height: 37px; font-size: 0.8rem; }
.mo-page .opp-row .or-logo { width: 48px; height: 48px; font-size: 0.85rem; }
.mo-page .cal-date-chip { min-width: 62px; font-size: 0.87rem; padding: 3px 11px; }
.mo-page .badge { font-size: 0.86rem; padding: 2px 10px; }
.mo-page .mr-until { font-size: 0.95rem; }

/* page-entry flow — staggered fade-up on every route render (LaneLens style) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
#view > :where(:not(.dash-page):not(.lib-page):not(.mo-page):not(.strat-wrap):not(.lookup-page)),
.dash-page > *, .lib-page > *, .mo-page > *, .strat-wrap > *, .lookup-page > * {
  animation: fadeUp 0.4s ease backwards;
}
#view > *:nth-child(2), .dash-page > *:nth-child(2), .lib-page > *:nth-child(2), .mo-page > *:nth-child(2), .strat-wrap > *:nth-child(2), .lookup-page > *:nth-child(2) { animation-delay: 0.06s; }
#view > *:nth-child(3), .dash-page > *:nth-child(3), .lib-page > *:nth-child(3), .mo-page > *:nth-child(3), .strat-wrap > *:nth-child(3), .lookup-page > *:nth-child(3) { animation-delay: 0.12s; }
#view > *:nth-child(4), .dash-page > *:nth-child(4), .lib-page > *:nth-child(4), .mo-page > *:nth-child(4), .strat-wrap > *:nth-child(4), .lookup-page > *:nth-child(4) { animation-delay: 0.18s; }
#view > *:nth-child(5), .dash-page > *:nth-child(5), .lib-page > *:nth-child(5), .mo-page > *:nth-child(5), .strat-wrap > *:nth-child(5), .lookup-page > *:nth-child(5) { animation-delay: 0.24s; }
#view > *:nth-child(6), .dash-page > *:nth-child(6), .lib-page > *:nth-child(6), .mo-page > *:nth-child(6), .strat-wrap > *:nth-child(6), .lookup-page > *:nth-child(6) { animation-delay: 0.3s; }
#view > *:nth-child(7), .dash-page > *:nth-child(7), .lib-page > *:nth-child(7), .mo-page > *:nth-child(7), .strat-wrap > *:nth-child(7), .lookup-page > *:nth-child(7) { animation-delay: 0.36s; }
#view > *:nth-child(8), .dash-page > *:nth-child(8), .lib-page > *:nth-child(8), .mo-page > *:nth-child(8), .strat-wrap > *:nth-child(8), .lookup-page > *:nth-child(8) { animation-delay: 0.42s; }
/* the lookup result card arrives after the fetch — flow it in too */
#lookup-result > * { animation: fadeUp 0.45s ease backwards; }
@media (prefers-reduced-motion: reduce) {
  #view > *, .dash-page > *, .lib-page > *, .mo-page > *, .strat-wrap > *, .lookup-page > *, #lookup-result > * { animation: none; }
}

.opp-row .or-logo { width: 40px; height: 40px; font-size: 0.72rem; margin: 0; flex-shrink: 0; }
.opp-row .or-logo::before { inset: -3px; }
.opp-row .r-name { font-size: 0.99rem; font-weight: 650; }
.opp-row .or-style {
  max-width: 560px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* opponent detail */
.opp-profile {
  background:
    radial-gradient(560px 220px at 10% -10%, rgba(224, 164, 88, 0.07), transparent 62%),
    radial-gradient(560px 220px at 90% 110%, rgba(95, 168, 232, 0.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, #243646, #1e2c3c);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 22px 24px 12px;
  margin-bottom: 24px;
}
.opp-profile textarea { min-height: 0; }
.opp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .opp-cols { grid-template-columns: 1fr; } }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .form-2col { grid-template-columns: 1fr; } }
.add-drawer { margin-top: 12px; }
.add-drawer > summary { list-style: none; display: inline-flex; cursor: pointer; }
.add-drawer > summary::-webkit-details-marker { display: none; }
.rc-avatar {
  width: 24px; height: 24px; font-size: 0.58rem;
  display: inline-grid; vertical-align: middle; margin-right: 7px;
}

/* toast */
#toast-root { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 16px; font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.toast.err { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: rgba(87,185,126,.5); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,8,10,.72);
  display: grid; place-items: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 20px; width: 100%; max-width: 460px;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 16px; }
.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .panel {
  padding: 26px; border-radius: 20px; border-color: var(--border-strong);
  background:
    radial-gradient(320px 140px at 15% -10%, rgba(224, 164, 88, 0.06), transparent 62%),
    radial-gradient(320px 140px at 85% 110%, rgba(95, 168, 232, 0.06), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 32px),
    var(--bg-panel);
}
/* Nudged left so the wordmark reads as centred: the icon sits inside the same
   centred row, which pushes "MidRound" right of the page's true centre. Shifts
   the whole lockup, since moving the text alone would run it into the icon. */
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; transform: translateX(-20px); }
.auth-logo .wm-name { font-size: 1.35rem; font-weight: 700; }
.auth-tagline { text-align: center; color: var(--text-3); font-size: 0.86rem; margin-bottom: 22px; }
.auth-err { background: var(--danger-bg); border: 1px solid rgba(224,108,95,.4); color: var(--danger); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.87rem; margin-bottom: 12px; }
.demo-box { margin-top: 16px; padding: 12px 14px; background: var(--bg-raised); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-2); }
.demo-box code { color: var(--accent); font-family: ui-monospace, monospace; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 0.86rem; color: var(--text-3); }
.auth-switch a { color: var(--accent); }

/* editor */
.editor-section { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--bg-panel); }
.editor-section > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-weight: 650; font-size: 0.92rem; display: flex; align-items: center; gap: 8px;
}
.editor-section > summary::-webkit-details-marker { display: none; }
.editor-section > summary::before { content: "▸"; color: var(--text-3); transition: transform .1s; }
.editor-section[open] > summary::before { transform: rotate(90deg); }
.editor-section .es-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.savebar {
  position: sticky; bottom: 0; margin-top: 16px;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; z-index: 5;
}
.save-status { font-size: 0.83rem; color: var(--text-3); }
.save-status.saved { color: var(--ok); }
.rolerow { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; margin-bottom: 8px; align-items: start; }
.rolerow-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }

/* search overlay */
.search-results { margin-top: 14px; }
.search-group { margin-bottom: 18px; }

/* empty state */
.empty {
  text-align: center; padding: 38px 20px; color: var(--text-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  /* as the only child of a card grid, span every column so it centers on the
     page instead of sitting in the first column */
  grid-column: 1 / -1;
}
.empty b { display: block; color: var(--text-2); margin-bottom: 4px; font-size: 1rem; }

/* mobile / small windows (Steam browser) */
.menu-toggle { display: none; margin-right: auto; }
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%);
    transition: transform .15s; width: 250px; height: 100vh;
  }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .main { padding: 0 0 60px; }
  .main > #view { padding: 14px 14px 0; }
  .topbar { padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
  .tb-brand { display: none; }
  .matchmode-btn { flex-shrink: 0; }
  .matchmode-btn > span { white-space: nowrap; }
  .global-search { order: 9; flex: 1 1 100%; }
  .global-search input, .global-search input:focus { width: 100%; }
  .menu-toggle { display: inline-flex; }
  .global-search input { width: 160px; }
  .global-search input:focus { width: 200px; }
  .mm-nav { top: auto; position: static; }
  .mm-top { position: static; }
}