/* ============================================================
   HOVERTRON — neo design, server-rendered additions
   Loaded after styles.css + pages.css. Covers components the
   static mockup doesn't have: legacy var aliases (editor),
   server-side filter chips, breadcrumbs, badges, themed tables,
   ghost replay, custom-level lightbox.
   ============================================================ */

/* ---- legacy token aliases so editor.php's inline <style> resolves ---- */
:root {
  --bg-deep:        var(--bg-0);
  --bg-body:        var(--bg-1);
  --bg-surface:     var(--panel);
  --bg-surface-alt: var(--panel-2);
  --border:         var(--line);
  --border-light:   var(--line-2);
  --accent-bright:  var(--accent);
  --accent-pink:    var(--magenta);
  --accent-green:   var(--lime);
  --accent-brand:   var(--accent);
  --text-primary:   var(--text);
  --text-muted:     var(--text-faint);
  --text-heading:   var(--text);
  --radius:         6px;
  --glow-accent:    0 0 12px color-mix(in oklab, var(--accent) 32%, transparent);
  --glow-brand:     0 0 12px color-mix(in oklab, var(--accent) 32%, transparent);
  --glow-pink:      0 0 12px color-mix(in oklab, var(--magenta) 32%, transparent);
  --medal-gold:     var(--amber);
  --medal-silver:   #cfd9ea;
  --medal-bronze:   #e0996a;
}

/* ---- generic page section content links ---- */
.content-link { color: var(--accent); }

/* ============================================================
   LEADERBOARD TABLE — widen to 8 cols for the Difficulty column
   (overrides the 7-col template in pages.css)
   ============================================================ */
.lb .board-head, .lb .lrow {
  grid-template-columns: 40px minmax(150px, 1.55fr) 0.95fr 0.78fr 0.8fr 1.05fr 0.85fr 0.65fr;
}
.cell-diff { display: flex; align-items: center; gap: 8px; min-width: 0; }
.diff-meter {
  flex: 1; height: 6px; min-width: 30px; max-width: 70px; background: var(--panel-3); overflow: hidden;
  clip-path: polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.diff-fill { display: block; height: 100%; box-shadow: 0 0 8px currentColor; }
.diff-val { font-size: 13px; color: var(--text); min-width: 22px; }

/* responsive: show only # / Level / Zone / WR Time on narrow screens */
@media (max-width: 760px) {
  .lb .board-head, .lb .lrow { grid-template-columns: 30px minmax(110px, 1.6fr) 1fr 0.85fr; }
  .lb .lrow > span:nth-child(4), .lb .board-head > span:nth-child(4),   /* difficulty */
  .lb .lrow > span:nth-child(5), .lb .board-head > span:nth-child(5),   /* board */
  .lb .lrow > span:nth-child(6), .lb .board-head > span:nth-child(6),   /* holder */
  .lb .lrow > span:nth-child(8), .lb .board-head > span:nth-child(8) {  /* plr/run */
    display: none;
  }
  .lb .lrow > span:nth-child(7), .lb .board-head > span:nth-child(7) { display: flex; } /* keep WR time */
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--text-faint); opacity: .6; }

/* ============================================================
   SERVER-SIDE FILTER ROWS  (links rendered as chips)
   reuses .chip / .chip.on from styles.css; just lays them out.
   ============================================================ */
.nfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.nfilter-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint); min-width: 58px;
}
a.chip { text-decoration: none; }
.chip .medal-gold   { color: var(--amber); }
.chip .medal-silver { color: #cfd9ea; }
.chip .medal-bronze { color: #e0996a; }

/* ============================================================
   THEMED TABLE  (.ntable) — for pages with conditional columns
   (user profile personal-bests, per-level leaderboards, compare)
   ============================================================ */
.ntable-wrap { border: 1px solid var(--line); background: rgba(12,10,28,0.6); overflow-x: auto; }
table.ntable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.ntable thead th {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
  text-align: left; font-weight: 600; padding: calc(13px * var(--row-h)) 16px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
  background: rgba(10,8,22,0.96);
}
table.ntable tbody td {
  padding: calc(12px * var(--row-h)) 16px; border-bottom: 1px solid var(--line);
  color: var(--text-dim); vertical-align: middle;
}
table.ntable tbody tr { transition: background .14s; position: relative; }
table.ntable tbody tr:hover { background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 9%, transparent), transparent 45%); }
table.ntable tbody tr:last-child td { border-bottom: 0; }
table.ntable a { color: var(--text); font-weight: 600; }
table.ntable a:hover { color: var(--accent); }
table.ntable .num, table.ntable .time, table.ntable .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
table.ntable .time .ms { color: var(--text-faint); font-weight: 500; }
.cell-player { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cell-player img, .cell-ava {
  width: 26px; height: 26px; object-fit: cover; flex: none; background: var(--panel-2);
  border: 1px solid var(--line-2);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

/* rank medals (reused on multiple pages) */
.medal-gold   { color: var(--amber); font-weight: 700; }
.medal-silver { color: #cfd9ea; font-weight: 700; }
.medal-bronze { color: #e0996a; font-weight: 700; }

/* +WR delta + WR badge */
.delta { color: var(--text-faint); font-family: var(--mono); font-size: 13px; }
.badge {
  display: inline-flex; align-items: center; font-family: var(--mono); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.badge-wr { color: #06121a; background: var(--accent); box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 40%, transparent); }
.badge-pb { color: var(--lime); border: 1px solid color-mix(in oklab, var(--lime) 50%, transparent); background: color-mix(in oklab, var(--lime) 10%, transparent); }

/* ============================================================
   STAT CARDS reuse .stats/.stat from styles.css. Helpers below.
   ============================================================ */
.stat .num.txt { font-size: 30px; }          /* for text-valued stats (dates / medal name) */
.section-tight { padding: 28px 0; }

/* inline id pill + small buttons */
.id-pill {
  font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line-2); padding: 5px 10px;
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.btn.sm { font-size: 11px; padding: 9px 14px; }

/* legend / muted note */
.legend { color: var(--text-faint); font-size: 12.5px; letter-spacing: .03em; line-height: 1.6; }
.legend code { font-family: var(--mono); color: var(--text-dim); }

/* ============================================================
   GHOST REPLAY (level_scores)
   ============================================================ */
.svg-container {
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-1));
  padding: 16px; display: inline-block; max-width: 100%;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.svg-container svg { max-width: 100%; height: auto; display: block; }

/* section sub-heading inside content */
.sub-h {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: .01em; margin: 36px 0 18px;
}

/* ============================================================
   CUSTOM-LEVEL LIGHTBOX
   ============================================================ */
.level-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 40px;
  background: rgba(5,4,12,.86); backdrop-filter: blur(6px);
}
.level-lightbox.active { display: flex; }
.level-lightbox-inner { position: relative; max-width: 92vw; max-height: 88vh; }
.level-lightbox-inner img { max-width: 92vw; max-height: 82vh; border: 1px solid var(--line-2); background: #07060f; }
.level-lightbox-title { margin-top: 12px; text-align: center; font-family: var(--cond); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.level-lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 20px; line-height: 1;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.level-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   EDITOR — keep existing layout, nudge it into the wrap
   ============================================================ */
.ed-wrap-outer { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }

/* generic two-column compare layout */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }