/* Style layer over the original site. It only changes three things and leaves every shape, size,
   spacing, glass panel, hover effect and animation in site.css exactly as it was:
     1. Headline type: heavy, tight, uppercase, fading from white into mint.
     2. Faint grey checkerboard strip across the top of the page.
     3. Colors: the old purples, violets and navy tints become neutral glass with the dragon's mint as the accent.
        Gold/silver/bronze for the top 3 stay as they were.
   Selectors are scoped under #top (the page's <main>) so they beat the older layered rules without !important. */

:root{
 --st-bg:#0a0a0b;
 --st-ink:#f2f2f0;
 --st-dim:#8d8d93;
 --st-glass:#ffffff0a;
 --st-glass-2:#ffffff0d;
 --st-edge:#ffffff1c;
 --st-edge-hi:#ffffff33;
 --st-mint:#6af9bf;
 --st-mint-ink:#04140d;
 --st-check:#ffd45c;
 background:var(--st-bg);color:var(--st-ink)
}

/* 2. Checkerboard strip: big, faint grey squares across the top, strongest at the top left, fading out downward and to the right */
body{position:relative}
body::after{content:"";position:absolute;top:0;left:0;right:0;height:40px;pointer-events:none;opacity:.16;
 background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 0 0/16px 16px;
 -webkit-mask:linear-gradient(#000,transparent),linear-gradient(to right,#000 10%,transparent 90%);-webkit-mask-composite:source-in;
 mask:linear-gradient(#000,transparent),linear-gradient(to right,#000 10%,transparent 90%);mask-composite:intersect}

/* 3. Page glows: same drift as before, mint and a hint of blue instead of purple */
body::before{background:
 radial-gradient(ellipse 40% 36% at 82% 26%,#6af9bf1f,transparent 70%),
 radial-gradient(ellipse 36% 40% at 12% 74%,#7b8cff17,transparent 70%),
 radial-gradient(ellipse 30% 26% at 50% 105%,#6af9bf0d,transparent 70%)}
body ::selection{background:var(--st-mint);color:#000}

/* 1. Headline: one sentence, white fading into the dragon's mint toward the end */
body #top .hero h1,body #top .hero-copy h1{font-weight:900;letter-spacing:-.045em;line-height:.98;text-transform:uppercase}
body #top .hero .gradient{display:inline-block;-webkit-box-decoration-break:slice;box-decoration-break:slice;background:linear-gradient(115deg,var(--st-ink) 30%,var(--st-mint) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* 3. Colors only from here down: backgrounds, borders and text colors. */
body #top #leaderboard.column.active,body #top .commission-panel{background:var(--st-glass);border-color:var(--st-edge)}
body #top .vote-dots .dot{border-color:#ffffff40}
body #top .vote-dots .dot.on{background:var(--st-mint);border-color:var(--st-mint);box-shadow:0 0 8px #6af9bf66}

body #top input[type=search],body #top .catalog-search,body #top .shared-search .suggest-form input,body #top .sort-trigger,body #top .catalog-sort{background-color:var(--st-glass-2);border-color:var(--st-edge)}
body #top input[type=search]:focus,body #top .sort-trigger:focus-visible{border-color:#6af9bf80}
body #top .sort-trigger[aria-expanded=true]{border-color:var(--st-edge-hi);background-color:var(--st-glass-2)}
body #top .sort-options{background:#161618;border-color:var(--st-edge)}
body #top .sort-options button[aria-checked=true]{background:#ffffff12;color:var(--st-ink)}
body #top .sort-options button[aria-checked=true]::after{color:var(--st-mint)}
body #top .sort-options button:hover,body #top .sort-options button:focus-visible{background:#ffffff17}

body #top #leaderboard > .suggest .submit,body #top #send{background:var(--st-mint);color:var(--st-mint-ink)}
body #top #leaderboard > .suggest .submit:hover:not(:disabled){background:#8cfbd0}
body #top #leaderboard > .suggest .submit:disabled,body #top #send:disabled{background:var(--st-glass-2);color:#5f5f65}
body #top #leaderboard .vote,body #top #leaderboard .items .item .vote{background:var(--st-glass-2);color:var(--st-ink);border-color:var(--st-edge)}
body #top #leaderboard .vote:hover:not(:disabled){background:var(--st-mint);color:var(--st-mint-ink);border-color:var(--st-mint)}

body #top #leaderboard .leaderboard-heading .ranking-tabs{background:var(--st-glass-2);border-color:var(--st-edge)}
body #top #leaderboard .leaderboard-heading .ranking-tabs button{background:transparent;color:var(--st-dim)}
body #top #leaderboard .leaderboard-heading .ranking-tabs button[aria-pressed=true]{background:var(--st-ink);color:#0a0a0b}
body #top .catalog-filters button{background:var(--st-glass-2);border-color:var(--st-edge);color:#c9c9cf}
body #top .catalog-filters button:hover{border-color:var(--st-edge-hi);color:var(--st-ink)}
body #top .catalog-filters button[aria-pressed=true]{background:var(--st-ink);color:#0a0a0b;border-color:var(--st-ink)}

body #top #leaderboard .items .item,body #top .active .item{background:#ffffff08;border-color:#ffffff12}
body #top .active .item:hover,body #top #leaderboard .items .item:hover{background:#ffffff0f;border-color:var(--st-edge)}
body #top #leaderboard .items .item .fill{background:linear-gradient(90deg,#6af9bf2e,#6af9bf10)}
body #top #leaderboard .items .item.gold .fill{background:linear-gradient(90deg,#ffd88a38,#ffd88a12)}
body #top #leaderboard .items .item.silver .fill{background:linear-gradient(90deg,#e2e8ff30,#e2e8ff0f)}
body #top #leaderboard .items .item.bronze .fill{background:linear-gradient(90deg,#f0b48e33,#f0b48e10)}

body #top .more,body #top .completed-toggle{background:var(--st-glass-2);border-color:var(--st-edge);color:#c9c9cf}
body #top .more:hover,body #top .completed-toggle:hover{background:#ffffff12;border-color:var(--st-edge-hi);color:var(--st-ink)}
body #top .completed-links a:hover{color:var(--st-mint)}
body #top .supporter-tokens li,body #top .supporter-token{background:var(--st-glass-2);border-color:var(--st-edge)}

body #top a:focus-visible,body #top button:focus-visible{outline-color:var(--st-mint)}

/* ---------- Punk level 1: type ----------
   Section titles in the headline's heavy uppercase. */
body #top .catalog-heading,body #top .vote-title h2,body #top #supportersTitle{text-transform:uppercase;font-weight:900;letter-spacing:-.03em}

/* ---------- Tags ----------
   Flat yellow NEW tags. */
body #top .catalog-new{background:var(--st-check);color:#0a0a0a;border-radius:3px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
body #top #remaining{color:var(--st-ink)}

/* Compact request rows: each row is exactly the height of its Vote button (38px), with tighter spacing. */
body #top #leaderboard .items{gap:6px}
body #top #leaderboard .items .item{padding-top:0;padding-bottom:0;min-height:38px}
body #top #leaderboard .items .item .vote{min-height:38px;height:38px;padding-top:0;padding-bottom:0}

/* bigger dragon logo, top left */
body #top .brand-mark{width:40px;height:40px;border-radius:10px}
@media (max-width:680px){body #top .brand-mark{width:34px;height:34px}}
body #top .brand-mark{border-radius:0;background:none}