/* topservers.lol — minimalist monochrome (Vercel-inspired: shadow-as-border, Geist) */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #171717;
  --gray-600: #4d4d4d;
  --gray-500: #666666;
  --gray-400: #6e6e6e; /* WCAG AA at 12px on white (#22) */
  --gray-100: #ebebeb;
  --gray-50: #fafafa;
  --money: #16a34a;
  --gold: #b8860b;
  --ring: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --ring-strong: rgba(0, 0, 0, 0.16) 0px 0px 0px 1px;
  --lift: rgba(0, 0, 0, 0.04) 0px 2px 2px;
  --blue-bg: #ebf5ff;
  --blue-text: #0068d6;
  --focus: hsla(212, 100%, 48%, 1);
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.5 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; }

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; box-shadow: var(--ring);
  position: sticky; top: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
}
.brand { font-size: 17px; font-weight: 600; letter-spacing: -0.5px; }
.brand span { color: var(--gray-400); font-weight: 400; }
nav a {
  color: var(--gray-500); margin-left: 22px; text-decoration: none;
  font-size: 14px; font-weight: 500;
}
nav a:hover { color: var(--text); }
#theme-toggle {
  background: none; box-shadow: var(--ring); color: var(--gray-500);
  width: 30px; height: 30px; padding: 0; margin-left: 18px; border-radius: 8px;
  font-size: 14px; line-height: 1; vertical-align: middle;
}
#theme-toggle:hover { color: var(--text); background: var(--gray-50); }

