:root {
  --bg: #0a0b0d;
  --panel: #111317;
  --panel2: #161920;
  --line: #20242c;
  --text: #e7e9ec;
  --muted: #858d9a;
  --dim: #5b6270;
  --green: #3ddc84;
  --amber: #f2b84b;
  --red: #ff6b6b;
  --blue: #6aa8ff;
  --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
.num, td.n { font-variant-numeric: tabular-nums; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 12px 24px; background: rgba(10,11,13,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: .14em; font-size: 13px; }
nav { display: flex; gap: 4px; }
nav a { padding: 5px 12px; border-radius: 7px; color: var(--muted); font-weight: 600; }
nav a.on { background: var(--panel2); color: var(--text); }
.span { margin-left: auto; color: var(--muted); font-size: 12px; }
select, input, button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
button { cursor: pointer; font-weight: 600; }
button:hover { border-color: #39404c; }

main { max-width: 1240px; margin: 0 auto; padding: 18px 24px 80px; }
section { margin-top: 30px; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h2 small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two.inner { gap: 18px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* name check */
.check form { display: flex; gap: 8px; }
.check input { flex: 1; font-size: 16px; padding: 12px 14px; background: var(--panel); }
.check button { padding: 0 20px; background: var(--text); color: var(--bg); border: 0; }
#checkOut:empty { display: none; }
#checkOut { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.verdict { font-size: 15px; font-weight: 700; }
.verdict.free { color: var(--green); }
.verdict.tried { color: var(--blue); }
.verdict.used { color: var(--amber); }
.verdict.taken { color: var(--red); }
.check .coins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* build tiles */
.builds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .builds { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.tile .k { color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
.tile .v { font-size: 26px; font-weight: 750; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
.tag.simple { color: var(--green); }
.tag.team { color: var(--amber); }

/* shared words */
.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.word { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wtop { display: flex; align-items: baseline; gap: 10px; }
.wtop .w { font-size: 18px; font-weight: 750; }
.wtop .wstat { color: var(--muted); font-size: 12.5px; }
.wtop .wstat b { color: var(--text); }
.wtop .lift { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.wtop .lift.up { color: var(--green); }
.ex { color: #c9cdd3; font-size: 13px; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex span { color: var(--muted); font-style: normal; }
.wfoot { color: var(--dim); font-size: 11.5px; }

/* tables */
.table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th.n, td.n { text-align: right; }
tr.theme { cursor: pointer; }
tr.theme:hover td { background: var(--panel2); }
td.name { font-weight: 650; text-transform: capitalize; white-space: nowrap; }
.rate { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rate i { display: block; height: 6px; border-radius: 3px; background: var(--green); opacity: .85; }
.lift.up { color: var(--green); }
.lift.down { color: var(--red); }
.crowd { color: var(--muted); }
.crowd.hot { color: var(--amber); }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.chip img, .chip .ph { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #222; }
.chip b { font-weight: 650; }
.chip span { color: var(--muted); }
tr.more td { background: #0d0f12; padding: 10px 12px 14px; }

/* open cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card .top { display: flex; align-items: center; gap: 8px; }
.card .sym { font-weight: 750; }
.card .who { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.card .text { color: #c9cdd3; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.card .facts { display: flex; gap: 12px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.card .facts b { color: var(--text); font-weight: 650; }
.pill { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; }
.pill.open { background: rgba(61,220,132,.13); color: var(--green); }
.pill.running { background: rgba(106,168,255,.13); color: var(--blue); }
.pill.taken { background: rgba(255,107,107,.13); color: var(--red); }
.card.dim { opacity: .62; }

/* lists */
.list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row img, .row .ph { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #1b1f26; }
.row .t { min-width: 0; }
.row .t b { font-weight: 700; }
.row .t .d { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .r .s { color: var(--muted); font-size: 12px; }
.links a { color: var(--muted); font-size: 12px; margin-left: 8px; }
.links a:hover { color: var(--blue); }
.empty { padding: 18px; color: var(--muted); }
.note { color: var(--muted); font-size: 12.5px; margin: -4px 0 10px; }

/* ideas */
button.mini { margin-left: auto; padding: 4px 12px; font-size: 12.5px; }
button.mini:disabled { opacity: .55; cursor: default; }
.read:empty { display: none; }
.read { color: var(--text); font-size: 14px; margin: -2px 0 12px; max-width: 900px; }
.ideaTabs { display: flex; gap: 4px; margin-bottom: 12px; }
.ideaTabs button { padding: 4px 12px; font-size: 12.5px; color: var(--muted); background: transparent; }
.ideaTabs button.on { background: var(--panel2); color: var(--text); }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.idea { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.itop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.idea .sym { font-size: 17px; font-weight: 800; }
.iname { color: var(--muted); flex: 1; min-width: 0; }
.grade { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--panel2); }
.g-strong { color: var(--bg); background: var(--green); }
.g-fits { color: var(--green); }
.g-long-shot { color: var(--dim); }
.bit { font-weight: 600; }
.why { color: #c3c8d0; font-size: 13.5px; }
.launch { font-size: 13px; color: #c3c8d0; border-left: 2px solid var(--line); padding-left: 10px; }
.launch b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.race, .off { font-size: 12px; color: var(--muted); }
.race { color: var(--amber); }
.notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.notes span { font-size: 11.5px; padding: 2px 7px; border-radius: 5px; background: var(--panel2); color: var(--muted); }
.notes .good { color: var(--green); }
.notes .bad { color: var(--red); }
.dropped:empty { display: none; }
.dropped { margin-top: 10px; font-size: 12px; color: var(--dim); }
@media (max-width: 520px) { .ideas { grid-template-columns: 1fr; } }

/* why winners ran */
.metas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.metas button { padding: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--panel); border-radius: 999px; }
.metas button b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }
.metas button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.metas button.on b { color: var(--bg); }
#storySort { margin-left: auto; padding: 3px 8px; font-size: 12.5px; }
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.story { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.story.low { opacity: .6; }
.stop { display: flex; align-items: center; gap: 9px; }
.stop img, .stop .ph { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: #1b1f26; flex: none; }
.stop .sym { font-size: 16px; font-weight: 800; }
.stop .nm { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop .pk { margin-left: auto; text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stop .pk div { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.first { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; background: rgba(242,184,75,.15); color: var(--amber); }
.swhat { font-weight: 650; }
.splat { color: var(--blue); font-size: 12.5px; }
.shook { font-size: 13px; color: #d7dbe0; border-left: 2px solid var(--amber); padding-left: 10px; }
.swhy { color: #c3c8d0; font-size: 13.5px; }
.sev { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.sev div { font-size: 12.5px; color: #b9bfc8; background: #0d0f12; border-radius: 7px; padding: 6px 9px; word-break: break-word; }
.sev span { color: var(--dim); font-size: 11.5px; margin-right: 6px; white-space: nowrap; }
.sfoot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: 11.5px; }
.sfoot .t { padding: 1px 7px; border-radius: 5px; background: var(--panel2); color: var(--muted); }
.sfoot .links { margin-left: auto; }
@media (max-width: 520px) { .stories { grid-template-columns: 1fr; } }

/* plays */
h3.sub { margin: 22px 0 10px; font-size: 14px; font-weight: 700; }
h3.sub small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .facts3 { grid-template-columns: 1fr; } }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.fact .fk { color: var(--muted); font-size: 12px; font-weight: 600; }
.fact .fv { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fact .fs { color: #c9cdd3; font-size: 13px; }
.fact .fs b { color: var(--text); }
.fact .fx { color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .news { grid-template-columns: 1fr; } }
.pad { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phead .pstat { color: var(--muted); font-size: 12px; margin-left: auto; }
.np { border-top: 1px solid var(--line); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.np .ntext { color: #c9cdd3; font-size: 13px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.np .nfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.pill.used { background: rgba(242,184,75,.13); color: var(--amber); }
.pill a { color: inherit; text-decoration: underline; }

/* inventions */
#invSec h2 { display: flex; align-items: baseline; gap: 10px; }
.invs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.inv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.itop { display: flex; align-items: baseline; gap: 10px; }
.isym { font-size: 19px; font-weight: 800; }
.iname { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itot { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--green); font-weight: 700; font-size: 13px; white-space: nowrap; }
.ipitch { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ibet { color: #c9cdd3; font-size: 13px; }
.judges { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.jv { display: grid; grid-template-columns: 104px 22px 1fr; gap: 8px; font-size: 12.5px; align-items: baseline; }
.jn { color: var(--muted); }
.js { font-weight: 800; font-variant-numeric: tabular-nums; }
.jv.yes .js { color: var(--green); }
.jv.no .js { color: var(--red); }
.jt { color: #c9cdd3; }
.inv details summary, .invmore summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.inv details p { font-size: 13px; color: #c9cdd3; margin: 6px 0; line-height: 1.45; }
.iwatch { color: var(--amber) !important; }
.iprog { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.invmore { margin-top: 12px; }
.invmore[open] summary { margin-bottom: 8px; }
.krow { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.krow:last-child { border-bottom: 0; }
.krow .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.krow .kwhy { color: #b58b8b; }
.kyes { color: var(--muted); font-size: 12px; margin-left: 6px; }
#invMemo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; font-size: 13px; }
#invMemo h4 { margin: 12px 0 6px; font-size: 13px; }
#invMemo h4:first-child { margin-top: 0; }
#invMemo ul { margin: 4px 0 8px 18px; padding: 0; }
.mrow { margin: 5px 0; line-height: 1.45; }
.mrow .d { color: var(--muted); font-size: 12px; }
