/* SPIDERVERSES HQ DISCORD: a page stuck between dimensions, glitching the way the films do
   (print misregistration, colour-block shards, flashes of other universes, animated on twos).
   --g is the glitch level: 1 = fully broken (0 points), 0 = stable (goal reached). app.js sets it every frame. */
:root {
  --g: 1; --bg: #0a0812; --panel: #13101d; --ink: #000; --paper: #f4efe2; --mute: #9a93ab;
  --red: #e3262f; --cyan: #2ee6ff; --mag: #ff2bd6; --yellow: #ffe14d; --blurple: #5865f2;
  --cx: -3px; --cy: 0px; --mx: 3px; --my: 1px; --yx: 1px; --yy: -2px;
  --display: 'Bangers', Impact, sans-serif; --marker: 'Permanent Marker', cursive; --mono: 'Space Mono', monospace; --body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; }
body { margin: 0; min-height: 100vh; color: var(--paper); font: 400 16px/1.55 var(--body); overflow-x: clip;
  background: radial-gradient(900px 520px at 50% 0, #3b0d3a 0, transparent 70%), radial-gradient(700px 500px at 85% 30%, #08324a 0, transparent 70%), var(--bg); }
a { color: var(--cyan); }
.ic { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }

/* ---------- the print: cyan, magenta and yellow dot screens that slip out of register ---------- */
.dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(.28 + var(--g) * .3);
  background:
    radial-gradient(circle, #2ee6ff 1px, transparent 1.7px) calc(var(--g) * 3px) 0 / 9px 9px,
    radial-gradient(circle, #ff2bd6 1px, transparent 1.7px) calc(var(--g) * -3px) calc(var(--g) * 2px) / 9px 9px,
    radial-gradient(circle, #ffe14d 1px, transparent 1.7px) 4px 4px / 9px 9px;
  -webkit-mask: radial-gradient(120% 70% at 50% 0, #000 0, transparent 75%); mask: radial-gradient(120% 70% at 50% 0, #000 0, transparent 75%); }
/* a flash of another universe */
.wash { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; }
body.u-gwen .wash { opacity: .55; background: linear-gradient(160deg, #ff9fd2, #7fe3f2 55%, #fff4c2); mix-blend-mode: color; }
body.u-punk .wash { opacity: .5; background: radial-gradient(circle, #000 1.2px, transparent 1.6px) 0 0 / 6px 6px, #e3262f; mix-blend-mode: multiply; }
body.u-2099 .wash { opacity: .45; background: linear-gradient(180deg, #1b3cff, #ff2bd6); mix-blend-mode: hard-light; }
body.u-noir .stage, body.u-noir .top { filter: grayscale(1) contrast(1.9) brightness(.95); }
body.u-punk .stage { filter: contrast(1.5) saturate(1.8); }
body.u-2099 .stage { filter: hue-rotate(150deg) saturate(1.6); }
body.u-gwen .stage { filter: saturate(.75) brightness(1.08); }
body.jump .stage { translate: var(--jx, 0) 0; }
.earth { position: fixed; z-index: 47; display: none; font: 400 22px/1 var(--display); letter-spacing: .06em; color: #000; background: var(--yellow); border: 3px solid #000; padding: 6px 10px 3px; box-shadow: 4px 4px 0 #000; rotate: -3deg; pointer-events: none; }
body[class*="u-"] .earth { display: block; }

/* ---------- glitch shards: blocks of colour, pixels, dots and stripes ---------- */
.shards { position: fixed; inset: 0; z-index: 46; pointer-events: none; overflow: hidden; }
.shards i { position: absolute; display: block; }
.shards .s-blk { mix-blend-mode: difference; }
.shards .s-pix { background: conic-gradient(var(--a) 25%, transparent 0 50%, var(--a) 0 75%, transparent 0) 0 0 / 8px 8px; mix-blend-mode: screen; }
.shards .s-dot { background: radial-gradient(circle, var(--a) 1.6px, transparent 2.2px) 0 0 / 6px 6px; }
.shards .s-str { background: repeating-linear-gradient(90deg, var(--a) 0 3px, transparent 3px 7px); mix-blend-mode: screen; }
.shards .s-cut { background: var(--a); clip-path: polygon(0 0, 100% 18%, 86% 100%, 6% 72%); mix-blend-mode: hard-light; }

/* ---------- masthead ---------- */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #0a0812e6; backdrop-filter: blur(6px); border-bottom: 3px solid #000; box-shadow: 0 3px 0 #ff2bd655; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand .mark { display: inline-flex; color: var(--red); filter: drop-shadow(2px 2px 0 #000); } .brand .mark .ic { width: 30px; height: 30px; }
.brand .wm { font: 400 28px/1 var(--display); letter-spacing: .05em; text-shadow: calc(var(--cx) * .6) 0 var(--cyan), calc(var(--mx) * .6) 0 var(--mag); }
.brand b { font: 400 15px/1 var(--display); letter-spacing: .14em; color: #000; background: var(--yellow); padding: 4px 7px 2px; rotate: -3deg; border: 2px solid #000; }
.status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--mono); letter-spacing: .16em; color: var(--mute); }
.status i { width: 10px; height: 10px; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1s steps(2) infinite; }
.status.open i { background: #3eff9b; box-shadow: 0 0 10px #3eff9b; animation: none; }

.stage { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 50px 22px 40px; display: grid; gap: 60px; }

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; display: grid; justify-items: center; gap: 16px; }
/* the collider: rings that spin faster the more broken things are */
.rings { position: absolute; z-index: -1; left: 50%; top: 130px; width: min(820px, 96vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: calc(.25 + var(--g) * .45);
  background: repeating-radial-gradient(circle, transparent 0 34px, #ff2bd655 34px 37px, transparent 37px 62px, #2ee6ff44 62px 64px);
  -webkit-mask: conic-gradient(from 0deg, #000 0 22%, transparent 0 30%, #000 0 61%, transparent 0 70%, #000 0 88%, transparent 0); mask: conic-gradient(from 0deg, #000 0 22%, transparent 0 30%, #000 0 61%, transparent 0 70%, #000 0 88%, transparent 0);
  animation: spin calc(40s - var(--g) * 30s) linear infinite; }
.cap { font: 700 12px var(--mono); letter-spacing: .22em; color: #000; background: var(--yellow); border: 3px solid #000; padding: 6px 12px 5px; box-shadow: 4px 4px 0 #000; rotate: -2deg; }

/* the title, printed four times (cyan, magenta, yellow, black) and knocked out of register */
.title { position: relative; display: grid; margin: 4px 0 0; font: 400 clamp(64px, 12.5vw, 156px)/.86 var(--display); letter-spacing: .02em; }
.title .ly { grid-area: 1 / 1; white-space: pre; }
.title .c { color: var(--cyan); translate: var(--cx) var(--cy); mix-blend-mode: screen; }
.title .m { color: var(--mag); translate: var(--mx) var(--my); mix-blend-mode: screen; }
.title .y { color: var(--yellow); translate: var(--yx) var(--yy); opacity: calc(var(--g) * .9); mix-blend-mode: screen; }
.title .k { color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; text-shadow: 6px 6px 0 #000; }
.title.cut .k { clip-path: inset(var(--t1) 0 var(--t2) 0); translate: var(--tx) 0; }
.title.cut .c { clip-path: inset(var(--t2) 0 var(--t1) 0); }
.lede { max-width: 640px; margin: 0; color: #d9d3e6; font-size: 18px; }

/* the meter, a comic panel */
.panel { background: var(--panel); border: 3px solid #000; box-shadow: 7px 7px 0 #000, 7px 7px 0 2px var(--mag); }
.meter { width: min(740px, 100%); margin-top: 18px; padding: 18px 20px 14px; text-align: left; }
.nums { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.now { font: 400 clamp(56px, 9vw, 96px)/1 var(--display); letter-spacing: .02em; color: var(--yellow); -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  text-shadow: calc(var(--cx) * .8) 0 var(--cyan), calc(var(--mx) * .8) 0 var(--mag), 5px 5px 0 #000; }
.of { font: 700 13px var(--mono); letter-spacing: .14em; color: var(--mute); }
.pct { margin-left: auto; font: 400 34px/1 var(--display); color: #fff; letter-spacing: .04em; }
.bar { position: relative; height: 30px; margin-top: 12px; background: #07060c; border: 3px solid #000; outline: 1px solid #ffffff22; overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
  background: radial-gradient(circle, #00000055 1.2px, transparent 1.7px) 0 0 / 6px 6px, linear-gradient(90deg, var(--red), var(--mag) 55%, var(--cyan)); box-shadow: 0 0 22px #ff2bd677; }
.bar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #000 calc(10% - 2px) 10%); }
.sub { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font: 700 12px var(--mono); color: var(--mute); letter-spacing: .06em; }
.sub #todayPts { color: #3eff9b; }

.cta { margin-top: 20px; }
.dbtn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px 13px; font: 400 26px/1 var(--display); letter-spacing: .06em; color: #fff; text-decoration: none; background: var(--blurple); border: 3px solid #000; box-shadow: 6px 6px 0 #000; }
.dbtn svg { width: 30px; height: 30px; }
.dbtn.locked { background: repeating-linear-gradient(-45deg, #1a1626 0 12px, #14111e 12px 24px); color: var(--mute); box-shadow: 6px 6px 0 #000; cursor: not-allowed; }
.dbtn.locked svg { opacity: .55; }
a.dbtn:hover { translate: -2px -2px; box-shadow: 8px 8px 0 #000; }

/* ---------- sections ---------- */
.head { display: inline-block; margin: 0 0 8px; font: 400 34px/1 var(--display); letter-spacing: .05em; color: #000; background: var(--yellow); border: 3px solid #000; padding: 7px 14px 3px; box-shadow: 5px 5px 0 #000; rotate: -1deg; }
.note { margin: 10px 0 18px; color: var(--mute); }

.chans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.chans li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border: 3px solid #000; box-shadow: 4px 4px 0 #000; font: 700 15px var(--mono); }
.chans li .hash { font: 400 24px/1 var(--display); color: var(--mute); }
.chans li small { margin-left: auto; font-size: 11px; color: var(--mute); white-space: nowrap; }
.chans li.lock { color: #6f6880; background: repeating-linear-gradient(90deg, #13101d 0 6px, #171324 6px 12px); }
.chans li.open { box-shadow: 4px 4px 0 #000, 4px 4px 0 2px var(--cyan); } .chans li.open .hash { color: var(--cyan); } .chans li.open small { color: #3eff9b; }

.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.way { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; background: var(--panel); border: 3px solid #000; box-shadow: 5px 5px 0 #000; color: var(--paper); text-decoration: none; transition: translate .1s, box-shadow .1s; }
.way::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--mag)); }
.way:nth-child(3n+2) { --k: var(--cyan); } .way:nth-child(3n) { --k: var(--yellow); }
a.way:hover { translate: -2px -2px; box-shadow: 7px 7px 0 #000, 7px 7px 0 2px var(--k, var(--mag)); }
.way .pts { font: 400 38px/1 var(--display); letter-spacing: .03em; color: var(--yellow); -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
.way .pts small { font-size: 18px; color: var(--mute); -webkit-text-stroke: 0; text-shadow: none; }
.way b { font-weight: 800; font-size: 16px; }
.way span { color: var(--mute); font-size: 14px; }
.way .tag { position: absolute; top: 14px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font: 700 10px var(--mono); letter-spacing: .14em; color: var(--mute); }
.way .tag svg { width: 15px; height: 15px; color: #fff; }
.fine { margin: 20px 0 0; font-size: 13px; color: var(--mute); max-width: 860px; }

.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.feed, .top10 { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.feed li, .top10 li { background: var(--panel); border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; }
.feed .p { font: 400 21px/1 var(--display); color: #3eff9b; letter-spacing: .03em; min-width: 62px; }
.feed .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .l a { color: var(--paper); }
.feed time { font: 700 11px var(--mono); color: var(--mute); }
.feed .empty, .top10 .empty { display: block; padding: 12px; color: var(--mute); background: none; border-style: dashed; box-shadow: none; }
.top10 li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; }
.top10 .r { font: 400 24px/1 var(--display); color: var(--mute); text-align: center; }
.top10 li:nth-child(1) .r { color: var(--yellow); } .top10 li:nth-child(2) .r { color: #c9cbd3; } .top10 li:nth-child(3) .r { color: #d08a4a; }
.top10 .n { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10 .v { font: 700 13px var(--mono); color: var(--yellow); }

.foot { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 22px 22px 36px; border-top: 3px solid #000; font-size: 13px; color: var(--mute); }
.foot .more { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.foot .more b { font: 400 18px var(--display); letter-spacing: .05em; color: #fff; }
.foot a { color: #9fb4ff; }

/* dev.discord preview badge */
.pv { position: fixed; z-index: 60; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: var(--yellow); color: #000; border: 3px solid #000; box-shadow: 5px 5px 0 #000; font: 700 12px var(--mono); white-space: nowrap; pointer-events: none; }
.pv b { font: 400 20px/1 var(--display); letter-spacing: .06em; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 760px) {
  .top { padding: 10px 16px; } .brand .wm { font-size: 22px; } .status { font-size: 10px; letter-spacing: .1em; }
  .stage { padding: 34px 16px 30px; gap: 46px; }
  .two { grid-template-columns: 1fr; }
  .lede { font-size: 16px; } .head { font-size: 28px; }
  .title .k { -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; }
  .title { font-size: 19vw; line-height: .9; } .title .ly { white-space: pre-wrap; }
  .dbtn { font-size: 21px; padding: 14px 18px 11px; }
  .pv span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rings, .status i { animation: none; } .bar span { transition: none; } }