// ==UserScript==
// @name         Bangumi 年鉴
// @description  根据Bangumi的时光机数据生成年鉴
// @namespace    syaro.io
// @version      1.3.3
// @author       神戸小鳥 @vickscarlet
// @license      MIT
// @include      /^https?://(bgm\.tv|chii\.in|bangumi\.tv)\/(user)\/.*/
// @downloadURL none
// ==/UserScript==
(async () => {
    const uid = /\/user\/(.+)?(\/.*)?/.exec(window.location.href)?.[1];
    const ce = name => document.createElement(name);
    const STAR_PATH = 'M60.556381,172.206 C60.1080307,172.639 59.9043306,173.263 60.0093306,173.875 L60.6865811,177.791 C60.8976313,179.01 59.9211306,180 58.8133798,180 C58.5214796,180 58.2201294,179.931 57.9282291,179.779 L54.3844766,177.93 C54.1072764,177.786 53.8038262,177.714 53.499326,177.714 C53.1958758,177.714 52.8924256,177.786 52.6152254,177.93 L49.0714729,179.779 C48.7795727,179.931 48.4782224,180 48.1863222,180 C47.0785715,180 46.1020708,179.01 46.3131209,177.791 L46.9903714,173.875 C47.0953715,173.263 46.8916713,172.639 46.443321,172.206 L43.575769,169.433 C42.4480682,168.342 43.0707186,166.441 44.6289197,166.216 L48.5916225,165.645 C49.211123,165.556 49.7466233,165.17 50.0227735,164.613 L51.7951748,161.051 C52.143775,160.35 52.8220755,160 53.499326,160 C54.1776265,160 54.855927,160.35 55.2045272,161.051 L56.9769285,164.613 C57.2530787,165.17 57.7885791,165.556 58.4080795,165.645 L62.3707823,166.216 C63.9289834,166.441 64.5516338,168.342 63.423933,169.433 L60.556381,172.206 Z';
    const STAR_SVG = `<svg fill="#ffde20" width="800px" height="800px" viewBox="43 159.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="${STAR_PATH}"></path></svg>`;
    const STAR_URL = URL.createObjectURL(new Blob([STAR_SVG], { type: 'image/svg+xml' }));

    // indexedDB cache
    class DB {
        #dbName = 'mcache';
        #version = 1;
        #collection = 'pages';
        #keyPath = 'url';
        #db;

        static #gdb;

        static async initInstance() {
            if (!this.#gdb) this.#gdb = await new DB().init();
            return this.#gdb;
        }

        static instance() {
            if (!this.#gdb) throw new Error('DB not initInstance');
            return this.#gdb;
        }

        async init() {
            this.#db = await new Promise((resolve, reject) => {
                const request = window.indexedDB.open(this.#dbName, this.#version);
                request.onerror = event => reject(event.target.error);
                request.onsuccess = event => resolve(event.target.result);
                request.onupgradeneeded = event => {
                    if (event.target.result.objectStoreNames.contains(this.#collection)) return;
                    event.target.result.createObjectStore(this.#collection, { keyPath: this.#keyPath });
                };
            });
            return this;
        }

        async #store(handle, mode = 'readonly') {
            return new Promise((resolve, reject) => {
                const transaction = this.#db.transaction(this.#collection, mode);
                const store = transaction.objectStore(this.#collection);
                let result;
                new Promise((rs, rj) => handle(store, rs, rj))
                    .then(ret => result = ret)
                    .catch(reject);
                transaction.onerror = () => reject(new Error('Transaction error'));
                transaction.oncomplete = () => resolve(result);
            });
        }

        async get(key, index) {
            return this.#store((store, resolve, reject) => {
                if (index) store = store.index(index);
                const request = store.get(key);
                request.onerror = reject;
                request.onsuccess = () => resolve(request.result);
            })
                .catch(null);
        }

        async put(data) {
            return this.#store((store, resolve, reject) => {
                const request = store.put(data);
                request.onerror = reject;
                request.onsuccess = () => resolve(true);
            }, 'readwrite')
                .catch(false);
        }

        async clear() {
            return this.#store((store, resolve, reject) => {
                const request = store.clear();
                request.onerror = reject;
                request.onsuccess = () => resolve(true);
            }, 'readwrite')
                .catch(false);
        }
    }
    await DB.initInstance();

    const Types = {
        anime: '动画',
        game: '游戏',
        music: '音乐',
        book: '图书',
        real: '三次元',
    }
    const TypeAction = {
        anime: '看',
        game: '玩',
        music: '听',
        book: '读',
        real: '看',
    }
    const SubTypes = [
        { value: 'collect', name: '$过', checked: true },
        { value: 'do', name: '在$', checked: false },
        { value: 'dropped', name: '抛弃', checked: false },
        { value: 'on_hold', name: '搁置', checked: false },
        { value: 'wish', name: '想$', checked: false },
    ];

    // function easeIn(curtime, begin, end, duration) {
    //     let x = curtime / duration;
    //     let y = x * x;
    //     return begin + (end - begin) * y;
    // }
    function easeOut(curtime, begin, end, duration) {
        let x = curtime / duration;
        let y = -x * x + 2 * x;
        return begin + (end - begin) * y;
    }
    // function easeInout(curtime, begin, end, duration) {
    //     if (curtime < duration / 2) {
    //         return easeIn(curtime, begin, (begin + end) / 2, duration / 2);
    //     } else {
    //         let curtime1 = curtime - duration / 2;
    //         let begin1 = (begin + end) / 2;
    //         return easeOut(curtime1, begin1, end, duration / 2);
    //     }
    // }

    function groupBy(list, group) {
        const groups = new Map();
        for (const item of list) {
            const key = typeof group == 'function' ? group(item) : item[group];
            if (groups.has(key)) groups.get(key).push(item);
            else groups.set(key, [item]);
        }
        return groups;
    }

    function listAdd(first, ...adds) {
        const ret = Array.from(first);
        for (const list of adds) {
            for (const i in list) {
                if (i >= ret.length) ret.push(list[i]);
                else ret[i] += list[i];
            }
        }
        return ret;
    }

    // LOAD DATA START
    async function f(url) {
        const html = await fetch(window.location.origin + '/' + url).then(res => res.text());
        if (html.includes('503 Service Temporarily Unavailable')) return null;
        const e = ce('html');
        e.innerHTML = html.replace(/<img (.*)\/?>/g, '<span class="img" $1></span>');
        return e;
    };

    async function fl(type, subType, p = 1, expire = 30) {
        const url = `${type}/list/${uid}/${subType}?page=${p}`;
        let data = await DB.instance().get('0x1@' + url);
        if (data && data.time + expire * 60000 > Date.now()) return data;

        const e = await f(url);
        const list = Array
            .from(e.querySelectorAll('#browserItemList > li'))
            .map(li => {
                const data = { subtype: subType };
                data.id = li.querySelector('a').href.split('/').pop();
                const title = li.querySelector('h3');
                data.title = title.querySelector('a').innerText;
                data.jp_title = title.querySelector('small')?.innerText;
                data.img = li.querySelector('span.img')
                    ?.getAttribute('src').replace('cover/c', 'cover/l')
                    || '//bgm.tv/img/no_icon_subject.png';
                data.time = new Date(li.querySelector('span.tip_j').innerText);
                data.year = data.time.getFullYear();
                data.month = data.time.getMonth();
                data.star = parseInt(li.querySelector('span.starlight')?.className.match(/stars(\d{1,2})/)[1]) || 0;
                data.tags = li.querySelector('span.tip')?.textContent.trim().match(/标签:\s*(.*)/)?.[1].split(/\s+/) || [];
                return data;
            });
        const max = Number(e.querySelector('span.p_edge')?.textContent.match(/\/\s*(\d+)\s*\)/)?.[1] || 1);
        const time = Date.now();
        data = { url: '0x1@' + url, list, max, time };
        if (p == 1) {
            const tags = Array
                .from(e.querySelectorAll('#userTagList > li > a.l'))
                .map(l => l.childNodes[1].textContent);
            data.tags = tags;
        }
        await DB.instance().put(data);
        return data;
    }

    async function ft(type) {
        const { tags } = await fl(type, 'collect')
        return tags
    }

    async function bsycs(type, subType, year) {
        const { max } = await fl(type, subType);
        console.info('Total', type, subType, max, 'page');
        console.info('BSearch by year', year);
        let startL = 1;
        let startR = 1;
        let endL = max;
        let endR = max;
        let dL = false;
        let dR = false;

        while (startL <= endL && startR <= endR) {
            const mid = startL < endL
                ? Math.max(Math.min(Math.floor((startL + endL) / 2), endL), startL)
                : Math.max(Math.min(Math.floor((startR + endR) / 2), endR), startR)
            const { list } = await fl(type, subType, mid);
            if (list.length == 0) return [1, 1];
            const first = list[0].year;
            const last = list[list.length - 1].year;
            console.info(`\tBSearch page`, mid, ' ', '\t[', first, last, ']');
            if (first > year && last < year) return [mid, mid];

            if (last > year) {
                if (!dL) startL = Math.min(mid + 1, endL);
                if (!dR) startR = Math.min(mid + 1, endR);
            } else if (first < year) {
                if (!dL) endL = Math.max(mid - 1, startL);
                if (!dR) endR = Math.max(mid - 1, startR);
            } else if (first == last) {
                if (!dL) endL = Math.max(mid - 1, startL);
                if (!dR) startR = Math.min(mid + 1, endR);
            } else if (first == year) {
                startR = endR = mid;
                if (!dL) endL = Math.min(mid + 1, endR);
            } else if (last == year) {
                startL = endL = mid;
                if (!dL) startR = Math.min(mid + 1, endR);
            }
            if (startL == endL) dL = true;
            if (startR == endR) dR = true;
            if (dL && dR) return [startL, startR];
        }
    }

    async function cbt(type, subtype, year) {
        if (!year) return cbtAll(type, subtype);
        return cbtYear(type, subtype, year);
    };

    async function cbtYear(type, subtype, year) {
        const [start, end] = await bsycs(type, subtype, year);
        console.info('Collect pages [', start, end, ']');
        const ret = [];
        for (let i = start; i <= end; i++) {
            console.info('\tCollect page', i);
            const { list } = await fl(type, subtype, i);
            ret.push(list);
        }
        return ret.flat();
    }

    async function cbtAll(type, subtype) {
        const { list, max } = await fl(type, subtype, 1);
        console.info('Collect pages [', 1, max, ']');
        const ret = [list];
        for (let i = 2; i <= max; i++) {
            console.info('\tCollect page', i);
            const { list } = await fl(type, subtype, i);
            ret.push(list);
        }
        return ret.flat();
    }

    async function collects({ type, subTypes, tag, year }) {
        const ret = [];
        for (const subtype of subTypes) {
            const list = await cbt(type, subtype, year);
            ret.push(list);
        }
        const fset = new Set();
        return ret.flat()
            .filter(({ id, year: y, tags }) => {
                if (year && year != y) return false;
                if (tag && !tags.includes(tag)) return false;
                if (fset.has(id)) return false;
                fset.add(id);
                return true;
            })
            .sort(({ time: a }, { time: b }) => b - a);
    }
    // LOAD DATA END

    // SAVE IMAGE START
    const loaded = new Set();
    async function loadScript(url) {
        if (loaded.has(url)) return;
        return new Promise((resolve, reject) => {
            const script = ce('script');
            script.type = 'text/javascript';
            script.src = url;
            script.onload = () => {
                loaded.add(url);
                resolve();
            };
            document.body.appendChild(script);
        })
    }

    async function element2Canvas(element, done) {
        await loadScript('https://html2canvas.hertzen.com/dist/html2canvas.min.js');
        const canvas = await html2canvas(element, {
            allowTaint: true,
            logging: false,
            backgroundColor: '#1c1c1c'
        })
        const div = ce('div');
        const close = ce('div');
        div.id = 'kotori-report-canvas';
        close.style.height = canvas.style.height;
        close.addEventListener('click', () => div.remove());
        div.appendChild(close);
        div.appendChild(canvas);
        document.body.appendChild(div);
        done();
    }
    // SAVE IMAGE END

    // REPORT START
    function propsGen(props) {
        return Object.entries(props).map(([key, value]) => `${key}="${value}"`).join(' ');
    }
    function ulGen(list, props) {
        return `<ul ${propsGen(props)}>${list.join('')}</ul>`;
    }

    function buildBarList(list, getTag) {
        const max = Math.max(...list);
        return ulGen(list.map((c, i) => `<li>
            <span>${getTag(i)}</span><span>${c}</span><div style="width:${c * 100 / max}%;"></div>
        </li>`), { class: 'bars' })
    }

    function buildCoverList(list, type) {
        let last = -1;
        let counts = new Array(12).fill(0);
        const stars = new Array(11).fill(0);
        const covers = [];
        for (const { img, month, star } of list) {
            counts[month]++;
            stars[star]++;
            const IMG = `<img src="${img}">`
            const STAR = !star ? '' : `<div class="star"><img src="${STAR_URL}"><span>${star}</span></div>`;
            let MONTH = '';
            if (month != last) {
                MONTH = `<span> ${month + 1}月</span > `;
                last = month;
            }
            covers.push(`<li>${IMG}${MONTH}${STAR}</li>`);
        }
        const coverList = ulGen(covers, { class: 'covers', type })

        return {
            coverList,
            counts,
            stars
        }
    }

    async function buildLifeTimeReport({ type, tag, subTypes }) {
        const list = await collects({ type, subTypes, tag });

        const title = `<h1> Bangumi ${Types[type]}生涯总览 @${uid} <br><br>总标记数：${list.length}</h1>`;

        const yearGroup = groupBy(list, 'year');

        const allYearCover = [];
        const allCounts = [];
        const allStarts = [];
        for (const [year, l] of yearGroup) {
            const { coverList, counts, stars } = buildCoverList(l, type);
            allCounts.push(counts);
            allStarts.push(stars);
            allYearCover.push(`<li>
                <h2>${year}年<span>${l.length}</span></h2>
                ${coverList}
            </li>`);
        }

        const countList = buildBarList(listAdd(...allCounts), i => i + 1 + '月');
        const starList = buildBarList(listAdd(...allStarts), i => i ? i + '星' : '未评分');
        const barGroup = `<div class="bar-group">${countList}${starList}</div>`;
        const yearList = ulGen(allYearCover, { class: 'year-cover' });

        const content = ce('div');
        content.className = 'content';
        content.innerHTML = [title, barGroup, yearList].join('');
        return content;
    }

    async function buildYearReport({ year, type, tag, subTypes }) {
        const list = await collects({ type, subTypes, tag, year });

        const title = `<h1> ${year}年 Bangumi ${Types[type]}年鉴 @${uid} <br><br>总标记数：${list.length}</h1>`;
        const { coverList, counts, stars } = buildCoverList(list, type);
        const countList = buildBarList(counts, i => i + 1 + '月');
        const starList = buildBarList(stars, i => i ? i + '星' : '未评分');
        const barGroup = `<div class="bar-group">${countList}${starList}</div>`;

        const content = ce('div');
        content.className = 'content';
        content.innerHTML = [title, barGroup, coverList].join('');
        return content;
    }

    async function buildReport(options) {
        const content = await (options.isLifeTime ? buildLifeTimeReport(options) : buildYearReport(options));

        const report = ce('div');
        const scroll = ce('div');
        const close = ce('div');
        const save = ce('div');
        report.id = 'kotori-report';
        scroll.className = 'scroll';
        close.className = 'close';
        save.className = 'save';

        const saveFn = () => {
            save.onclick = null;
            element2Canvas(content, () => save.onclick = saveFn)
        };
        let ly = scroll.scrollTop || 0;
        let my = ly;
        let ey = ly;
        let interval = null;
        const scrollFn = (iey) => {
            ey = Math.max(Math.min(iey, scroll.scrollHeight - scroll.offsetHeight), 0);
            ly = my;
            if (interval) clearInterval(interval);
            let times = 1;
            interval = setInterval(() => {
                if (times > 50) {
                    clearInterval(interval);
                    interval = null;
                    return;
                }
                my = easeOut(times, ly, ey, 50);
                scroll.scroll({ top: my })
                times++;
            }, 1)
        };
        const wheelFn = e => {
            e.preventDefault();
            scrollFn(ey + e.deltaY);
        }
        const keydownFn = e => {
            e.preventDefault();
            if (e.key == 'Escape') close.click();
            if (e.key == 'Home') scrollFn(0);
            if (e.key == 'End') scrollFn(scroll.scrollHeight - scroll.offsetHeight);
            if (e.key == 'ArrowUp') scrollFn(ey - 100);
            if (e.key == 'ArrowDown') scrollFn(ey + 100);
            if (e.key == 'PageUp') scrollFn(ey - scroll.offsetHeight);
            if (e.key == 'PageDown') scrollFn(ey + scroll.offsetHeight);
        };
        scroll.addEventListener('wheel', wheelFn);
        close.addEventListener('wheel', wheelFn)
        save.addEventListener('wheel', wheelFn)
        document.addEventListener('keydown', keydownFn);
        save.addEventListener('click', saveFn);
        close.addEventListener('click', () => {
            document.removeEventListener('keydown', keydownFn);
            report.remove()
        });
        scroll.appendChild(content);
        report.appendChild(close);
        report.appendChild(scroll);
        report.appendChild(save);
        document.body.appendChild(report);
    }
    // REPORT END

    // MENU START
    async function buildMenu() {
        const menu = ce('ul');
        const ma = name => menu.appendChild(ce('li')).appendChild(ce(name));
        menu.id = 'kotori-report-menu';

        const year = new Date().getFullYear();

        const ytField = ma('fieldset');
        const lifeTimeCheckBox = ce('div');
        const yearSelect = ce('select');
        const typeSelect = ce('select');

        ytField.innerHTML = '<legend>选择年份与类型</legend>';
        lifeTimeCheckBox.innerHTML = `<input type="checkbox" id="lftc"/><label for="lftc">生涯报告</label>`;
        yearSelect.innerHTML = new Array(year - 2007).fill(0)
            .map((_, i) => `<option value="${year - i}">${year - i}</option>`).join('');
        typeSelect.innerHTML = Object.entries(Types)
            .map(([value, name]) => `<option value="${value}">${name}</option>`).join('');

        ytField.appendChild(lifeTimeCheckBox);
        ytField.appendChild(yearSelect);
        ytField.appendChild(typeSelect);

        const lifeTimeCheck = lifeTimeCheckBox.firstChild;
        lifeTimeCheck.addEventListener('change', () => {
            if (lifeTimeCheck.checked) yearSelect.disabled = true;
            else yearSelect.disabled = false;
        })

        const tagField = ma('fieldset');
        const tagSelect = ce('select');
        tagField.innerHTML = '<legend>选择过滤标签</legend>';
        tagSelect.innerHTML = `<option value="">不筛选</option>`;
        tagField.appendChild(tagSelect);

        const subtypeField = ma('fieldset');
        subtypeField.innerHTML = '<legend>选择包括的状态</legend>' + SubTypes
            .map(({ value, name, checked }) => `
                <div data-name="${name}">
                    <input type="checkbox" id="yst_${value}" name="${name}" value="${value}" ${checked ? 'checked' : ''} />
                    <label for="yst_${value}">${name}</label>
                </div>
            `)
            .join('');

        const changeType = async () => {
            const type = typeSelect.value;
            const action = TypeAction[type];
            subtypeField.querySelectorAll('div').forEach(e => {
                const name = e.getAttribute('data-name').replace('$', action);
                e.querySelector('input').setAttribute('name', name);
                e.querySelector('label').innerText = name;
            });
            const tags = await ft(type);
            if (type != typeSelect.value) return;
            const last = tagSelect.value;
            const options = tags.map(t => `<option value="${t}">${t}</option>`).join('');
            tagSelect.innerHTML = `<option value="">不筛选</option>${options}`;
            if (tags.includes(last)) tagSelect.value = last;
        };
        typeSelect.addEventListener('change', changeType);
        changeType();

        const btnGroup = ma('div');
        const btnGo = ce('div');
        const btnClr = ce('div');
        btnGroup.className = 'btn-group';

        btnGo.classList.add('btn');
        btnGo.classList.add('primary');
        btnGo.innerText = '生成';

        btnClr.classList.add('btn');
        btnClr.classList.add('warning');
        btnClr.innerText = '清理缓存';

        const l = ['|', '/', '-', '\\'];
        let done = true;
        btnGo.addEventListener('click', async () => {
            if (!done) return;
            done = false;
            let i = 0;
            const id = setInterval(() => btnGo.innerText = `抓取数据中[${l[i++ % 4]}]`, 50);
            await buildReport({
                isLifeTime: lifeTimeCheck.checked,
                year: parseInt(yearSelect.value) || year,
                type: typeSelect.value || 'anime',
                tag: tagSelect.value,
                subTypes: Array.from(subtypeField.querySelectorAll('input:checked')).map(e => e.value)
            });
            menuToggle();
            done = true;
            clearInterval(id);
            btnGo.innerText = '生成';
        });

        let clearDone = true;
        btnClr.addEventListener('click', async () => {
            if (!clearDone) return;
            clearDone = false;
            let i = 0;
            const id = setInterval(() => btnGo.innerText = `清理缓存中[${l[i++ % 4]}]`, 50);
            await DB.instance().clear();
            clearDone = true;
            clearInterval(id);
            btnClr.innerText = '清理缓存';
        })

        btnGroup.appendChild(btnGo);
        btnGroup.appendChild(btnClr);

        document.body.appendChild(menu);
        return menu;
    }

    let menu = null;
    async function menuToggle() {
        if (!menu) menu = await buildMenu();
        menu.style.display = menu.style.display == 'block' ? 'none' : 'block';
    }
    // MENU END

    const btn = ce('a');
    btn.addEventListener('click', menuToggle);
    btn.className = 'chiiBtn';
    btn.href = 'javascript:void(0)';
    btn.title = '生成年鉴';
    btn.innerHTML = '<span>生成年鉴</span';
    document.querySelector('#headerProfile .actions').append(btn);

    // style
    const style = ce('style');
    document.head.appendChild(style);
    style.innerHTML = `
.btn { user-select: none; cursor: pointer; }

.btn.primary { background: #fc899488; }
.btn.primary:hover { background: #fc8994; }
.btn.danger { background: #fc222288; }
.btn.danger:hover { background: #fc2222; }
.btn.success { background: #22fc2288; }
.btn.success:hover { background: #22fc22; }
.btn.warning { background: #fcb12288; }
.btn.warning:hover { background: #fcb122; }

#kotori-report-canvas::-webkit-scrollbar, #kotori-report .scroll::-webkit-scrollbar { display: none; }

#kotori-report-menu::before {
    position: absolute;
    content: "菜单";
    padding: 0 20px;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 30px;
    line-height: 30px;
    background: #fc8994;
    backdrop-filter: blur(4px);
    border-radius: 10px 10px 0 0;
}

#kotori-report-menu {
    color: #fff;
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    padding-top: 50px;
    background: #0d111788;
    backdrop-filter: blur(4px);
    border-radius: 10px;
    box-shadow: 2px 2px 10px #00000088;
    border: 1px solid #fc899422;
    min-width: 150px;

    > li:first-child { margin-top: 0; }
    > li {
        margin-top: 10px;
        > .btn-group {
            display: flex;
            gap: 10px;
            > .btn {
                width: 100%;
                padding: 10px 0;
                text-align: center;
                border-radius: 5px;
                transition: all 0.3s;
                font-size: 16px;
                font-weight: bold;
            }
            > .btn:hover {
                width: 100%;
                padding: 10px 0;
                text-align: center;
                border-radius: 5px;
                transition: all 0.3s;
            }
        }
    }

    fieldset {
        display: flex;
        gap: 5px;
        min-inline-size: min-content;
        margin-inline: 1px;
        border-width: 1px;
        border-style: groove;
        border-color: threedface;
        border-image: initial;
        padding-block: 0.35em 0.625em;
        padding-inline: 0.75em;

        > div {
            display: flex;
            gap: 2px;
            justify-content: center;
        }
    }
}

#kotori-report {
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    > .close {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(2px);
    }

    > .save {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: #fc8994;
        border-radius: 40px;
        border: 4px solid #fc8994;
        cursor: pointer;
        box-shadow: 2px 2px 10px #00000088;
        user-select: none;
        line-height: 40px;
        background-size: 40px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzMwIDMzMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2NSwwQzc0LjAxOSwwLDAsNzQuMDE4LDAsMTY1YzAsOTAuOTgsNzQuMDE5LDE2NSwxNjUsMTY1czE2NS03NC4wMiwxNjUtMTY1QzMzMCw3NC4wMTgsMjU1Ljk4MSwwLDE2NSwweiBNMTY1LDMwMGMtNzQuNDM5LDAtMTM1LTYwLjU2MS0xMzUtMTM1UzkwLjU2MSwzMCwxNjUsMzBzMTM1LDYwLjU2MSwxMzUsMTM1UzIzOS40MzksMzAwLDE2NSwzMDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxMS42NjcsMTI3LjEyMWwtMzEuNjY5LDMxLjY2NlY3NWMwLTguMjg1LTYuNzE2LTE1LTE1LTE1Yy04LjI4NCwwLTE1LDYuNzE1LTE1LDE1djgzLjc4N2wtMzEuNjY1LTMxLjY2NmMtNS44NTctNS44NTctMTUuMzU1LTUuODU3LTIxLjIxMywwYy01Ljg1OCw1Ljg1OS01Ljg1OCwxNS4zNTUsMCwyMS4yMTNsNTcuMjcxLDU3LjI3MWMyLjkyOSwyLjkzLDYuNzY4LDQuMzk1LDEwLjYwNiw0LjM5NWMzLjgzOCwwLDcuNjc4LTEuNDY1LDEwLjYwNy00LjM5M2w1Ny4yNzUtNTcuMjcxYzUuODU3LTUuODU3LDUuODU4LTE1LjM1NSwwLjAwMS0yMS4yMTVDMjI3LjAyMSwxMjEuMjY0LDIxNy41MjQsMTIxLjI2NCwyMTEuNjY3LDEyNy4xMjF6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE5NSwyNDBoLTYwYy04LjI4NCwwLTE1LDYuNzE1LTE1LDE1YzAsOC4yODMsNi43MTYsMTUsMTUsMTVoNjBjOC4yODQsMCwxNS02LjcxNywxNS0xNUMyMTAsMjQ2LjcxNSwyMDMuMjg0LDI0MCwxOTUsMjQweiIvPjwvc3ZnPg==);
        opacity: 0.8;
        z-index: 9999999999999;
    }
    > .scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        overflow: scroll;

        > .content {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 1078px;
            margin: 0 auto;

            > h1 {
                padding: 30px 0;
                text-align: center;
                background: #fc899488;
                backdrop-filter: blur(2px);
                color: #fff;
                text-shadow: 0 0 5px #000;
            }

            ul.year-cover {
                display: flex;
                flex-direction: column;
                gap: 5px;
                > li {
                    position: relative;
                    > h2 {
                        position: relative;
                        padding: 2px;
                        text-align: center;
                        background: #fc899488;
                        backdrop-filter: blur(2px);
                        color: #fff;
                        font-weight: bold;
                        text-shadow: 0 0 4px #000;
                        > span {
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            transform: translateY(-50%);
                            font-size: 14px;
                            color: #ffde20;
                        }
                    }
                }
                > li:before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    border: 1px solid #fc8994;
                    box-sizing: border-box;
                }
            }
            > .bar-group {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                ul.bars {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    position: relative;
                    width: calc(50% - 1px);

                    > li {
                        display: block;
                        position: relative;
                        width: 100%;
                        height: 20px;
                        background: #0008;
                        margin: 0;
                        line-height: 20px;
                        backdrop-filter: blur(2px);

                        > span {
                            position: absolute;
                            left: 5px;
                            text-shadow: 0 0 2px #000;
                        }

                        > span:nth-child(2) {
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                        }

                        > div {
                            display: inline-block;
                            height: 100%;
                            background: #fc8994aa;
                            margin: 0;
                        }
                    }
                }
            }

            ul.covers[type="music"] > li { height: 150px; }
            ul.covers {
                line-height: 0;
                > li {
                    display: inline-block;
                    position: relative;
                    width: 150px;
                    height: 220px;
                    margin: 2px;
                    overflow: hidden;
                    border-width: 1px;
                    border-style: solid;
                    border-color: #fc8994;
                    box-sizing: border-box;

                    img {
                        max-height: 100%;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    > span {
                        width: 50px;
                        height: 30px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        line-height: 30px;
                        text-align: center;
                        font-size: 18px;
                        background: #8c49548c;
                        backdrop-filter: blur(2px);
                    }

                    .star {
                        display: block;
                        position: absolute;
                        bottom: 3px;
                        right: 3px;
                        width: 20px;
                        height: 20px;
                        padding: 5px;
                        background: none;
                        > img {
                            opacity: 0.85;
                        }
                        > span {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            color: #f4a;
                            font-family: consolas, 'courier new', monospace, courier;
                            font-size: 18px;
                            font-weight: bold;
                            text-shadow: 0 0 2px #fff;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
        }
    }
}

#kotori-report-canvas {
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
    overflow: scroll;
    padding: 30px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    > div {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(2px);
    }
    > canvas {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (min-width: 214px) { #kotori-report .content { width: 154px !important; } }
@media screen and (min-width: 368px) { #kotori-report .content { width: 308px !important; } }
@media screen and (min-width: 522px) { #kotori-report .content { width: 462px !important; } }
@media screen and (min-width: 616px) { #kotori-report .content { width: 616px !important; } }
@media screen and (min-width: 830px) { #kotori-report .content { width: 770px !important; } }
@media screen and (min-width: 924px) { #kotori-report .content { width: 924px !important; } }
@media screen and (min-width: 1138px) { #kotori-report .content { width: 1078px !important; } }
`;


})();