/* ============================================================================
   MA3 Admin Panel -- Field Command theme
   Design language: massiveassault3.com / Tournament HQ
   - Green #99ff7b for links / interactive / success
   - Amber #ffd055 for accents / CTA / active state
   - Roboto + Roboto Condensed, vendored locally (latin + cyrillic)
   - Dark teal surfaces (#151d22)

   Loaded AFTER style.css. Source order lets these rules win for the shell,
   shared primitives, and the Players page; page-specific modules not yet
   migrated keep their existing styling until rollout.
   ============================================================================ */

/* --- Webfonts: Roboto + Roboto Condensed (vendored woff2) ----------------- */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/roboto-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/roboto-latin-500.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/roboto-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/roboto-cyrillic-400.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/roboto-cyrillic-500.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/roboto-cyrillic-700.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/roboto-condensed-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/roboto-condensed-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/roboto-condensed-cyrillic-400.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/roboto-condensed-cyrillic-700.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:            #151d22;
  --bg-deep:       #0a1114;
  --bg-panel:      rgba(255, 255, 255, 0.035);
  --bg-panel-2:    rgba(255, 255, 255, 0.06);
  --bg-soft-amber: rgba(255, 184, 0, 0.10);
  --bg-amber-strong: rgba(255, 184, 0, 0.22);
  --bg-soft-green: rgba(154, 255, 123, 0.10);

  /* Text */
  --text:       #dcf8ff;
  --text-warm:  #fffbed;
  --text-muted: #a2b2b8;
  --text-dim:   #7f939d;
  --text-faint: rgba(220, 248, 255, 0.35);

  /* Borders */
  --line:        rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-amber:  rgba(255, 184, 0, 0.45);
  --line-green:  rgba(154, 255, 123, 0.40);

  /* Brand */
  --accent:     #ffd055;
  --accent-hot: #ffb800;
  --link:       #99ff7b;
  --link-soft:  #d3ffc6;

  /* Semantic */
  --win:       #99ff7b;
  --win-soft:  rgba(154, 255, 123, 0.12);
  --loss:      #ff8080;
  --loss-soft: rgba(255, 128, 128, 0.12);
  --draw:      #e8dba0;
  --info:      #b8e8ff;
  --info-soft: rgba(184, 232, 255, 0.12);
  --role-dev:  #c9b3ff;
  --role-dev-soft: rgba(201, 179, 255, 0.12);

  /* Type */
  --f-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono:    ui-monospace, "SFMono-Regular", Consolas, Monaco, monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 20px 60px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;

  --sidebar-w: 220px;
}

/* --- Base ----------------------------------------------------------------- */
html, body {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Subtle hex texture, blends into the background */
  background-image:
    radial-gradient(1100px 480px at 20% -160px, rgba(255, 184, 0, 0.045), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%23dcf8ff' stroke-opacity='0.022' stroke-width='1'><polygon points='28,1 55,16 55,48 28,63 1,48 1,16'/></g></svg>");
  background-attachment: fixed, fixed;
}

* { scrollbar-width: thin; scrollbar-color: rgba(255, 184, 0, 0.3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 184, 0, 0.3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 184, 0, 0.5); background-clip: padding-box; }

a { color: var(--link); transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--link-soft); }
::selection { background: rgba(255, 208, 85, 0.45); color: var(--bg-deep); }

/* --- Sidebar shell -------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, rgba(10, 17, 20, 0.85), rgba(10, 17, 20, 0.35));
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.sidebar-brand-logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)); }
.sidebar-brand-tag {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding: 3px 9px;
  border: 1px solid var(--line-amber);
  border-radius: var(--r-pill);
  background: var(--bg-soft-amber);
}

.nav-links { padding: 12px 0; }
.nav-links li a {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-left: 3px solid transparent;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav-links li a:hover { background: var(--bg-soft-green); color: var(--text-warm); }
.nav-links li a.active {
  background: var(--bg-soft-amber);
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 18px;       /* override style.css 13px; border now carries the indent */
}

.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--line); }
.sidebar-user { color: var(--text-dim); font-size: 13px; }
.sidebar-logout {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 0;
}
.sidebar-logout:hover { background: var(--loss-soft); border-color: rgba(255, 128, 128, 0.45); color: var(--loss); }

/* --- Content -------------------------------------------------------------- */
.content { background: transparent; padding: 28px clamp(20px, 3vw, 40px) 56px; }

/* --- Page header ---------------------------------------------------------- */
.page-header { margin-bottom: 22px; }
.page-header h1 {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* --- Filters bar ---------------------------------------------------------- */
.filters {
  gap: 16px 24px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 22px;
}
.filter-label {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.filter-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 14px;
  padding: 8px 12px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.filter-input::placeholder { color: var(--text-dim); }
.filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-soft-amber); }