main { max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
a { color: var(--text); }

.hero { text-align: center; padding: 24px 0 40px; }
.hero h1 {
  font-size: 44px; font-weight: 600; line-height: 1.08;
  letter-spacing: -2px; margin: 18px 0 14px;
}
.hero p { color: var(--gray-600); font-size: 17px; line-height: 1.65; max-width: 520px; margin: 0 auto; }
.stats {
  display: inline-block; color: var(--gray-500); font-size: 12.5px;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-feature-settings: "tnum";
}
.stats b { color: var(--text); font-weight: 500; }
.money { font-weight: 600; color: var(--money); } /* accent reserved for money moments (#19) */

.banner {
  background: var(--gray-50); box-shadow: var(--ring); padding: 12px 16px;
  border-radius: 10px; margin-bottom: 20px; font-size: 14px; color: var(--gray-600);
}
.banner.ok { box-shadow: rgba(0,104,214,.35) 0px 0px 0px 1px; }
.banner code { word-break: break-word; display: block; margin-top: 6px; } /* share snippet wraps on mobile (#23) */
.sharebtn {
  margin-top: 8px; padding: 4px 12px; font-size: 12px; width: auto;
  background: var(--bg); color: var(--text); box-shadow: var(--ring);
}
.sharebtn:hover { background: var(--gray-50); }

.submit {
  background: var(--bg); box-shadow: var(--ring), var(--lift);
  border-radius: 12px; padding: 28px; margin-bottom: 32px; text-align: center;
}
.submit h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.9px; margin-bottom: 16px; }
.form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
input {
  background: var(--bg); box-shadow: var(--ring); border: 0; color: var(--text);
  padding: 10px 14px; border-radius: 8px; font: inherit; font-size: 14.5px; min-width: 240px;
  transition: box-shadow .15s;
}
input:focus { outline: none; box-shadow: var(--ring-strong), 0 0 0 3px rgba(10,114,239,.15); }
#f-amount { min-width: 110px; }
.dollar { align-self: center; color: var(--gray-400); font-size: 15px; }
button {
  background: var(--text); border: 0; color: #fff; font: inherit; font-size: 14.5px;
  font-weight: 500; padding: 10px 18px; border-radius: 8px; cursor: pointer;
  transition: background .15s, transform .05s;
}
button:hover { background: #000; }
button:active { transform: scale(.98); }
.note { color: var(--gray-500); font-size: 12.5px; margin-top: 12px; }
.note.err { color: #d63030; }
.policy {
  color: var(--gray-500); font-size: 12.5px; line-height: 1.65; text-align: left;
  border-top: 1px solid var(--gray-100); margin: 16px auto 0; padding-top: 14px;
  max-width: 560px;
}
.policy b { color: var(--text); font-weight: 500; }
.pcard {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin-top: 16px; background: var(--gray-50); box-shadow: var(--ring);
  border-radius: 10px; padding: 14px; text-align: left; font-size: 14.5px;
}
.pcard img { border-radius: 8px; }

.board { display: flex; flex-direction: column; gap: 10px; }
.row { 
  display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) minmax(90px, auto) 172px; gap: 16px;
  align-items: center; background: var(--bg); box-shadow: var(--ring), var(--lift);
  border-radius: 12px; padding: 14px 18px; transition: box-shadow .15s;
}
.row:hover { box-shadow: var(--ring-strong), var(--lift); }
.row.podium { box-shadow: var(--ring-strong), var(--lift); } /* #2/#3 read above the pack (#18) */
.row.first {
  box-shadow: rgba(245,179,1,.5) 0px 0px 0px 1px, rgba(245,179,1,.10) 0px 4px 14px; /* gold ring — #1 is the product (#18) */
  background: linear-gradient(180deg, rgba(245,179,1,.06), transparent 70%), var(--bg);
}
.crown { color: var(--gold); display: block; margin: 0 auto 2px; }
.rank {
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-feature-settings: "tnum";
  font-size: 15px; font-weight: 500; color: var(--gray-400); text-align: center;
}
.row.first .rank { color: var(--text); }
.icon img, .noicon { border-radius: 8px; image-rendering: pixelated; box-shadow: var(--ring); }
.noicon {
  width: 40px; height: 40px; background: var(--gray-50); display: flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 17px;
  color: var(--gray-500);
}
.name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.2px; }
.motd {
  color: var(--gray-500); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;
}
.pitch { /* paid bidder voice — reads as quote, not data (#17b) */
  color: var(--gray-600); font-size: 13.5px; font-style: italic; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta { display: flex; gap: 14px; align-items: center; margin-top: 5px; font-size: 12.5px; color: var(--gray-400); }
.meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } /* (#16) */
.meta svg { vertical-align: -1px; margin-right: 4px; }
.copyip {
  background: none; color: var(--blue-text); padding: 0; font-weight: 500; font-size: 12.5px;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  white-space: nowrap; /* glyph never wraps onto its own line (#8) */
}
.copyip:hover { background: none; text-decoration: underline; }
.badge { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 9999px; vertical-align: 2px; margin-left: 4px; }
.badge.on { background: var(--blue-bg); color: var(--blue-text); }
.badge.off { background: var(--gray-50); color: var(--gray-400); box-shadow: var(--ring); }
.badge.seed { background: var(--gray-50); color: var(--gray-400); box-shadow: var(--ring); }
.players { text-align: right; }
.pnum {
  font-weight: 500; font-size: 14.5px;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-feature-settings: "tnum";
  white-space: nowrap; /* big player counts never wrap (#16) */
}
.pnum small { color: var(--gray-400); font-weight: 400; }
.pbar { height: 3px; background: var(--gray-100); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.pbar div { height: 100%; background: var(--text); transition: width .8s ease; } /* grow-in (#21) */
.bid { display: flex; flex-direction: column; align-items: stretch; text-align: right; }
.paid {
  font-weight: 500; font-size: 16px;
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-feature-settings: "tnum";
}
.clicks { color: var(--gray-400); font-size: 12px; margin: 2px 0 8px; }
.claim {
  font-size: 12.5px; font-weight: 500; padding: 8px 12px; width: 100%;
  background: var(--bg); color: var(--text); box-shadow: var(--ring); border-radius: 8px;
  white-space: nowrap;
}
.claim:hover { background: var(--gray-50); box-shadow: var(--ring-strong); }
.empty {
  text-align: center; color: var(--gray-500); padding: 48px 0;
  box-shadow: var(--ring); border-radius: 12px; background: var(--gray-50);
}
.empty .abtn { /* CTA in the empty state (#24) */
  display: inline-block; margin-top: 14px; background: var(--text); color: var(--bg);
  font-weight: 500; font-size: 14.5px; padding: 10px 18px; border-radius: 8px; text-decoration: none;
}

.rules { max-width: 620px; }
.rules h1 { margin: 8px 0 16px; font-size: 32px; font-weight: 600; letter-spacing: -1.3px; }
.rules h2 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.4px; }
.rules p { color: var(--gray-600); }
.rules ul { padding-left: 20px; color: var(--gray-600); font-size: 15px; }
.rules li { margin: 7px 0; }
.rules b { color: var(--text); font-weight: 600; }

