/* SPIDERVERSES QUIZ: a comic page with a pop quiz in it. Same family as daily / rank / draft / cards / radio. */
:root {
  --paper: #f3ecda; --paper2: #e9e0c8; --card: #fffaf0; --ink: #141210; --red: #e3262f; --cyan: #1fb7d6; --yellow: #ffe14d; --blue: #2b59c3; --pink: #ff2bd6; --good: #23a455; --mute: #6d6556;
  --display: 'Bangers', Impact, sans-serif; --marker: 'Permanent Marker', cursive; --mono: 'Space Mono', monospace; --body: 'Comic Neue', 'Comic Sans MS', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 700 16px/1.45 var(--body); overflow-x: clip;
  background: radial-gradient(circle, #0000001c 1px, transparent 1.6px) 0 0 / 6px 6px, var(--paper); }
a { color: var(--blue); }
button { font: inherit; cursor: pointer; color: inherit; }
.ic { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }
[hidden] { display: none !important; }

.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--ink); color: var(--paper); border-bottom: 5px solid var(--red); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; flex-shrink: 0; }
.brand .mark { display: inline-flex; color: var(--red); filter: drop-shadow(2px 2px 0 #000); } .brand .mark .ic { width: 34px; height: 34px; }
.brand span:last-child { font-family: var(--display); font-size: 30px; letter-spacing: .04em; line-height: 1; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red); }
.brand b { font-family: var(--marker); font-weight: 400; font-size: 20px; color: var(--yellow); text-shadow: none; margin-left: 4px; rotate: -4deg; display: inline-block; }
.find { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--red); padding: 0 10px; width: min(340px, 45vw); }
.find .ic { width: 18px; height: 18px; flex-shrink: 0; }
.find input { flex: 1; min-width: 0; border: 0; background: none; font: 700 14px var(--mono); padding: 9px 0; color: var(--ink); outline: none; }

main { max-width: 1240px; margin: 0 auto; padding: 22px 22px 40px; }
.loading { font-family: var(--display); font-size: 26px; padding: 40px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 3px solid var(--ink); background: var(--card); color: var(--ink); font: 400 20px/1 var(--display); letter-spacing: .05em;
  padding: .45em .8em .35em; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: translate .08s, box-shadow .08s; }
.btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; } .btn.x { background: var(--ink); color: #fff; } .btn.y { background: var(--yellow); }
.btn.big { font-size: 30px; padding: .4em 1.1em .3em; } .btn.sm { font-size: 16px; padding: .4em .65em .3em; box-shadow: 3px 3px 0 var(--ink); }
.kicker { display: inline-block; font: 700 11px var(--mono); letter-spacing: .18em; background: var(--yellow); border: 3px solid var(--ink); padding: 4px 10px 3px; box-shadow: 3px 3px 0 var(--ink); rotate: -2deg; }
h1.big { margin: 12px 0 6px; font: 400 clamp(44px, 7vw, 92px)/.86 var(--display); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: -4px 0 var(--cyan), 4px 0 var(--red), 7px 7px 0 var(--ink); }
.lede { margin: 6px 0 0; max-width: 640px; font-size: 18px; }
.hint { margin: 0; font: 700 12px var(--mono); color: var(--mute); }

/* home */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: end; margin-bottom: 26px; }
.hstats { display: flex; gap: 10px; flex-wrap: wrap; }
.hs { background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 6px 12px 5px; font: 700 11px var(--mono); letter-spacing: .1em; }
.hs b { display: block; font: 400 32px/1 var(--display); letter-spacing: .02em; }
.cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.chip { display: inline-flex; gap: 6px; align-items: center; font: 400 18px/1 var(--display); letter-spacing: .05em; padding: 7px 12px 5px; border: 3px solid var(--ink); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.chip small { font: 700 10px var(--mono); color: var(--mute); }
.chip.on { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--red); } .chip.on small { color: #cfc6b0; }
.sec { margin: 30px 0 14px; display: flex; align-items: center; gap: 14px; }
.sec h2 { margin: 0; font: 400 34px/1 var(--display); letter-spacing: .04em; background: var(--yellow); border: 3px solid var(--ink); padding: 6px 14px 2px; box-shadow: 4px 4px 0 var(--ink); rotate: -1deg; }
.sec a { margin-left: auto; font: 400 18px var(--display); letter-spacing: .05em; color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.qc { position: relative; display: flex; flex-direction: column; background: var(--card); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); text-decoration: none; transition: translate .1s, box-shadow .1s, rotate .1s; }
.qc:hover { translate: -3px -3px; box-shadow: 8px 8px 0 var(--red); rotate: -.5deg; }
.qc .im { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-bottom: 4px solid var(--ink); }
.qc .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .3s; }
.qc:hover .im img { scale: 1.06; }
.qc .im::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #00000033 1px, transparent 1.4px) 0 0 / 4px 4px; mix-blend-mode: multiply; }
.qc .im.blur img { filter: blur(6px); scale: 1.1; }
.qc .tag { position: absolute; left: 8px; top: 8px; z-index: 2; font: 700 10px var(--mono); letter-spacing: .12em; background: var(--yellow); border: 2px solid var(--ink); padding: 2px 6px; text-transform: uppercase; }
.qc .tag.p { background: var(--pink); color: #fff; }
.qc .done { position: absolute; right: 8px; top: 8px; z-index: 2; font: 400 16px/1 var(--display); background: var(--ink); color: #fff; padding: 4px 7px 2px; border: 2px solid #fff; }
.qc .tx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.qc b { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.qc .mt { margin-top: auto; display: flex; justify-content: space-between; gap: 6px; font: 700 11px var(--mono); color: var(--mute); }
.qc .mt .avg { color: var(--ink); }
.morebtn { display: flex; justify-content: center; margin-top: 22px; }

/* quiz */
.qwrap { max-width: 860px; margin: 0 auto; }
.qhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.qhead h1 { margin: 0; font: 400 clamp(28px, 4vw, 42px)/1 var(--display); letter-spacing: .02em; }
.qhead .cnt { margin-left: auto; font: 400 26px/1 var(--display); }
.pbar { display: grid; gap: 4px; margin-bottom: 18px; }
.pbar .cells { display: grid; gap: 4px; }
.pbar .cells i { height: 12px; border: 2px solid var(--ink); background: #fff; }
.pbar .cells i.ok { background: var(--good); } .pbar .cells i.no { background: var(--red); } .pbar .cells i.cur { background: var(--yellow); }
.panel { background: var(--card); border: 5px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); padding: 22px; }
.qimg { position: relative; margin: -22px -22px 18px; aspect-ratio: 16 / 9; max-height: 420px; overflow: hidden; background: var(--ink); border-bottom: 5px solid var(--ink); display: grid; place-items: center; }
.qimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qimg.tall { aspect-ratio: auto; height: 380px; } .qimg.tall img { width: auto; height: 100%; object-fit: contain; }
.qimg.blur img { filter: blur(9px) saturate(1.2); scale: 1.08; transition: filter .6s, scale .6s; }
.qimg.blur.off img { filter: none; scale: 1; }
.qimg.thumb { aspect-ratio: auto; height: 220px; } .qimg.thumb img { width: auto; height: 100%; }
.qtext { margin: 0 0 18px; font: 400 clamp(26px, 3.4vw, 38px)/1.05 var(--display); letter-spacing: .02em; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt { position: relative; text-align: left; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; background: #fff; border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 700 17px/1.2 var(--body); transition: translate .08s, box-shadow .08s, background .15s; }
.opt .k { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; font: 400 18px/1 var(--display); background: var(--ink); color: #fff; }
.opt:hover:not(:disabled) { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); background: #fff6c9; }
.opt:disabled { cursor: default; }
.opt.ok { background: var(--good); color: #fff; box-shadow: 4px 4px 0 var(--ink); } .opt.ok .k { background: #fff; color: var(--good); }
.opt.no { background: var(--red); color: #fff; } .opt.no .k { background: #fff; color: var(--red); }
.opt.dim { opacity: .45; }
.opt .st { position: absolute; right: -10px; top: -12px; font: 400 16px/1 var(--display); letter-spacing: .06em; padding: 4px 8px 2px; border: 3px solid var(--ink); background: #fff; color: var(--ink); rotate: 6deg; }
.why { margin: 16px 0 0; padding: 12px 14px; background: #fff; border: 3px dashed var(--ink); font-size: 16px; }
.why b { font: 400 22px/1 var(--display); letter-spacing: .04em; margin-right: 6px; }
.why.ok b { color: var(--good); } .why.no b { color: var(--red); }
.next { display: flex; justify-content: flex-end; margin-top: 16px; }
.combo { font: 400 22px/1 var(--display); color: var(--red); letter-spacing: .04em; }
.bang { position: fixed; left: 50%; top: 42%; translate: -50% -50%; z-index: 90; pointer-events: none; font: 400 64px/1 var(--display); letter-spacing: .04em; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--ink);
  padding: 30px 44px; background: var(--yellow); clip-path: polygon(50% 0, 61% 22%, 85% 10%, 78% 36%, 100% 46%, 79% 59%, 90% 86%, 62% 76%, 50% 100%, 39% 77%, 11% 88%, 21% 60%, 0 48%, 22% 36%, 14% 10%, 39% 22%); animation: bang .7s ease-out forwards; }
.bang.no { background: var(--red); }
@keyframes bang { 0% { scale: .3; opacity: 0; rotate: -12deg; } 30% { scale: 1.08; opacity: 1; rotate: 3deg; } 70% { opacity: 1; } 100% { scale: 1.2; opacity: 0; } }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.start .cover { aspect-ratio: 16 / 10; border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; background: var(--ink); rotate: -1.5deg; }
.start .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.start .cover.blur img { filter: blur(6px); scale: 1.1; }
.start .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.meter { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* results */
.res { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.who { position: relative; background: var(--ink); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--red); overflow: hidden; rotate: -1deg; }
.who .im { aspect-ratio: 4 / 5; overflow: hidden; } .who .im img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.who .im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0b0908f0 88%), radial-gradient(circle, #00000040 1px, transparent 1.3px) 0 0 / 4px 4px; pointer-events: none; }
.who .lo { position: absolute; left: 16px; right: 16px; bottom: 16px; color: #fff; z-index: 2; }
.who .lo small { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--yellow); }
.who .lo b { display: block; font: 400 42px/.9 var(--display); letter-spacing: .02em; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red), 3px 3px 0 #000; }
.who .lo span { display: block; margin-top: 4px; font: 700 13px var(--mono); color: #e6dfcc; }
.score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.score .n { font: 400 110px/.8 var(--display); color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: -5px 0 var(--cyan), 5px 0 var(--red), 8px 8px 0 var(--ink); }
.score .of { font: 400 40px/1 var(--display); }
.vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.vs div { background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 8px 12px 6px; font: 700 11px var(--mono); letter-spacing: .08em; }
.vs b { display: block; font: 400 30px/1 var(--display); letter-spacing: .02em; }
.hist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 150px; padding: 10px 10px 0; background: #fff; border: 3px solid var(--ink); }
.hist div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.hist i { width: 100%; min-height: 3px; background: var(--paper2); border: 2px solid var(--ink); border-bottom: 0; }
.hist div.me i { background: var(--red); }
.hist div.me::before { content: "YOU"; position: absolute; top: -2px; font: 700 9px var(--mono); background: var(--ink); color: #fff; padding: 1px 4px; }
.hist span { font: 700 10px var(--mono); padding: 3px 0; }
.split { display: grid; gap: 8px; }
.split .row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 54px; gap: 10px; align-items: center; }
.split img { width: 46px; height: 46px; object-fit: cover; border: 2px solid var(--ink); }
.split .bar { height: 26px; background: #fff; border: 3px solid var(--ink); position: relative; }
.split .bar i { position: absolute; inset: 0 auto 0 0; background: var(--paper2); }
.split .row.me .bar i { background: var(--red); }
.split .bar span { position: absolute; left: 8px; top: 50%; translate: 0 -50%; font: 400 16px/1 var(--display); letter-spacing: .03em; white-space: nowrap; }
.split .pc { font: 400 22px/1 var(--display); text-align: right; }
.racts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.review { margin-top: 30px; }
.review h3 { margin: 0 0 10px; font: 400 28px/1 var(--display); }
.rv { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 2px solid #1412101a; }
.rv .m { width: 28px; height: 28px; display: grid; place-items: center; font: 400 18px/1 var(--display); color: #fff; border: 2px solid var(--ink); }
.rv .m.ok { background: var(--good); } .rv .m.no { background: var(--red); }
.rv b { display: block; font-size: 15px; } .rv small { font: 700 12px var(--mono); color: var(--mute); }
.rv small em { font-style: normal; color: var(--good); }

/* share images (screenshotted at 1200x630) */
#shot { position: fixed; left: 0; top: 0; width: 1200px; height: 630px; z-index: 999; overflow: hidden; background: radial-gradient(circle, #0000001f 1.2px, transparent 1.8px) 0 0 / 8px 8px, var(--paper); }
#shot .burst { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 28% 50%, #e3262f14 0 6deg, transparent 6deg 12deg); }
#shot .pic { position: absolute; left: 60px; top: 60px; width: 420px; height: 500px; border: 6px solid var(--ink); box-shadow: 12px 12px 0 var(--red); overflow: hidden; rotate: -3deg; background: var(--ink); }
#shot .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#shot .pic.wide { width: 450px; height: 290px; top: 160px; }
#shot .pic.blur img { filter: blur(8px); scale: 1.1; }
#shot .tx { position: absolute; left: 560px; right: 50px; top: 70px; }
#shot .tx h1 { margin: 16px 0 12px; font: 400 76px/.88 var(--display); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: -4px 0 var(--cyan), 4px 0 var(--red), 7px 7px 0 var(--ink); }
#shot .tx h1.s { font-size: 58px; }
#shot .tx p { font-size: 24px; margin: 0; }
#shot .big2 { font: 400 150px/.8 var(--display); color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: -6px 0 var(--cyan), 6px 0 var(--red), 9px 9px 0 var(--ink); }
#shot .url2 { position: absolute; right: 50px; bottom: 40px; font: 400 34px var(--display); letter-spacing: .03em; display: flex; gap: 10px; align-items: center; }
#shot .url2 .ic { width: 40px; height: 40px; color: var(--red); }

#toast { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 120; display: none; font: 400 19px var(--display); letter-spacing: .04em; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 16px 5px; white-space: nowrap; }
.foot { max-width: 1240px; margin: 10px auto 0; padding: 18px 22px 30px; border-top: 4px solid var(--ink); font-size: 13px; font-weight: 400; }
.foot p { margin: 6px 0; } .foot .note { color: var(--mute); }
.more { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .more b { font: 400 18px var(--display); letter-spacing: .04em; }

@media (max-width: 860px) {
  .hero, .start, .res { grid-template-columns: 1fr; }
  .who { max-width: 360px; justify-self: center; width: 100%; }
}
@media (max-width: 720px) {
  .top { padding: 8px 12px; gap: 10px; flex-wrap: wrap; } .brand span:last-child { font-size: 22px; } .brand b { font-size: 15px; } .brand .mark .ic { width: 26px; height: 26px; }
  .find { width: 100%; margin: 0; order: 3; }
  main { padding: 14px 12px 30px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qc b { font-size: 18px; } .qc .mt { flex-direction: column; gap: 2px; }
  .panel { padding: 16px; box-shadow: 6px 6px 0 var(--ink); } .qimg { margin: -16px -16px 14px; } .qimg.tall { height: 300px; }
  .opts { grid-template-columns: 1fr; gap: 10px; } .opt { min-height: 54px; font-size: 16px; }
  .score .n { font-size: 84px; } .vs b { font-size: 24px; }
  .sec h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .bang { animation-duration: .01s; } .qc, .qc .im img { transition: none; } }