.radio-group { gap: 6px; flex-wrap: wrap; }
.radio-label {
  position: relative;
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.2);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.radio-label:hover { color: var(--text); border-color: var(--line-amber); }
/* The native dot is hidden; the pill itself shows selection. */
.radio-label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.radio-label:has(input[type="radio"]:checked) {
  color: var(--accent);
  border-color: var(--line-amber);
  background: var(--bg-soft-amber);
}
.radio-label:has(input[type="radio"]:focus-visible) { box-shadow: 0 0 0 3px var(--bg-soft-amber); }

/* --- Data table ----------------------------------------------------------- */
.data-table { font-family: var(--f-body); font-size: 14px; }
.data-table thead th {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.data-table thead th.sortable:hover { color: var(--text-warm); background: var(--bg-soft-amber); }
.data-table thead th.sorted-asc,
.data-table thead th.sorted-desc { color: var(--accent); }
.data-table tbody tr { border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease-out); }
.data-table tbody tr:hover { background: var(--bg-soft-amber); }
.data-table td { padding: 11px 14px; color: var(--text); }

/* Players columns */
.col-id { color: var(--text-dim); font-family: var(--f-mono); font-weight: 500; }
td.col-id .action-icon { color: var(--text-faint); }
td.col-id .action-icon:hover { color: var(--accent); }
.col-email { color: var(--text-muted); font-size: 13px; }
.player-email { color: var(--text); }
.player-name { color: var(--text-warm); font-weight: 500; }
.col-datetime { color: var(--text-dim); font-family: var(--f-mono); font-size: 12px; }
.col-counts { text-align: right; }
.count-total { color: var(--text); font-family: var(--f-mono); }
.count-separator { color: var(--text-faint); }
.count-active { color: var(--link); font-family: var(--f-mono); }

/* Online status dot */
.online-dot { width: 9px; height: 9px; }
.online-dot.online { background: var(--win); box-shadow: 0 0 6px var(--win); }
.online-dot.offline { background: rgba(255, 255, 255, 0.12); }

/* --- Account type badges (semantic, branded pills) ------------------------ */
.account-type-badge {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
}
.account-type-human   { color: var(--win);      border-color: var(--line-green);             background: var(--win-soft); }
.account-type-ai      { color: var(--info);      border-color: rgba(184, 232, 255, 0.4);      background: var(--info-soft); }
.account-type-support { color: var(--accent);    border-color: var(--line-amber);             background: var(--bg-soft-amber); }
.account-type-dev     { color: var(--role-dev);  border-color: rgba(201, 179, 255, 0.4);      background: var(--role-dev-soft); }
.account-type-admin   { color: var(--loss);      border-color: rgba(255, 128, 128, 0.5);      background: var(--loss-soft); }
.account-type-unknown { color: var(--text-dim);  border-color: var(--line-strong);            background: rgba(0, 0, 0, 0.25); }

