/* ============================================================
   Garfield Gang — SharpTimer community site
   Aesthetic: warm near-black + Garfield orange, comic display
   type (Luckiest Guy / Baloo 2) with mono data (JetBrains Mono).
   ============================================================ */

:root {
  /* warm dark base */
  --bg:          #14110c;
  --bg-2:        #1b1710;
  --bg-3:        #211b13;
  --panel:       rgba(27, 22, 15, 0.82);
  --panel-solid: #1b1710;

  --border:        rgba(255, 170, 80, 0.10);
  --border-strong: rgba(255, 170, 80, 0.26);

  --text:   #f7efe2;
  --dim:    #b6a489;
  --dimmer: #7e7059;

  /* Garfield orange family */
  --accent:      #ff8a1f;
  --accent-2:    #ffb74d;
  --accent-deep: #e8650a;
  --accent-soft: rgba(255, 138, 31, 0.16);
  --accent-glow: rgba(255, 138, 31, 0.45);

  /* medals + status */
  --gold:   #ffc857;
  --silver: #d6d2c6;
  --bronze: #d08a52;
  --online: #5fd08a;
  --danger: #ff6a5e;
  --warn:   #ffb02e;
  --info:   #c98bff;

  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --head:    'Baloo 2', system-ui, sans-serif;
  --display: 'Luckiest Guy', var(--head);

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1140px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--mono);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* atmosphere: warm top glow + faint grid + grain */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 48% at 50% -8%, rgba(255, 138, 31, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 40% at 92% 8%, rgba(255, 110, 30, 0.06), transparent 60%),
    linear-gradient(to right,  rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 52px 52px;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
::selection { background: var(--accent); color: #1a1206; }

/* ===================== Header / nav ===================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  padding: 22px 24px 16px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(20,17,12,0.92) 40%, rgba(20,17,12,0.0));
  backdrop-filter: blur(10px);
}
.brand {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 54px);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  text-shadow: 0 0 26px rgba(255,138,31,0.35), 0 3px 0 rgba(0,0,0,0.35);
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.brand:hover { transform: rotate(-1.2deg) scale(1.02); filter: brightness(1.08); }
.brand .pip { color: var(--text); -webkit-text-stroke: 0; }

.nav {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 6px 4px;
  justify-content: center; align-items: center;
}
.nav a {
  position: relative;
  font-family: var(--head); font-weight: 800;
  font-size: 14px; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding: 8px 16px; border-radius: 999px;
  transition: color 0.18s, background 0.18s, transform 0.18s var(--ease);
}
.nav a:hover { color: var(--text); transform: translateY(-1px); }
.nav a.active { color: #1a1206; background: var(--accent); box-shadow: 0 6px 20px -8px var(--accent-glow); }
.nav a.active:hover { color: #1a1206; }

/* ===================== Layout ===================== */
.page {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 26px 24px 60px;
  flex: 1;
}
.view-enter { animation: rise 0.32s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.section-head { margin: 4px 0 22px; }
.section-head .kicker {
  font-family: var(--head); font-weight: 700;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 4px;
}
.section-head h2 {
  margin: 0; font-family: var(--display);
  font-size: clamp(30px, 5vw, 46px); letter-spacing: 0.02em;
  line-height: 1; color: var(--text);
}
.section-head p { margin: 10px 0 0; color: var(--dim); max-width: 64ch; font-size: 13px; }

/* sample-data warning banner */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,176,46,0.10), rgba(255,176,46,0.03));
  border: 1px solid rgba(255,176,46,0.28);
  border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 20px;
  font-size: 12px; color: #ffd9a0;
}
.banner b { color: #ffe9c9; }
.banner .ico { font-size: 16px; line-height: 1.2; }
.banner code {
  background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 4px;
  color: #ffefce; font-size: 11px;
}

/* ===================== Stat tiles ===================== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px;
  position: relative; overflow: hidden;
}
.stat::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.6; }
.stat .n { font-family: var(--display); font-size: 30px; color: var(--accent-2); line-height: 1; }
.stat .l { font-family: var(--head); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }

/* ===================== Generic table ===================== */
.tbl-wrap {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
table.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; padding: 13px 16px;
  font-family: var(--head); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); background: rgba(255,255,255,0.018);
  border-bottom: 1px solid var(--border);
}
.tbl tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background: rgba(255,138,31,0.05); }
.tbl td { padding: 13px 16px; vertical-align: middle; font-size: 13px; }
.tbl .num { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.dimmer { color: var(--dimmer); }

.rank { font-family: var(--display); font-size: 20px; color: var(--dim); width: 54px; }
.rank.gold { color: var(--gold); } .rank.silver { color: var(--silver); } .rank.bronze { color: var(--bronze); }

.time-cell { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* player cell (avatar + name + id) */
.who { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.who img {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, #2a2114, #18130c);
  border: 1px solid var(--border);
}
.who .nm { display: flex; flex-direction: column; line-height: 1.25; }
.who .nm .name { font-family: var(--head); font-weight: 700; color: var(--text); }
.who .nm .sid { font-size: 10px; color: var(--dimmer); letter-spacing: 0.04em; }
.who a.name:hover { color: var(--accent); }

.map-pill {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 9px; display: inline-block;
}

/* ===================== Map grid (replays) ===================== */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.search {
  position: relative; flex: 1; min-width: 220px;
}
.search input {
  width: 100%; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 14px 13px 40px; font-family: var(--mono); font-size: 14px;
  outline: none; transition: border-color 0.15s, background 0.15s;
}
.search input::placeholder { color: var(--dimmer); }
.search input:focus { border-color: var(--accent); background: var(--bg-3); }
.search::before {
  content: '⌕'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--dim); font-size: 17px; pointer-events: none;
}
.count-tag { font-family: var(--head); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.count-tag b { color: var(--accent-2); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 13px; }
.card {
  text-align: left; cursor: pointer; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  color: var(--text); font-family: var(--mono);
  transition: transform 0.18s var(--ease), border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--bg-3); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.8); }
.card .thumb, .card .thumb-ph {
  width: 100%; aspect-ratio: 16/9; border-radius: 8px; margin-bottom: 13px; display: block; object-fit: cover;
  border: 1px solid var(--border);
}
.card .thumb-ph {
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255,138,31,0.14), transparent 60%), var(--bg);
  font-family: var(--display); font-size: 34px; color: var(--accent);
  text-shadow: 0 0 20px rgba(255,138,31,0.4);
}
.card .name { font-family: var(--head); font-weight: 800; font-size: 16px; margin-bottom: 6px; word-break: break-word; }
.card .meta { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 11px; letter-spacing: 0.04em; }
.card .meta .c { color: var(--accent-2); font-weight: 700; }
.card .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dimmer); }

.watch {
  display: inline-block; padding: 7px 13px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: var(--head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; transition: all 0.15s;
}
.tbl tr:hover .watch { background: var(--accent); color: #1a1206; }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); margin-bottom: 18px; transition: all 0.15s;
}
.back-link:hover { color: var(--accent); border-color: var(--border-strong); }

/* ===================== Servers list ===================== */
.srv-list { display: flex; flex-direction: column; gap: 12px; }
.srv {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease);
}
.srv:hover { border-color: var(--border-strong); background: var(--bg-3); transform: translateX(2px); }
.srv .badge-mode {
  width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.03em; text-align: center;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--border-strong);
  line-height: 1;
}
.srv .info .title { font-family: var(--head); font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.srv .info .sub { color: var(--dim); font-size: 12px; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.srv .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); background: var(--bg-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; }

.live { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 92px; }
.live .players { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.live .players .max { color: var(--dimmer); font-weight: 400; }
.live .now-map { font-size: 11px; color: var(--dim); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--head); font-weight: 700; }
.status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.status-dot.on { color: var(--online); } .status-dot.on::before { background: var(--online); box-shadow: 0 0 10px var(--online); }
.status-dot.off { color: var(--dimmer); } .status-dot.off::before { background: var(--dimmer); }
.status-dot.unknown { color: var(--dim); } .status-dot.unknown::before { background: var(--dim); }

.btn {
  font-family: var(--head); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 9px; padding: 11px 16px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1px solid transparent; transition: all 0.16s var(--ease);
}
.btn-primary { background: var(--accent); color: #1a1206; box-shadow: 0 8px 22px -10px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ===================== Commands ===================== */
.cmd-sections { display: flex; flex-direction: column; gap: 22px; }
.cmd-block { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cmd-block > h3 {
  margin: 0; padding: 14px 18px;
  font-family: var(--head); font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em; color: var(--text);
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.cmd-block > h3 .pin { color: var(--accent); }
.cmd-block .rows { display: grid; }
.cmd-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 18px; padding: 11px 18px; border-bottom: 1px solid var(--border); align-items: baseline; }
.cmd-row:last-child { border-bottom: none; }
.cmd-row:hover { background: rgba(255,138,31,0.04); }
.cmd-row code { font-family: var(--mono); font-weight: 600; color: var(--accent-2); font-size: 13px; }
.cmd-row .d { color: var(--dim); font-size: 13px; }
mark { background: var(--accent); color: #1a1206; border-radius: 3px; padding: 0 2px; }

/* ===================== Staff / punishments ===================== */
.tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  font-family: var(--head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--dim);
  transition: all 0.15s;
}
.tab:hover { color: var(--text); border-color: var(--border-strong); }
.tab.active { background: var(--accent); color: #1a1206; border-color: var(--accent); }

.kind {
  font-family: var(--head); font-weight: 800; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; display: inline-block;
  border: 1px solid transparent;
}
.kind.ban     { color: var(--danger); background: rgba(255,106,94,0.12); border-color: rgba(255,106,94,0.3); }
.kind.mute    { color: var(--warn);   background: rgba(255,176,46,0.12); border-color: rgba(255,176,46,0.3); }
.kind.gag     { color: var(--info);   background: rgba(201,139,255,0.12); border-color: rgba(201,139,255,0.3); }
.kind.silence { color: #6fd0ff;       background: rgba(111,208,255,0.12); border-color: rgba(111,208,255,0.3); }

.pill-status {
  font-family: var(--head); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; display: inline-block;
}
.pill-status.active  { color: var(--online); background: rgba(95,208,138,0.1); }
.pill-status.expired { color: var(--dimmer); background: rgba(255,255,255,0.04); }
.dur-perma { color: var(--danger); font-weight: 700; }

/* ===================== About ===================== */
.prose { max-width: 70ch; }
.prose p { color: var(--dim); }
.prose h3 { font-family: var(--head); font-weight: 800; color: var(--text); margin: 26px 0 8px; }
.prose code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--accent-2); font-size: 12px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 13px; }

/* ===================== Loading / empty ===================== */
.empty, .loading {
  padding: 56px 24px; text-align: center; color: var(--dim);
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty .ico, .loading .ico { font-family: var(--display); font-size: 46px; color: var(--accent); margin-bottom: 10px; text-shadow: 0 0 20px rgba(255,138,31,0.35); }
.empty .hint { font-size: 12px; margin-top: 8px; color: var(--dimmer); }
.empty code { background: var(--bg-3); padding: 1px 6px; border-radius: 4px; color: var(--text); font-size: 11px; }
.spin { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-row { height: 56px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.skeleton-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); animation: sweep 1.2s infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ===================== Footer ===================== */
.site-foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 26px; border-top: 1px solid var(--border);
  color: var(--dim); font-size: 12px;
  background: rgba(20,17,12,0.5);
}
.site-foot .copy { font-family: var(--head); font-weight: 600; letter-spacing: 0.03em; }
.site-foot a {
  font-family: var(--head); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color 0.15s;
}
.site-foot a:hover, .site-foot a.active { color: var(--accent); }

/* ===================== Responsive ===================== */
@media (max-width: 760px) {
  .page { padding: 20px 16px 48px; }
  .srv { grid-template-columns: auto 1fr; row-gap: 12px; }
  .srv .live { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; gap: 14px; }
  .srv > .btn { grid-column: 1 / -1; justify-content: center; }
  .cmd-row { grid-template-columns: 1fr; gap: 4px; }
  .tbl thead { display: none; }
  .tbl tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; padding: 12px 14px; }
  .tbl td { padding: 0; border: none; }
  .tbl td.rank { grid-row: span 2; align-self: center; }
  .tbl td[data-col]:not(.rank):not(.who-cell):not(.time-cell) { grid-column: 2 / span 2; font-size: 12px; color: var(--dim); }
  .tbl td.who-cell { grid-column: 2; }
  .tbl td.time-cell { grid-column: 3; align-self: center; }
}

/* ===================== Home: split layout ===================== */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  /* stretch (not start): both columns take the height of the taller one, so the
     Latest Records side can fill down to the bottom of the Top Times side. */
  align-items: stretch;
  margin-top: 26px;
}

/* Right column is a flex column so its feed can grow to fill the stretched
   height beneath the column head. */
.home-side { display: flex; flex-direction: column; }

.col-head { margin-bottom: 14px; }
.col-head .kicker {
  display: block;
  font: 600 11px/1 var(--head);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.col-head h3 {
  margin: 0;
  font: 400 24px/1.05 var(--display);
  color: var(--text);
  letter-spacing: 0.4px;
}

/* ---- left / main: per-map leaderboard blocks ---- */
/* No flex `gap` here: a gap would also sit between the column head and the
   first block, pushing the leaderboard list ~16px below the Latest Records
   feed on the right. Space the blocks from each other instead, so the first
   block starts the same 14px below the head as the feed does — keeping the
   two panels' first rows aligned. */
.home-main { display: flex; flex-direction: column; }
.home-main .lb + .lb { margin-top: 16px; }

.lb {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.lb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--border);
}
.lb-head .map {
  flex: 0 1 auto;
  min-width: 0;
  font: 400 17px/1 var(--display);
  letter-spacing: 0.4px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-head .map:hover { color: var(--accent-2); }
.lb-head .cnt {
  flex: 0 0 auto;
  font: 500 11px/1 var(--head);
  color: var(--dimmer);
  letter-spacing: 0.02em;
}
.lb-head .all {
  flex: 0 0 auto;
  margin-left: auto;
  font: 600 11px/1 var(--head);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.lb-head .all:hover { color: var(--accent-2); }

.lb-rows { display: flex; flex-direction: column; }
.lb-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 170, 80, 0.05);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255, 138, 31, 0.04); }

.lb-rank {
  font: 700 14px/1 var(--head);
  color: var(--dimmer);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-rank.gold   { color: var(--gold); }
.lb-rank.silver { color: var(--silver); }
.lb-rank.bronze { color: var(--bronze); }

.lb-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mini-av {
  width: 26px; height: 26px;
  border-radius: 7px;
  object-fit: cover;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #2a2114, #18130c);
  border: 1px solid var(--border);
}
.lb-who .name {
  min-width: 0;
  font: 600 14px/1.2 var(--head);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-who .name:hover { color: var(--accent-2); }
.lb-style {
  flex: 0 0 auto;
  font: 600 10px/1 var(--head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 3px 6px;
}
.lb-time {
  font: 500 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  white-space: nowrap;
}
.lb-empty {
  padding: 18px 14px;
  font: 500 13px/1.4 var(--head);
  color: var(--dimmer);
}

/* ---- right / aside: latest-records feed ---- */
.home-side .feed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  /* fill the column height left under the head, and lay rows out vertically so
     they can share that height evenly (bottom row meets the column bottom). */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.feed-item {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: 6px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 170, 80, 0.05);
  cursor: pointer;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: rgba(255, 138, 31, 0.04); }

/* Row 1: player on the left, completed time on the right (same line). */
.fi-who  { grid-column: 1; grid-row: 1; min-width: 0; }
.fi-time {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  font: 500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  white-space: nowrap;
}
/* playerCell renders .who; tighten it for the narrow rail */
.feed-item .who { min-width: 0; gap: 9px; }
.feed-item .who img { width: 30px; height: 30px; flex: 0 0 auto; }
.feed-item .who .nm { min-width: 0; }
.feed-item .who .name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Row 2: map/style/date sub-line on the left. */
.fi-sub {
  grid-column: 1; grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--head);
  color: var(--dim);
}
.fi-sub .map-pill {
  font-size: 11px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fi-sub .dimmer { color: var(--dimmer); }

@media (max-width: 900px) {
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .fi-sub .map-pill { max-width: none; }
  /* Single-column on mobile: there's no sibling column to match heights with, so
     let the feed and its rows size to content rather than stretching to fill. */
  .home-side .feed { display: block; flex: 0 0 auto; }
}

/* ============================================================= *
 *  Steam auth widget  (top-right of the header)
 * ============================================================= */
.auth {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  min-height: 38px;
}
.btn-steam {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #1a1206;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px var(--accent-glow);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.btn-steam:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--accent-glow); filter: brightness(1.04); }
.btn-steam:active { transform: translateY(0); }
.btn-steam svg { width: 18px; height: 18px; display: block; }

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 5px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.auth-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  flex: none;
}
.auth-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-out {
  font-family: var(--head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.auth-out:hover { color: var(--danger); border-color: var(--danger); }

/* ============================================================= *
 *  Sign-in gate  (shown on Maps when logged out)
 * ============================================================= */
.gate {
  max-width: 460px;
  margin: 40px auto;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 40px 30px 34px;
  position: relative;
  overflow: hidden;
}
.gate::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.gate .gate-ico { font-size: 38px; line-height: 1; margin-bottom: 14px; }
.gate h2 { font-family: var(--display); font-size: 26px; color: var(--accent-2); letter-spacing: 0.02em; margin-bottom: 10px; }
.gate p { color: var(--dim); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.gate .btn-steam { font-size: 14px; padding: 11px 20px 11px 16px; }

/* ============================================================= *
 *  Maps progress  — per-player map cards with favorite stars
 * ============================================================= */
.map-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.mapcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.mapcard:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.7); }

.mc-top { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); overflow: hidden; }
.mc-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 40px;
  color: var(--accent);
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-soft), transparent 60%), var(--bg-3);
  user-select: none;
}
.mc-star {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--dim);
  background: rgba(10, 8, 5, 0.55);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease);
}
.mc-star:hover { transform: scale(1.1); color: var(--gold); }
.mc-star.on { color: var(--gold); background: rgba(255, 200, 87, 0.16); border-color: var(--gold); }

