/* Nixfred.com HQ. Desktop first: sized in rem, and the root font scales with the viewport, so the
   same layout is crisp at 1440p and scales cleanly to 4K. No page scroll on desktop; only the lists
   scroll, in place. Phone is one responsive column. */
:root {
  --room: #05070d;
  --panel: rgba(8, 15, 27, 0.86);
  --ink: #dbe7f0;
  --dim: #8aa0b4;
  --mint: #7ff9bc;
  --teal: #0c9793;
  --deep: #085f6c;
  --cyan: #22d3ee;
  --magenta: #e879f9;
  --orange: #ff9f1c;
  --red: #ff6b86;
  --line: rgba(34, 211, 238, 0.28);
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  /* 16px at 1920 wide, about 19px at 2560, about 24px at 3840 */
  font-size: clamp(14px, calc(8px + 0.42vw), 32px);
  background: var(--room);
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--ink);
  font-family: var(--mono);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(12, 151, 147, 0.16), transparent 55%),
    radial-gradient(80% 70% at 100% 100%, rgba(232, 121, 249, 0.07), transparent 60%),
    var(--room);
  overflow: hidden;
}

/* ---------------------------------------------------------------- header */
.top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 20, 30, 0.9), rgba(5, 7, 13, 0.6));
  box-shadow: 0 0.2rem 1.6rem rgba(12, 151, 147, 0.12);
}

/* The hexagon is the brand master, untouched. The glow is only a shadow around it. */
.logo {
  width: 2.6rem;
  height: 2.6rem;
  filter: drop-shadow(0 0 0.45rem rgba(127, 249, 188, 0.65));
}

h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--mint);
  text-shadow: 0 0 0.5rem rgba(127, 249, 188, 0.75), 0 0 1.6rem rgba(34, 211, 238, 0.45);
}

.tag { margin: 0 0 0 0.2rem; color: var(--dim); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }

.chips { margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.chip { padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; color: var(--dim); background: rgba(8, 15, 27, 0.7); }
.chip b { color: var(--mint); font-size: 1rem; }
.chip.link::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--dim); }
.chip.link.up { color: var(--mint); }
.chip.link.up::before { background: var(--mint); box-shadow: 0 0 0.4rem var(--mint); }
.chip.link.down { color: var(--red); border-color: rgba(255, 107, 134, 0.5); }
.chip.link.down::before { background: var(--red); box-shadow: 0 0 0.4rem var(--red); }

/* ---------------------------------------------------------------- layout: floor large, panels at the side */
.hq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 40rem);
  gap: 0.8rem;
  padding: 0.8rem;
  min-height: 0;
}

.floor {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: radial-gradient(100% 80% at 50% 30%, rgba(12, 151, 147, 0.1), rgba(5, 7, 13, 0.9));
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.6), 0 0 2rem rgba(12, 151, 147, 0.12);
  overflow: hidden;
}
#floor { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.side {
  display: grid;
  grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: 0.8rem;
  min-height: 0;
  min-width: 0;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.6rem 0.75rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--panel);
  box-shadow: 0 0 1.4rem rgba(12, 151, 147, 0.1);
}
.card h2 {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  text-shadow: 0 0 0.5rem rgba(127, 249, 188, 0.5);
}
.card h2 small { color: var(--dim); letter-spacing: 0.04em; font-weight: 400; margin-left: 0.4rem; }
.brk h2 { color: var(--magenta); text-shadow: 0 0 0.5rem rgba(232, 121, 249, 0.55); }

/* the lists are the only thing that scrolls, in place */
.list { list-style: none; margin: 0; padding: 0 0.2rem 0 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--deep) transparent; }

.row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.28rem 0.15rem; border-bottom: 1px solid rgba(34, 211, 238, 0.08); }
.row .av { width: 2rem; height: 2rem; border-radius: 0.3rem; background: rgba(12, 151, 147, 0.15); }
.row .who { min-width: 0; }
.row .nm { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { display: block; font-size: 0.7rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .st { font-size: 0.7rem; color: var(--c, var(--dim)); text-align: right; white-space: nowrap; }
.row .st::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; background: var(--c, var(--dim)); box-shadow: 0 0 0.45rem var(--c, transparent); }
.row.loud { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 80%); box-shadow: inset 0.18rem 0 0 var(--c); }
.row.loud .nm { color: #fff; }
.row .flame { color: var(--orange); font-size: 0.7rem; margin-left: 0.35rem; }
.compact .row { grid-template-columns: 1.6rem minmax(0, 1fr) auto; padding: 0.2rem 0.15rem; }
.compact .row .av { width: 1.6rem; height: 1.6rem; opacity: 0.85; }
.compact .row .st::before { display: none; }

.ph { object-fit: contain; }

.s-working { --c: #7ff9bc; } .s-in_terminal { --c: #22d3ee; } .s-browsing { --c: #60a5fa; } .s-thinking { --c: #c4b5fd; }
.s-waiting { --c: #f5c542; } .s-needs_you { --c: #ff9f1c; } .s-error { --c: #ff6b86; } .s-done { --c: #bef264; } .s-idle { --c: #94a3b8; }

.empty { color: var(--dim); font-size: 0.75rem; padding: 0.4rem 0.15rem; }

/* ---------------------------------------------------------------- leaderboard */
.slot { margin-bottom: 0.5rem; }
.slot h3 { margin: 0 0 0.25rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.champ { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.3rem 0.4rem; border: 1px solid rgba(127, 249, 188, 0.4); border-radius: 0.45rem; background: linear-gradient(90deg, rgba(127, 249, 188, 0.1), transparent); }
.champ .av { width: 2.6rem; height: 2.6rem; border-radius: 0.35rem; box-shadow: 0 0 0.9rem rgba(127, 249, 188, 0.4); }
.champ .nm { display: block; font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ .sub { display: block; font-size: 0.7rem; color: var(--mint); }
.runners { margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.72rem; color: var(--dim); }
.runners li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.08rem 0.4rem; }
.runners li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nobody { font-size: 0.75rem; color: var(--dim); padding: 0.2rem 0.4rem; }
.statline { margin: 0.2rem 0 0; padding-top: 0.4rem; border-top: 1px solid rgba(34, 211, 238, 0.12); font-size: 0.72rem; color: var(--dim); }
.statline b { color: var(--mint); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- phone: one responsive column, floor on top */
@media (max-width: 899px) {
  html { font-size: 15px; }
  body { height: auto; min-height: 100dvh; overflow: auto; display: block; }
  .top { flex-wrap: wrap; gap: 0.5rem 0.7rem; padding: 0.5rem 0.8rem; }
  h1 { font-size: 1.3rem; }
  .tag { display: none; }
  .chips { margin: 0; width: 100%; justify-content: flex-start; }
  .hq { display: block; padding: 0.6rem; }
  .floor { height: 62vw; min-height: 17rem; margin-bottom: 0.7rem; }
  .side { display: flex; flex-direction: column; gap: 0.7rem; }
  .list { max-height: 22rem; }
}