/* --- Action icons --------------------------------------------------------- */
.action-icon {
  color: var(--text-faint);
  border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.action-icon:hover { color: var(--accent); background: var(--bg-soft-amber); }
.action-icon-active { color: var(--accent); background: var(--bg-soft-amber); }
.action-icon-danger { color: rgba(255, 128, 128, 0.5); }
.action-icon-danger:hover { color: var(--loss); background: var(--loss-soft); }

/* --- Popovers: account-type dropdown + identities ------------------------- */
.type-dropdown {
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  padding: 5px;
}
.type-option { border-radius: var(--r-xs); color: var(--text); font-family: var(--f-body); font-size: 13px; padding: 7px 12px; }
.type-option:hover { background: var(--bg-soft-amber); color: var(--accent); }
.type-option-current { color: var(--accent); font-weight: 700; }

.identities-list { gap: 4px; }
.identity-platform {
  border-radius: var(--r-xs);
  background: var(--info-soft);
  border: 1px solid rgba(184, 232, 255, 0.35);
  color: var(--info);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.identity-id { color: var(--text-muted); font-family: var(--f-mono); }
.identity-empty { color: var(--text-dim); }

/* --- Delete confirm row --------------------------------------------------- */
.row-confirm-delete td { background: var(--loss-soft); border-top: 1px solid rgba(255, 128, 128, 0.4); border-bottom: 1px solid rgba(255, 128, 128, 0.4); }
.confirm-delete-text { color: var(--text); font-size: 14px; }
.confirm-delete-text strong { color: var(--loss); }
.btn-confirm-delete {
  background: var(--loss-soft);
  border: 1px solid rgba(255, 128, 128, 0.5);
  border-radius: var(--r-sm);
  color: var(--loss);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
}
.btn-confirm-delete:hover { background: rgba(255, 128, 128, 0.22); border-color: var(--loss); color: #fff; }
.btn-cancel-delete {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-weight: 600;
  padding: 6px 14px;
}
.btn-cancel-delete:hover { background: var(--bg-panel-2); color: var(--text); }

/* --- Pagination ----------------------------------------------------------- */
.pagination { padding: 20px 0 4px; }
.pagination-info { color: var(--text-dim); font-family: var(--f-mono); font-size: 12px; }
.page-btn {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-weight: 600;
  min-width: 34px;
  padding: 6px 10px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.page-btn:hover:not(:disabled) { background: var(--bg-soft-amber); border-color: var(--line-amber); color: var(--text-warm); }
.page-btn.active { background: var(--bg-amber-strong); border-color: var(--accent); color: var(--accent); }
.page-ellipsis { color: var(--text-dim); }

/* --- Empty state ---------------------------------------------------------- */
.no-results {
  padding: 56px 0;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* --- Floating error panel (feedback) -------------------------------------- */
.error-panel {
  background: var(--bg-deep);
  border: 1px solid rgba(255, 128, 128, 0.5);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.error-panel-header {
  background: var(--loss-soft);
  border-bottom: 1px solid rgba(255, 128, 128, 0.4);
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: var(--loss);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.error-panel-close { color: var(--loss); }
.error-panel-close:hover { color: #fff; }
.error-panel-body { color: var(--text-muted); font-family: var(--f-mono); }

/* --- htmx top loading bar ------------------------------------------------- */
.nprogress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
body.is-loading .nprogress { opacity: 1; }
.nprogress__bar { height: 100%; width: 35%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: nprogress-slide 1.1s var(--ease-out) infinite; }
@keyframes nprogress-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* --- Login page ----------------------------------------------------------- */
.login-body { background: var(--bg); }
.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 36px 30px;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.login-brand img { height: 40px; width: auto; }
.login-header {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.login-error { background: var(--loss-soft); border: 1px solid rgba(255, 128, 128, 0.45); border-left-width: 3px; border-radius: var(--r-sm); color: var(--loss); }
.login-notice { background: var(--info-soft); border: 1px solid rgba(184, 232, 255, 0.4); border-left: 3px solid var(--info); border-radius: var(--r-sm); color: var(--info); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.login-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.login-alt form { margin: 0; }
.login-linkbtn { background: none; border: none; padding: 0; color: var(--link); font-family: var(--f-body); font-size: 13px; cursor: pointer; text-decoration: none; }
.login-linkbtn:hover { color: var(--link-soft); text-decoration: underline; }
.login-field label { font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-dim); }
.login-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--f-body);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-soft-amber); }
/* One-time code: a single big, centred, wide-spaced field so the six digits
   read like a code rather than cramped text. text-indent offsets the trailing
   letter-spacing gap so the value stays optically centred. */
.login-otp-input {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  padding: 14px 10px;
  caret-color: var(--accent);
}
.login-otp-input::placeholder { letter-spacing: 0.35em; font-size: 20px; color: var(--text-faint); opacity: 1; }
.login-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  color: var(--bg-deep);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.login-btn:hover { background: var(--accent-hot); border: none; }
.login-btn:active { transform: translateY(1px); }

/* ==========================================================================
   ROLLOUT -- remaining pages mapped onto brand tokens.
   These override the legacy purple modules in style.css via source order.
   ========================================================================== */

/* --- Shared: form controls across all pages ------------------------------- */
.field-row input, .field-row textarea, .field-row select,
.roster-add input[type="text"], .roster-bulk textarea,
.manual-match input, .round-scores input[type="number"],
.round-add-form input, .round-add-form select,
.filters-row input[type="text"],
.bulk-email-textarea,
.create-arena-map-select, .player-search-input,
.cg-tags-input, .cg-search-input,
.cg-paste-panel textarea {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--f-body);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field-row input:focus, .field-row textarea:focus, .field-row select:focus,
.roster-add input[type="text"]:focus, .roster-bulk textarea:focus,
.manual-match input:focus, .round-scores input[type="number"]:focus,
.round-add-form input:focus, .round-add-form select:focus,
.filters-row input[type="text"]:focus,
.bulk-email-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-soft-amber);
  outline: none;
}

/* --- Shared: panel surfaces ----------------------------------------------- */
.filters-row, .round-add-form, .create-arena-fields, .create-arena-preview,
.bulk-create-fields {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* --- Shared: field / section labels --------------------------------------- */
.filters-row label, .field-row label, .round-add-form label,
.filters-row fieldset.radio-group legend {
  color: var(--text-dim);
  font-family: var(--f-display);
  letter-spacing: 0.12em;
}

/* --- Shared: section headings --------------------------------------------- */
.tournament-header h1, .round-header h3, .round-scores h4, .manual-match h4,
.proposed-pairings h4, .roster-add h3, .roster-bulk h3, .roster-candidates h3,
.roster-participants h3, .create-arena-preview h3, .bulk-create-result h2,
.bulk-create-error h2, .cg-section-title {
  font-family: var(--f-display);
  color: var(--text);
  letter-spacing: 0.01em;
}

/* --- Shared: buttons ------------------------------------------------------ */
.button,
#tab-content button, .tournament-header button, .round-chips button,
.search-result button, .roster-candidates button,
.cg-btn, .cg-icon-btn,
.create-arena-submit, .bulk-create-submit {
  background: var(--bg-soft-amber);
  border: 1px solid var(--line-amber);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.button:hover,
#tab-content button:hover, .tournament-header button:hover, .round-chips button:hover,
.search-result button:hover, .roster-candidates button:hover,
.cg-btn:hover, .cg-icon-btn:hover,
.create-arena-submit:hover, .bulk-create-submit:hover {
  background: rgba(255, 208, 85, 0.18);
  border-color: var(--accent);
  color: var(--text-warm);
}
/* Primary / "go" actions -> green */
.primary, .button.primary, .cg-btn-primary {
  background: var(--bg-soft-green);
  border: 1px solid var(--line-green);
  color: var(--link-soft);
}
.primary:hover, .button.primary:hover, .cg-btn-primary:hover {
  background: rgba(154, 255, 123, 0.18);
  color: #fff;
}
/* Destructive actions -> red */
.cg-btn-danger {
  background: var(--loss-soft);
  border: 1px solid rgba(255, 128, 128, 0.5);
  color: var(--loss);
}
.cg-btn-danger:hover { background: rgba(255, 128, 128, 0.22); color: #fff; }
.create-arena-submit:disabled, .create-arena-submit:disabled:hover {
  background: rgba(0, 0, 0, 0.25); border-color: var(--line); color: var(--text-dim);
}

/* --- Badges: generic + tournament status / candidate ---------------------- */
.badge, .game-type-badge, .game-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
}
.status-completed, .cand-accepted, .game-type-local, .game-status-completed { color: var(--win); border-color: var(--line-green); background: var(--win-soft); }
.status-registration, .status-in_progress, .cand-invited, .game-type-network, .game-status-in_progress { color: var(--info); border-color: rgba(184, 232, 255, 0.4); background: var(--info-soft); }
.status-draft, .status-challenge, .cand-applied, .game-type-tutorial, .game-status-challenge { color: var(--accent); border-color: var(--line-amber); background: var(--bg-soft-amber); }
.status-cancelled, .status-expired, .status-deleted, .cand-rejected { color: var(--loss); border-color: rgba(255, 128, 128, 0.5); background: var(--loss-soft); }
.status-scheduled, .cand-declined { color: var(--role-dev); border-color: rgba(201, 179, 255, 0.4); background: var(--role-dev-soft); }
.badge-email-failed { color: var(--accent); border-color: var(--line-amber); background: var(--bg-soft-amber); border-radius: var(--r-pill); }

/* --- Games page: tags, opponents, timestamps ------------------------------ */
.game-tag {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-family: var(--f-mono);
}
.game-tag:hover { border-color: var(--line-amber); color: var(--text); }
.game-tag-active { background: var(--bg-soft-amber); border-color: var(--accent); color: var(--accent); }
.col-map { color: var(--link); font-family: var(--f-mono); }
.col-uuid { color: var(--text-dim); font-family: var(--f-mono); }
.col-turns { color: var(--text-muted); font-family: var(--f-mono); }
.opponent-active .player-name { color: var(--accent); font-weight: 700; }
.player-type { color: var(--text-dim); font-family: var(--f-mono); }
.alliance-id { color: var(--text-faint); font-family: var(--f-mono); }
.turn-timestamps-list { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm); }
.turn-timestamp-entry { color: var(--text-dim); font-family: var(--f-mono); }
.turn-number { color: var(--accent); }
.turn-timestamps-empty { color: var(--text-dim); }

/* --- Popovers: export menu ------------------------------------------------ */
.export-menu { background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
.export-option { color: var(--text); }
.export-option:hover { background: var(--bg-soft-amber); color: var(--accent); }

/* --- Tournaments: header, tabs, chips ------------------------------------- */
.tournament-header { border-bottom: 1px solid var(--line); }
.tournament-header .meta { color: var(--text-dim); }
.tabs { border-bottom: 1px solid var(--line); }
.tabs .tab { color: var(--text-muted); font-family: var(--f-display); font-weight: 600; }
.tabs .tab:hover { color: var(--text-warm); }
.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.chip {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-family: var(--f-display);
}
.chip:hover { background: var(--bg-soft-amber); border-color: var(--line-amber); color: var(--text); }
.chip.active { background: var(--bg-amber-strong); border-color: var(--accent); color: var(--accent); }
.chip small { color: var(--text-dim); }
.chip-live small { color: var(--info); }
.chip-done small { color: var(--win); }
.chip-planned small { color: var(--accent); }

/* --- Tournaments: rounds / roster / misc ---------------------------------- */
.round-chips, .round-header, .manual-match, .status-actions { border-color: var(--line); }
.round-header h3 { color: var(--text); }
.round-meta, .round-locked-note, .manual-match p, .round-scores p, .empty,
.search-no-results, .bulk-result, .pagination-footer { color: var(--text-dim); }
.search-result { background: var(--bg-panel); border-color: var(--line); }
.search-result:first-child { border-color: var(--line); }
.pagination-footer a { color: var(--link); }
#tab-content .data-table td a,
#tournaments-table-target .data-table td a { color: var(--link); }
#tab-content .data-table td a:hover,
#tournaments-table-target .data-table td a:hover { color: var(--link-soft); }
.logo-thumb { border-radius: var(--r-xs); }

/* --- Tournaments: inline alert (htmx-swapped) ----------------------------- */
.alert-error { background: var(--loss-soft); border: 1px solid rgba(255, 128, 128, 0.45); border-left-width: 3px; border-radius: var(--r-sm); color: var(--loss); }
.alert-error button { color: var(--loss); }

/* --- Create Game (cg-*) board --------------------------------------------- */
.cg-section { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.cg-queue, .cg-tags-input-wrap, .cg-slot-target { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.cg-tag-chip { background: var(--bg-soft-amber); color: var(--accent); border-radius: var(--r-pill); }
.cg-chip { background: var(--info-soft); border: 1px solid rgba(184, 232, 255, 0.3); border-radius: var(--r-sm); color: var(--text); }
.cg-slot-target.sortable-drag-over { border-color: var(--line-green); background: var(--bg-soft-green); }
.cg-matches { border: 1px solid var(--line); border-radius: var(--r-sm); }
.cg-match-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cg-match-card-placeholder { background: rgba(0, 0, 0, 0.2); }
.cg-submit-bar { background: var(--bg-deep); border-top: 1px solid var(--line); }
.cg-paste-panel, .cg-confirm-box { background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.cg-paste-panel { border-radius: 0; border-top: none; border-bottom: none; border-right: none; }
.cg-toast { background: var(--bg-deep); border: 1px solid var(--line-amber); border-radius: var(--r-sm); box-shadow: var(--shadow-1); color: var(--text); }
.cg-result-green { border-left: 4px solid var(--win); }
.cg-result-amber { border-left: 4px solid var(--accent); }
.cg-result-table tr.cg-result-ok td { color: var(--win); }
.cg-result-table tr.cg-result-err td { color: var(--loss); }
.create-arena-json { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-muted); font-family: var(--f-mono); }

/* --- Bulk Create Accounts ------------------------------------------------- */
.bulk-create-help { color: var(--text-muted); }
.bulk-email-textarea { font-family: var(--f-mono); }
.bulk-file-input::file-selector-button {
  background: var(--bg-soft-amber); border: 1px solid var(--line-amber); border-radius: var(--r-sm);
  color: var(--accent); font-family: var(--f-display); font-weight: 700;
}
.bulk-file-input::file-selector-button:hover { background: rgba(255, 208, 85, 0.18); }
.bulk-create-table thead th { background: rgba(0, 0, 0, 0.22); border-bottom: 1px solid var(--line-strong); color: var(--text-dim); font-family: var(--f-display); letter-spacing: 0.12em; }
.bulk-create-table td { border-bottom: 1px solid var(--line); color: var(--text); }
.bulk-create-table tr.row-created { background: var(--win-soft); }
.bulk-create-table tr.row-created td { color: var(--win); }
.bulk-create-table tr.row-invalid_format, .bulk-create-table tr.row-error { background: var(--loss-soft); }
.bulk-create-table tr.row-invalid_format td, .bulk-create-table tr.row-error td { color: var(--loss); }
.bulk-create-error { background: var(--loss-soft); border: 1px solid rgba(255, 128, 128, 0.45); border-radius: var(--r-md); color: var(--loss); }
.bulk-create-error pre { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-muted); }

/* --- Audit ---------------------------------------------------------------- */
.col-game-id { color: var(--text-muted); font-family: var(--f-mono); }
.audit-details-count { color: var(--text); }
.audit-details-toggle, .audit-details-key { color: var(--text-dim); }
.audit-details-list { color: var(--text); }
.audit-details-value { font-family: var(--f-mono); }

/* --- Public tournament page ----------------------------------------------- */
.public-header { border-bottom: 1px solid var(--line); }
.public-header h1 { font-family: var(--f-display); color: var(--text); text-transform: uppercase; }
.public-header .description { color: var(--text-muted); }
.public-standings h2, .public-rounds h2 { font-family: var(--f-display); color: var(--text); }
.public-standings th, .public-rounds th { background: rgba(0, 0, 0, 0.22); color: var(--text-dim); font-family: var(--f-display); letter-spacing: 0.1em; border-bottom: 1px solid var(--line-strong); }
.public-standings td, .public-rounds td { border-bottom: 1px solid var(--line); color: var(--text); }

/* --- Map Stats page -------------------------------------------------------- */
/* Filter console: one tactical panel holding every control, above the board. */
.ms-console {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 30px;
  padding: 18px 22px;
  margin: 0 0 20px;
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-hot);
  border-radius: var(--r);
}
.ms-filter { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ms-filter-map { flex: 1 1 240px; max-width: 320px; }
.ms-filter-players { flex: 1 1 180px; max-width: 260px; }
.ms-filter-range { flex: 0 0 auto; }
.ms-filter-gametype { flex: 0 0 auto; }

/* Game-type segmented toggle (PVP | PVE); active button is amber. */
.ms-gt-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.ms-gt-btn {
  padding: 9px 20px;
  min-height: 40px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ms-gt-btn + .ms-gt-btn { border-left: 1px solid var(--line-strong); }
.ms-gt-btn:hover { color: var(--text); }
.ms-gt-btn.active { background: var(--accent); color: var(--bg-deep); }
.ms-filter-label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ms-console .ms-combo { width: 100%; }
.ms-console .ms-map-search,
.ms-console .ms-player-search { width: 100%; }

/* Combobox shared by the map picker and the player search */
.ms-combo { position: relative; }
.ms-map-search { min-width: 220px; }
.ms-player-search { min-width: 200px; }
.ms-combo-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.ms-combo-item {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.ms-combo-item:hover,
.ms-combo-item.ms-combo-active { background: var(--bg-soft-amber); color: var(--accent); }

/* Player autocomplete suggestions */
.ms-suggest { min-width: 240px; padding: 4px; }
.ms-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ms-suggest-item:hover { background: var(--bg-soft-amber); color: var(--accent); }
.ms-suggest-name { font-weight: 500; }
.ms-suggest-count { color: var(--text-dim); font-family: var(--f-mono); font-size: 11px; }
.ms-suggest-empty { padding: 8px 10px; color: var(--text-dim); font-size: 12px; }

/* Selected-player chips (below the search box) */
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chips:empty { display: none; }
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--line-amber);
  border-radius: var(--r-pill);
  background: var(--bg-soft-amber);
  color: var(--accent);
  font-size: 12px;
}
.ms-chip-label { font-weight: 500; }
.ms-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.ms-chip-remove:hover { background: var(--loss-soft); color: var(--loss); }

/* From/to range filters (finished games, win rate) */
.ms-range { display: flex; align-items: center; gap: 6px; }
.ms-range-input {
  width: 64px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 13px;
}
.ms-range-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--bg-soft-amber); outline: none; }
.ms-range-sep { color: var(--text-dim); }
.ms-range-unit { color: var(--text-dim); font-family: var(--f-mono); font-size: 12px; }

/* Leaderboard table */
.ms-table { width: 100%; }
.ms-table thead th { vertical-align: bottom; font-size: 12.5px; padding-top: 14px; padding-bottom: 14px; }
.ms-table thead th.sortable { white-space: nowrap; }
.sort-caret { margin-left: 6px; font-size: 10px; color: var(--accent); }
.ms-summary-row td { padding: 10px 14px 12px; border-bottom: 1px solid var(--line-strong); }
.ms-summary-map {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 12px;
}
.ms-summary-counts { color: var(--text-muted); font-size: 14px; }

/* Row hover: neutralise the blanket .data-table amber (same specificity, later
   in source, so it wins) and re-apply it to real player rows only. This also
   stops the amber TR from bleeding through the detail panel's cells. */
.ms-table tbody tr:hover { background: transparent; }
.ms-col-rank { width: 66px; }
.ms-player-row { cursor: pointer; }
/* Roomy, readable rows (well above the base data-table row height). */
.ms-table .ms-player-row > td { padding-top: 20px; padding-bottom: 20px; font-size: 16px; }
.ms-table .ms-player-row:hover > td { background: var(--bg-soft-amber); }
.ms-table .ms-player-row-open > td { background: var(--bg-soft-amber); }
.ms-player-row-open .ms-expand-toggle { color: var(--accent); transform: rotate(180deg); }

/* Veteran badge: a liquid-glass hexagon (an accent, not a medal) for the map's
   top players by battles. Uniform and frosted -- the number carries the standing.
   A hexagon clip-path cannot take a border, so the rim + lift come from layered
   drop-shadows (which follow the clipped shape) and an inner specular sheen. */
.ms-vet-hex {
  --vet-rgb: 255, 208, 85; /* fallback (gold) if the per-rank tint is absent */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 33px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Metallic tint (gold->bronze by rank) over a frosted-white base -- a tinted
     glass, not a solid medal. */
  background:
    linear-gradient(150deg, rgba(var(--vet-rgb), 0.72), rgba(var(--vet-rgb), 0.22) 55%, rgba(var(--vet-rgb), 0.05)),
    linear-gradient(153deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 55%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.6px rgba(var(--vet-rgb), 0.8));
}
.ms-vet-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 45% at 32% 16%, rgba(255, 255, 255, 0.45), transparent 72%);
}
.ms-vet-num {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-warm);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* Non-veteran position: a quiet ordinal, never a grid marker (>=AA contrast). */
.ms-rank-num { font-family: var(--f-mono); font-size: 13px; color: var(--text-dim); }

.ms-col-games .count-total { font-size: 18px; font-weight: 700; }
.ms-col-wins { color: var(--win); font-family: var(--f-mono); }
.ms-col-losses { color: var(--loss); font-family: var(--f-mono); }
.ms-col-winrate { white-space: nowrap; }
.ms-winrate-value { display: inline-block; min-width: 40px; font-family: var(--f-mono); color: var(--text); }
.ms-winrate-bar {
  display: inline-block;
  vertical-align: middle;
  width: 88px;
  height: 4px;
  margin-left: 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.ms-winrate-fill { display: block; height: 100%; background: var(--win); border-radius: 2px; }
.ms-col-expand { width: 40px; text-align: right; }
.ms-expand-toggle { transition: transform var(--dur) var(--ease-out); }
.ms-pager-row td { padding-top: 12px; }
.ms-pager-row:hover td, .ms-summary-row:hover td, .ms-empty-row:hover td { background: transparent; }

/* Per-player games detail panel. The panel cell keeps its recessed background on
   hover (the blanket .ms-table row-hover reset above stops any amber bleed-through
   that previously tinted the whole block yellow). */
.ms-detail-row > td {
  padding: 0 14px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent-hot);
}
/* Constant size (one page of taller games rows) so expanding never resizes the layout. */
.ms-detail-fixed { min-height: 640px; display: flex; flex-direction: column; }
.ms-detail-head { margin: 14px 0 4px; }
.ms-detail-title {
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-games-table { font-size: 14px; margin-top: 8px; }
.ms-games-table thead th { font-size: 12px; }
.ms-games-table td { padding: 12px 14px; }
.ms-games-table tbody tr:hover { background: rgba(0, 0, 0, 0.15); }
.ms-result-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
}
.ms-result-won { color: var(--win); border-color: var(--line-green); background: var(--win-soft); }
.ms-result-lost { color: var(--loss); border-color: rgba(255, 128, 128, 0.5); background: var(--loss-soft); }
.ms-result-draw { color: var(--accent); border-color: var(--line-amber); background: var(--bg-soft-amber); }
.ms-winner-name { color: var(--text-warm); font-weight: 500; }
.ms-winner-none { color: var(--text-dim); }
.ms-col-opponents { color: var(--text); }
.ms-teammates { color: var(--text-dim); font-size: 12px; }
.ms-col-turns { font-family: var(--f-mono); }
.ms-end-status { color: var(--text-dim); font-family: var(--f-mono); font-size: 12px; }
.ms-detail-pagination { display: flex; align-items: center; gap: 12px; padding: 10px 0 2px; margin-top: auto; }
.ms-detail-empty { margin: 8px 0; }

/* Download-replay action (one button, replaces the old G/M links) */
.col-replay { white-space: nowrap; }
.ms-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line-green);
  border-radius: var(--r-pill);
  background: var(--bg-soft-green);
  color: var(--link);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ms-replay-btn:hover { background: rgba(154, 255, 123, 0.18); border-color: var(--link); color: var(--link-soft); }
.ms-replay-icon { font-size: 14px; line-height: 1; }

/* --- Standalone Map Stats site (MAP_STATS_ONLY) --------------------------- */
/* No sidebar: a full-width header, the content, and a pinned footer, stacked. */
body.layout-site { flex-direction: column; min-height: 100vh; }
body.layout-site .content { min-height: 0; flex: 1 0 auto; width: 100%; }

.sitehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 32px;
  background: linear-gradient(180deg, rgba(10, 17, 20, 0.94), rgba(10, 17, 20, 0.55));
  border-bottom: 1px solid var(--line-amber);
}
.sitehead-brand { display: flex; align-items: center; gap: 18px; }
.sitehead-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
/* The logo already carries the wordmark, so the header names only the section. */
.sitehead-section {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 18px;
  border-left: 1px solid var(--line-strong);
}
.sitehead-user { display: flex; align-items: center; gap: 14px; }
.sitehead-username { color: var(--text-dim); font-size: 13px; }
.sitehead .sidebar-logout { padding: 7px 16px; }

.sitefoot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sitefoot-mark { color: var(--text-muted); font-weight: 600; }
.sitefoot-sep { color: var(--accent); }
.sitefoot-year { color: var(--text-dim); font-family: var(--f-mono); letter-spacing: normal; }

.ms-denied { max-width: 640px; line-height: 1.6; color: var(--text-muted); }
.ms-denied p { margin-bottom: 10px; }
.ms-denied strong { color: var(--text-warm); }

/* --- Map Stats: shared scroll guard + sort control ------------------------ */
/* Wide tables scroll inside their own box so the page body never scrolls
   horizontally on mid-width screens; on phones they become cards (below). */
.ms-board-scroll, .ms-games-scroll { overflow-x: auto; }
.ms-mobile-only { display: none; }
.ms-sort-control { display: flex; gap: 8px; align-items: stretch; }
.ms-sort-control select {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 14px;
  padding: 8px 10px;
}
.ms-sort-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.ms-sort-dir:hover { border-color: var(--accent); }

/* --- Map Stats: phone layout (cards) -------------------------------------- */
@media (max-width: 720px) {
  /* Header: slim, drop the username to save width, keep brand + logout. */
  .sitehead { padding: 12px 16px; gap: 12px; }
  .sitehead-logo { height: 30px; }
  .sitehead-brand { gap: 12px; }
  .sitehead-section { font-size: 11px; letter-spacing: 0.16em; padding-left: 12px; }
  .sitehead-username { display: none; }
  .content { padding: 16px 12px; }
  .sitefoot { padding: 16px; font-size: 11px; }

  /* Filter console: single column, full-width, touch-sized (16px inputs avoid
     the iOS focus-zoom), and reveal the mobile Sort control. */
  .ms-console { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
  .ms-console .ms-filter { flex: 1 1 auto; max-width: none; width: 100%; }
  .ms-mobile-only { display: flex; }
  .ms-gt-toggle { width: 100%; }
  .ms-gt-btn { flex: 1; min-height: 44px; }
  .ms-console .filter-input { min-height: 44px; font-size: 16px; min-width: 0; }
  .ms-range { gap: 10px; min-width: 0; }
  /* min-width:0 lets the number inputs shrink below their intrinsic width so the
     from/to pair never overflows the card (default flex min-width is auto). */
  .ms-range-input { flex: 1 1 0; min-width: 0; width: auto; min-height: 44px; font-size: 16px; }
  .ms-sort-control select { min-height: 44px; font-size: 16px; }

  /* Leaderboard table -> one card per player. */
  .ms-board-scroll, .ms-table, .ms-table > tbody { display: block; overflow: visible; }
  .ms-table thead { display: none; }
  /* :not([hidden]) so this block-display does not override the UA [hidden] rule
     that togglePlayerGames uses to collapse the per-player games row. */
  .ms-table tr:not([hidden]) { display: block; }
  .ms-summary-row td { display: block; padding: 2px 2px 12px; border: none; }
  .ms-empty-row td { display: block; padding: 12px 2px; }

  .ms-table .ms-player-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 9px;
    padding: 15px 44px 15px 62px;
    margin-bottom: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  .ms-table .ms-player-row.ms-player-row-open { background: var(--bg-soft-amber); border-color: var(--line-amber); }
  .ms-table .ms-player-row > td { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; font-size: 14px; }
  .ms-table .ms-player-row > td.ms-col-rank { position: absolute; left: 15px; top: 16px; display: block; width: auto; }
  .ms-table .ms-player-row > td.col-player { order: 1; flex: 1 1 100%; display: block; font-size: 18px; font-weight: 600; color: var(--text-warm); white-space: normal; overflow-wrap: anywhere; }
  .ms-table .ms-player-row > td.ms-col-expand { position: absolute; right: 8px; top: 12px; width: auto; text-align: right; }
  .ms-table .ms-player-row > td.ms-col-games { order: 2; }
  .ms-table .ms-player-row > td.ms-col-wins { order: 3; }
  .ms-table .ms-player-row > td.ms-col-losses { order: 4; }
  .ms-table .ms-player-row > td.ms-col-winrate { order: 5; }
  .ms-table .ms-player-row > td.col-datetime { order: 6; }
  .ms-table .ms-player-row > td[data-label]::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-family: var(--f-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ms-player-row .ms-col-games .count-total { font-size: 16px; }
  .ms-rank-num { font-size: 15px; }

  /* Per-player games panel -> one card per game, full-width replay button.
     Gate on :not([hidden]) so this author display rule does not override the
     `hidden` attribute that togglePlayerGames uses to collapse the panel. */
  .ms-detail-row:not([hidden]) { display: block; }
  .ms-detail-row > td { display: block; padding: 0 0 12px; background: transparent; border: none; }
  .ms-detail-fixed { min-height: 0; }
  .ms-detail-head { margin: 6px 2px 8px; }
  .ms-games-scroll, .ms-games-table, .ms-games-table > tbody { display: block; overflow: visible; }
  .ms-games-table thead { display: none; }
  .ms-games-table tbody { display: block; }
  .ms-games-table tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .ms-games-table td { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; font-size: 14px; }
  .ms-games-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-family: var(--f-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ms-games-table td.ms-game-id { order: 1; font-weight: 700; font-size: 15px; }
  .ms-games-table td.ms-game-result { order: 2; }
  .ms-games-table td.ms-col-ended { order: 3; }
  .ms-games-table td.ms-col-winner { order: 4; }
  .ms-games-table td.ms-col-opponents { order: 5; }
  .ms-games-table td.ms-col-turns { order: 6; }
  .ms-games-table td.ms-col-started { order: 7; }
  .ms-games-table td.ms-col-finished { order: 8; }
  .ms-games-table td.col-replay { order: 9; flex: 1 1 100%; }
  .ms-games-table td.col-replay .ms-replay-btn { width: 100%; justify-content: center; padding: 12px; font-size: 12px; }

  /* Pagination: wrap and give buttons a real tap target. */
  .ms-pager-row td { display: block; padding: 10px 0 2px; }
  .pagination { flex-direction: column; align-items: stretch; gap: 12px; }
  .pagination-controls { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .ms-detail-pagination { flex-wrap: wrap; gap: 8px; }
  .page-btn { min-height: 44px; }
}