.mc-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mc-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.25;
}
.mc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
}
.mc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mc-status.done { color: var(--online); background: rgba(95, 208, 138, 0.12); }
.mc-status.todo { color: var(--dimmer); background: rgba(126, 112, 89, 0.12); }

.mc-best { font-family: var(--mono); font-weight: 600; font-size: 18px; color: var(--accent-2); line-height: 1; }
.mc-best .mc-best-l { font-family: var(--head); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 4px; }
/* The bare `empty` modifier collides with the global .empty full-page state
   (line ~379: 56px padding + dashed border + centered text). Cancel those
   leaked properties here so "No time yet" stays an inline dimmed label and the
   row height matches the completed (.mc-best, non-empty) cards. */
.mc-best.empty {
  font-family: var(--head); font-size: 12px; color: var(--dimmer); font-weight: 600;
  padding: 0; border: 0; border-radius: 0; text-align: left;
}

.mc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mc-chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dim);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.mc-chip b { color: var(--accent-2); font-weight: 700; }

.mc-watch {
  margin-top: auto;
  font-family: var(--head);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
  transition: color 0.15s var(--ease), gap 0.15s var(--ease);
}
.mc-watch:hover { color: var(--accent-2); gap: 7px; }

/* mobile: auth widget drops under the centered nav */
@media (max-width: 760px) {
  .auth {
    position: static;
    justify-content: center;
    margin: 14px auto 0;
  }
  .map-progress-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 11px; }
  .mc-best { font-size: 16px; }
}