footer {
  box-shadow: var(--ring); padding: 28px 20px; text-align: center;
  color: var(--gray-400); font-size: 12.5px;
}
footer p { margin: 4px 0; }
footer a { color: var(--gray-500); }

@media (max-width: 640px) {
  main { padding: 32px 14px 56px; }
  .hero { padding: 12px 0 28px; }
  .hero h1 { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -1.1px; }
  .hero p { font-size: 15px; }
  .stats { font-size: 11.5px; }
  .submit { padding: 20px 16px; }
  .form { flex-direction: column; }
  .form input, .form button { width: 100%; min-width: 0; }
  .dollar { display: none; }
  .row { grid-template-columns: 34px 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .players { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; text-align: left; }
  .players .pbar { flex: 1; margin-top: 0; }
  .bid { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; gap: 12px; flex-wrap: wrap; }
  .bid .clicks { margin: 0; }
  .bid .claim { width: auto; margin-left: auto; }
}
@media (max-width: 420px) {
  .bid .claim { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { /* motion is opt-out (#21) */
  .pbar div { transition: none; }
}

/* ---------- dark mode ---------- */
/* manual override wins; otherwise follow the OS */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark; /* native controls follow the theme (#20) */
  --bg: #0a0a0a; --text: #ededed;
  --gray-600: #a1a1a1; --gray-500: #8f8f8f; --gray-400: #6b6b6b;
  --gray-100: #262626; --gray-50: #161616;
  --money: #4ade80;
  --gold: #f5b301;
  --ring: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px;
  --ring-strong: rgba(255, 255, 255, 0.28) 0px 0px 0px 1px;
  --lift: rgba(0, 0, 0, 0) 0px 0px 0px;
  --blue-bg: rgba(0, 104, 214, .18); --blue-text: #52a8ff;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --text: #ededed;
  --gray-600: #a1a1a1; --gray-500: #8f8f8f; --gray-400: #6b6b6b;
  --gray-100: #262626; --gray-50: #161616;
  --money: #4ade80;
  --gold: #f5b301;
  --ring: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px;
  --ring-strong: rgba(255, 255, 255, 0.28) 0px 0px 0px 1px;
  --lift: rgba(0, 0, 0, 0) 0px 0px 0px;
  --blue-bg: rgba(0, 104, 214, .18); --blue-text: #52a8ff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  header { background: rgba(10, 10, 10, .85); }
  .row.first { box-shadow: rgba(245,179,1,.55) 0px 0px 0px 1px, rgba(245,179,1,.12) 0px 4px 14px; }
  button { background: #ededed; color: #171717; }
  button:hover { background: #ffffff; }
  .copyip, #theme-toggle { background: none; }
  .banner.ok { box-shadow: rgba(82,168,255,.45) 0px 0px 0px 1px; }
  .note.err { color: #ff7b7b; }
  input:focus { box-shadow: var(--ring-strong), 0 0 0 3px rgba(82,168,239,.2); }
} }
:root[data-theme="dark"] header { background: rgba(10, 10, 10, .85); }
:root[data-theme="dark"] .row.first { box-shadow: rgba(245,179,1,.55) 0px 0px 0px 1px, rgba(245,179,1,.12) 0px 4px 14px; }
:root[data-theme="dark"] button { background: #ededed; color: #171717; }
:root[data-theme="dark"] button:hover { background: #ffffff; }
:root[data-theme="dark"] .copyip, :root[data-theme="dark"] #theme-toggle { background: none; }
:root[data-theme="dark"] .banner.ok { box-shadow: rgba(82,168,255,.45) 0px 0px 0px 1px; }
:root[data-theme="dark"] .note.err { color: #ff7b7b; }
:root[data-theme="dark"] input:focus { box-shadow: var(--ring-strong), 0 0 0 3px rgba(82,168,239,.2); }