/* ============================================================= *
 *  "Watch this run" pills  (Home top-times, latest feed, Servers boards)
 * ============================================================= */
.run-watch {
  flex: 0 0 auto;
  font: 700 10px/1 var(--head);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  transition: all 0.15s;
}
.run-watch:hover { background: var(--accent); color: #1a1206; }

/* Top-times row: watch sits to the LEFT of the time */
.lb-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Latest feed row: the watch button drops to row 2, right-aligned so it sits
   under the completed time / opposite the map+date sub-line. */
.fi-watch-wrap {
  grid-column: 2; grid-row: 2;
  justify-self: end;
  display: flex;
  align-items: center;
}
.fi-watch { font-size: 11px; padding: 5px 11px; letter-spacing: 0.02em; }

/* "WR" badge used in the Servers per-style boards (rank slot) */
.lb-rank.wr {
  font: 800 9px/1 var(--head);
  letter-spacing: 0.06em;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 4px 5px;
}

/* Empty state inside a table body */
.tbl-empty {
  text-align: center;
  padding: 28px 14px;
  font: 500 13px/1.4 var(--head);
  color: var(--dimmer);
}

/* Small link under the sign-in gate button */
.gate-alt { margin-top: 16px; font: 500 13px/1 var(--head); }
.gate-alt a { color: var(--dim); text-decoration: none; }
.gate-alt a:hover { color: var(--accent-2); }

/* ============================================================= *
 *  Maps page — Servers / You segmented tabs
 * ============================================================= */
.maptabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.maptab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.16s var(--ease);
}
.maptab:hover { border-color: var(--border-strong); background: var(--bg-3); }
.maptab .mt-l {
  font: 700 16px/1 var(--head);
  letter-spacing: 0.02em;
  color: var(--text);
}
.maptab .mt-s {
  font: 500 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.maptab.active { background: var(--accent-soft); border-color: var(--accent); }
.maptab.active .mt-l,
.maptab.active .mt-s { color: var(--accent-2); }

/* ---- sort pills (Servers toolbar) ---- */
.sortbar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sortpill {
  font: 700 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--dim);
  transition: all 0.15s;
}
.sortpill:hover { color: var(--text); border-color: var(--border-strong); }
.sortpill.active { background: var(--accent); color: #1a1206; border-color: var(--accent); }

/* ---- detailed map list (Servers tab) ---- */
.maplist { display: flex; flex-direction: column; gap: 10px; }
.mapitem {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.16s;
}
.mapitem:hover { border-color: var(--border-strong); }
.mapline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.ml-thumb {
  width: 72px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #2a2114, #18130c);
}
.ml-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--display);
  color: var(--accent);
}
.ml-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ml-mode {
  flex: 0 0 auto;
  font: 800 10px/1 var(--head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--bg-3);
  color: var(--dim);
  border: 1px solid var(--border);
}
.ml-mode.surf { color: #7fd0ff; border-color: rgba(127,208,255,0.3); }
.ml-mode.bhop { color: var(--accent); border-color: rgba(255,138,31,0.3); }
.ml-mode.kz   { color: #9be37d; border-color: rgba(155,227,125,0.3); }
.ml-mode.map  { color: var(--dim); }
.ml-name {
  min-width: 0;
  font: 700 16px/1.2 var(--head);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-name:hover { color: var(--accent-2); }
.ml-stats { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--head); color: var(--dim); }
.ml-stat b { color: var(--accent-2); font-weight: 700; }
.ml-stats .dot { color: var(--dimmer); }
.ml-expand {
  flex: 0 0 auto;
  font: 700 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--dim);
  transition: all 0.15s;
}
.ml-expand:hover { color: var(--text); border-color: var(--border-strong); }
.ml-expand[aria-expanded="true"] { background: var(--accent); color: #1a1206; border-color: var(--accent); }

.ml-panel {
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ml-loading, .ml-empty {
  font: 500 13px/1.4 var(--head);
  color: var(--dimmer);
  padding: 6px 0;
}
.ml-board-h {
  font: 700 11px/1 var(--head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}
.ml-board .lb-rows {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  overflow: hidden;
}

@media (max-width: 760px) {
  .maptabs { grid-template-columns: 1fr; }
  .mapline { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .ml-expand { grid-column: 1 / -1; justify-self: start; }
}

/* =====================================================================
   Maps → Servers: collapse fix. The base .ml-panel sets display:flex, which
   overrode the browser's [hidden]{display:none}, so the inline Top-times board
   never collapsed on a second click. This attribute selector wins on
   specificity and restores the toggle.
   ===================================================================== */
.ml-panel[hidden] { display: none; }

/* =====================================================================
   Pager — shared by the per-map replay list and the map-detail leaderboard.
   Numbers sit at the bottom-right; the host .pager is hidden when empty (a
   single page emits no buttons).
   ===================================================================== */
.pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 2px 4px;
}
.pager:empty { display: none; }
.pager-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  font: 700 13px/1 var(--head);
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pager-btn:hover:not(:disabled):not(.active) {
  border-color: var(--border-strong);
  color: var(--accent-2);
}
.pager-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1206;
  cursor: default;
}
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-nav { font-size: 16px; }
.pager-gap {
  padding: 0 2px;
  color: var(--dimmer);
  font: 700 13px/1 var(--head);
  align-self: flex-end;
}

/* =====================================================================
   Maps→You list rows and Replays list rows. Both reuse the Maps→Servers
   .maplist / .mapitem / .mapline / .ml-* skeleton; the rules below add the
   bits unique to each (best time, favorite star, watch link, geometry file).
   ===================================================================== */

/* shared: keep the status pill from being squeezed by a long map name */
.ml-top .mc-status { flex: 0 0 auto; }

/* --- Maps→You ------------------------------------------------------- */
.you-line { cursor: pointer; }
.you-stats { flex-wrap: wrap; gap: 8px 12px; }
.you-best {
  display: inline-flex; align-items: baseline; gap: 7px;
  font: 600 15px/1 var(--mono);
  color: var(--accent-2);
}
.you-best-l {
  font: 600 10px/1 var(--head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Same collision fix as .mc-best.empty above: strip the inherited global
   .empty padding/border/centering so the not-done rows match the compact
   completed (.you-best, non-empty) rows. */
.you-best.empty {
  font: 600 12px/1 var(--head); color: var(--dimmer);
  padding: 0; border: 0; border-radius: 0; text-align: left;
}
.you-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }

.you-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.you-watch { margin-top: 0; }
/* the star is reused from the grid (.mc-star) where it floats over the art;
   in a list row it sits inline on the right, so cancel the absolute placement */
.mc-star.you-star {
  position: static;
  top: auto; right: auto;
  width: 36px; height: 36px;
  flex: 0 0 auto;
}

/* --- Replays -------------------------------------------------------- */
.rp-line { cursor: pointer; }
.rp-glb {
  font: 500 11px/1 var(--mono);
  color: var(--dim);
  max-width: 340px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rp-go {
  flex: 0 0 auto;
  font: 700 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent-2);
  transition: background 0.15s, color 0.15s;
}
.rp-item:hover .rp-go { background: var(--accent); color: #1a1206; }

/* mobile: right-hand column (watch link + star, or the Replays watch pill)
   drops to its own full-width row, matching how .ml-expand reflows */
@media (max-width: 760px) {
  .you-right, .rp-go { grid-column: 1 / -1; justify-self: start; }
  .you-best { font-size: 14px; }
}

/* =====================================================================
   Map detail page (#map/<name>): hero (art + record holder) then the
   searchable, paginated leaderboard.
   ===================================================================== */
.mapd-hero {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 22px;
  margin: 8px 0 26px;
}
.mapd-art {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
.mapd-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapd-art-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 64px/1 var(--display);
  color: var(--accent);
  background: radial-gradient(circle at 50% 40%, rgba(255,138,31,0.14), transparent 70%), var(--bg-3);
}
.mapd-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mapd-head { display: flex; align-items: center; gap: 10px; }
.mapd-name {
  font: 400 34px/1.05 var(--display);
  color: var(--text);
  margin: 0;
  word-break: break-word;
}
.mapd-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: 600 13px/1 var(--head);
  color: var(--dim);
}
.mapd-stats b { color: var(--accent-2); }
.mapd-stats .dot { color: var(--dimmer); }
.mapd-rec {
  margin-top: 6px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.mapd-rec-label {
  font: 800 10px/1 var(--head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.mapd-rec-who .who img { width: 38px; height: 38px; }
.mapd-rec-time {
  font: 700 30px/1 var(--mono);
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.mapd-rec-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 var(--head);
  color: var(--dim);
}
.mapd-rec-meta .dot { color: var(--dimmer); }
.mapd-rec-watch { margin-top: 2px; font-size: 11px; padding: 6px 12px; }
.mapd-rec.mapd-empty { color: var(--dim); font: 500 14px/1.4 var(--head); }
.mapd-links { margin-top: 4px; }
.mapd-link {
  font: 600 13px/1 var(--head);
  color: var(--accent);
  text-decoration: none;
}
.mapd-link:hover { text-decoration: underline; }

/* Left column of the detail hero: art on top, derived facts filling the
   space underneath it. */
.mapd-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mapd-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mapd-fact {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  min-width: 0;
}
.mapd-fact .fv {
  font: 700 19px/1 var(--mono);
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapd-fact .fl {
  margin-top: 6px;
  font: 800 9px/1 var(--head);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}
.mapd-facts-foot {
  font: 600 11px/1.3 var(--head);
  color: var(--dimmer);
  padding-left: 2px;
}
.mapd-facts-empty { grid-template-columns: 1fr; }
.mapd-fact-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
  font: 600 12px/1.4 var(--head);
  color: var(--dim);
  text-align: center;
}

@media (max-width: 760px) {
  .mapd-hero { grid-template-columns: 1fr; gap: 16px; }
  .mapd-name { font-size: 28px; }
  .mapd-rec-time { font-size: 26px; }
}