侘寂

[div=popups]
[div=popup --1]
[spoiler_v1=Бинго]
[quote]
[div=bingo]
[div=bingo-grid]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]

[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[div=b-cell --num][/div]
[/div]
[div=bingo-animes]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]

[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[div=bingo-animes-line][b]num.[/b] [anime=id][/div]
[/div]
[/div]
[/quote]
[/spoiler_v1]
[/div]
[/div]

/*Кнопочка-всплывашка*/

.popup.--1 > .b-spoiler > label {
    position: fixed;
    inset: 140px 20px auto auto;
    width: 50px;
    aspect-ratio: 1;
    border: 2px solid;
    border-radius: 50%;
    font-size: 0;
    background-color: rgba(0 0 0);
    background: url() no-repeat; 
    background-size: cover; 
    background-position: center; 
    box-shadow: inset 0 0 15px 5px #000;
    transition: .5s;
}

@media screen and (min-width: 1000px) {
.popup.--1 > .b-spoiler > label {
        inset: 90px 50px auto auto;
        width: 80px;
}
}

.popup.--1 > .b-spoiler > label:hover {
    scale: 1.05;
}

.popup.--1 > .b-spoiler > label:before {
    position: absolute;
    font-size: 12px;
    background: rgba(0 0 0 / .7); 
    height: fit-content;
    width: fit-content;
    text-align: center;
    padding: 10px 15px;
    border-radius: 5px;
    top: 50%;
    left: -50%;
    translate: -50% -50%;
    color: rgba(255 255 255 / .7); 
    transition: .5s;
    box-shadow: 0 0 5px 1px rgba(0 0 0 / .7); 
    opacity: 0;
  	pointer-events: none;
}

@media screen and (min-width: 1000px) {
	.popup.--1 > .b-spoiler > label:before {
    font-size: 18px;
}
}

[data-locale='ru'] .popup.--1 > .b-spoiler > label:before {
    content: 'Бинго';
}

[data-locale='en'] .popup.--1 > .b-spoiler > label:before {
    content: 'Bingo';
}

.popup.--1 > .b-spoiler > label:hover:before {
    opacity: 1;
    left: -100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.popups { position: absolute; z-index: 100; }  
  
.popup > .b-spoiler > label {
  display: inline !important;
}

.popup > .b-spoiler > .content[style*='inline'] > .inner {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4rem 0;
  margin: auto;
  background: rgba(0 0 0 / .8);
  border: 0;
  animation: fadeIn .12s linear;
  overflow-y: auto;
  z-index: 99;
}

.popup > .b-spoiler > .content > .inner > .b-quote {
  position: relative;
  width: 90%;
  max-width: 900px;
  padding: 1.5rem;
  margin: auto;
  background: rgba(0 0 0 / .7);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 8px 16px 4px rgba(0 0 0 / .32);
  font-style: normal;
  cursor: default;
  overflow: visible;
}

.popup > .b-spoiler > .content > .inner > .b-quote br {
	display: none;
}
  
.popup > .b-spoiler > .content > .inner > .b-quote::before {
    content: '×';
    position: absolute;
    top: -10px;
    right: -60px;
    bottom: 100%;
    width: 1em;
    padding: 0;
    margin: .5em;
    border-radius: 50%;
    color: #fff;
    font-size: 2em;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    opacity: .56;
    pointer-events: none;
    transition: .2s;
    z-index: 100;
}

.popup > .b-spoiler > .content > .inner:hover > .b-quote:not(:hover)::before {
  opacity: 1;
}

.popup > .b-spoiler > .content > .before,
.popup > .b-spoiler > .content > .inner > .after {
  display: none;
}

/*Бинго*/

.bingo-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
  	margin: 0 auto;

  	height: 100vw;
  	aspect-ratio: .7;
}

@media screen and (min-width: 600px) {
.bingo-grid {
  	height: 700px;
  }
}

@media screen and (min-width: 1000px) {
.bingo-grid {
	margin: unset;
}
}

.bingo br {
	display: none;
}

.b-cell {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    margin-top: 30vw;
    border-color: rgb(0 0 0 / .75);
    border-style: solid;
    border-width: 0;
    transition: box-shadow .15s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 600px) {
.b-cell {
    margin-top: 209px;
}
}

.b-cell:nth-child(n+8) {
    margin-top: 0;
}

.b-cell:hover {
    border-width: 2px;
    box-shadow: inset 0 0 5px 1px rgb(0 0 0 / .75), 
                              inset 0 0 15px 1px rgb(0 0 0 / .75);
}

.b-cell.--c:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .5;
}

.b-cell:before {
    position: absolute;
    padding: 5px 10px;
    border: 1px solid rgba(0 0 0 / .5);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    background: rgba(0 0 0 / .7);
    margin-top: -120px;
    opacity: 0;
    text-align: center;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
    width: max-content;
    max-width: 100px;
  	font-size: 10px;
}

@media screen and (min-width: 600px) {
.b-cell:before {
    max-width: 400px;
  	font-size: 14px;
}
}

.b-cell:hover:before {
    opacity: 1;
  	text-decoration: none !important;
}

.bingo-animes {
	margin-top: 15px;
}

@media screen and (min-width: 1000px) {
.bingo {display: flex;}

.bingo-animes {
    height: 700px;
    overflow-y: scroll;
    margin: 0 15px;
    width: -webkit-fill-available;
}
}

.bingo-animes-line {
    width: 100%;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 0 5px;
}

.bingo-animes-line strong {
    display: inline-block;
    width: 35px;
}

.bingo-animes br {
    display: block !important;
}

.b-cell.--center:before { content:'Любое аниме'; }
.b-cell.--1:before { content:'Любое аниме или дунхуа'; }
.b-cell.--2:before { content:'Пилот / Фильмы, ова, спешлы и пилотные эпизоды как основа для сериалов'; }
.b-cell.--3:before { content:'AMV, основанное на произведении, которое вы смотрели'; }
.b-cell.--4:before { content:'Дунхуа'; }
.b-cell.--5:before { content:'Сборник'; }
.b-cell.--6:before { content:'Чёрно-белое аниме'; }
.b-cell.--7:before { content:'Аниме любимого автора'; }
.b-cell.--8:before { content:'Спешл/ову/мувик из франшизы, которую вы смотрели'; }
.b-cell.--9:before { content:'Аниме от нового для вас автора'; }
.b-cell.--10:before { content:'Аниме от автора, который вам не нравится'; }
.b-cell.--11:before { content:'Первую или раннюю работу любимого автора'; }
.b-cell.--12:before { content:'Аниме, которое началось в 70-ых'; }
.b-cell.--13:before { content:'Аниме, которое началось в 80-ых'; }
.b-cell.--14:before { content:'Аниме, которое началось в 90-ых'; }
.b-cell.--15:before { content:'Аниме, которое началось в 00-ых'; }
.b-cell.--16:before { content:'Аниме, которое началось в 10-ых'; }
.b-cell.--17:before { content:'Аниме, которое началось в 20-ых'; }
.b-cell.--18:before { content:'Аниме, которое началось в год вашей регистрации на Шикимори'; }
.b-cell.--19:before { content:'Аниме, основанное на манге'; }
.b-cell.--20:before { content:'Аниме, основанное на новелле/ранобэ'; }
.b-cell.--21:before { content:'Пересмотрите аниме'; }
.b-cell.--22:before { content:'Аниме, оценка которого выше, чем у манги'; }
.b-cell.--23:before { content:'Аниме, которое адаптировали в фильм/серию фильмов-рекапов'; }
.b-cell.--24:before { content:'Аниме, которое адаптировали с визуальной новеллы'; }
.b-cell.--25:before { content:'Аниме из топ-1000'; }
.b-cell.--26:before { content:'Аниме без рейтинга'; }
.b-cell.--27:before { content:'Аниме с оценкой 8 и выше'; }
.b-cell.--28:before { content:'Аниме с оценкой 6 и ниже'; }
.b-cell.--29:before { content:'Аниме, которое добавили в запланированное больше пользователей, чем посмотрели'; }
.b-cell.--30:before { content:'Аниме с числом в названии'; }
.b-cell.--31:before { content:'Аниме, в котором 2-5/6-12/13-20 серий'; }
.b-cell.--32:before { content:'Аниме, в котором 50/100/200 серий или более'; }
.b-cell.--33:before { content:'Аниме, которое входит в топ-10000/5000/2500'; }
.b-cell.--34:before { content:'Аниме, которое посмотрело меньше 1000/500/100 пользователей'; }
.b-cell.--35:before { content:'Аниме, которое добавило в список меньше 10000/5000/2500 пользователей'; }
.b-cell.--36:before { content:'Аниме, которое добавило в избранное 200/100/50 пользователей'; }
.b-cell.--37:before { content:'Дзёсэй'; }
.b-cell.--38:before { content:'Сёдзе'; }
.b-cell.--39:before { content:'Сёнен'; }
.b-cell.--40:before { content:'Сэйнен'; }
.b-cell.--41:before { content:'Аниме, в котором главный герой не соответствует жанру'; }
.b-cell.--42:before { content:'Аниме, к целевой аудитории которого вы не относитесь'; }
.b-cell.--43:before { content:'Аниме, к целевой аудитории которого вы относитесь'; }
.b-cell.--44:before { content:'Драму или романтику'; }
.b-cell.--45:before { content:'Фэнтези или мистику'; }
.b-cell.--46:before { content:'Юри или яой/ сёнен-ай или сёдзё-ай'; }
.b-cell.--47:before { content:'Комедию'; }
.b-cell.--48:before { content:'Повседневность или кулинарное аниме'; }
.b-cell.--49:before { content:'Аниме с гендерной интригой'; }
.b-cell.--50:before { content:'Ужасы или сверхъестественное'; }
.b-cell.--51:before { content:'Аниме про спорт или игры'; }
.b-cell.--52:before { content:'Экшен или приключения'; }
.b-cell.--53:before { content:'Аниме про суперсилу, демонов или вампиров'; }
.b-cell.--54:before { content:'Аниме про боевые искусства, историю или самураев'; }
.b-cell.--55:before { content:'Аниме про меху, полицейских или военных'; }
.b-cell.--56:before { content:'Психологическое аниме'; }
.b-cell.--57:before { content:'Научную фантастику или аниме про космос'; }
.b-cell.--58:before { content:'Аниме про школу'; }
.b-cell.--59:before { content:'Непристойное аниме (этти, эротика, хентай)'; }
.b-cell.--60:before { content:'Аниме, в котором сочетаются любимые и нелюбимые жанры (или тэги)'; }
.b-cell.--61:before { content:'Аниме в самом нелюбимом жанре'; }
.b-cell.--62:before { content:'Аниме про баттл-рояли/выживание'; }
.b-cell.--63:before { content:'Аниме, в котором милые девочки делают милые вещи или иясикей'; }
.b-cell.--64:before { content:'Аниме про волшебниц или волшебников'; }
.b-cell.--65:before { content:'Аниме о семье'; }
.b-cell.--66:before { content:'Аниме о еде, музыке или рисовании'; }
.b-cell.--67:before { content:'Аниме о природе'; }
.b-cell.--68:before { content:'Аниме с божествами'; }
.b-cell.--69:before { content:'Аниме с использованием мифологии/фольклора'; }
.b-cell.--70:before { content:'Аниме с путешествиями во времени'; }
.b-cell.--71:before { content:'Аниме в европейском сеттинге'; }
.b-cell.--72:before { content:'Аниме про антиутопию/апокалипсис/постапокалипсис'; }
.b-cell.--73:before { content:'Аниме про феодальную Японию'; }
.b-cell.--74:before { content:'Аниме про сельскую местность'; }
.b-cell.--75:before { content:'Аниме с необычной рисовкой'; }
.b-cell.--76:before { content:'Исекай'; }
.b-cell.--77:before { content:'Аниме с сильной главной героиней'; }
.b-cell.--78:before { content:'Аниме про зомби'; }
.b-cell.--79:before { content:'Аниме о мести'; }
.b-cell.--80:before { content:'Аниме, которое получило награду'; }
.b-cell.--81:before { content:'Аниме, где 5 или более главных героев'; }
.b-cell.--82:before { content:'Аниме, в котором главные персонажи совершеннолетние'; }
.b-cell.--83:before { content:'Аниме, где главный герой профессионал в чём-то'; }
.b-cell.--84:before { content:'Аниме, в котором главный герой носит очки'; }
.b-cell.--85:before { content:'Аниме с полулюдьми'; }
.b-cell.--86:before { content:'Аниме с животным в главной роли'; }
.b-cell.--87:before { content:'Аниме с главным героем злодеем/антигероем'; }
.b-cell.--88:before { content:'Аниме с ребёнком и взрослым'; }
.b-cell.--89:before { content:'Аниме с человеком и не-человеком в главной роли'; }
.b-cell.--90:before { content:'Аниме, в котором есть персонажи с инвалидностью'; }
.b-cell.--91:before { content:'Аниме, которое другой участник оценил на 8 и выше'; }
.b-cell.--92:before { content:'Аниме, которое другой участник оценил на 4 и ниже'; }
.b-cell.--93:before { content:'Аниме, которое один из администраторов клуба оценил на 8 и выше'; }
.b-cell.--94:before { content:'Аниме, которое один из администраторов клуба планирует посмотреть'; }
.b-cell.--95:before { content:'Аниме, которое рекомендовал кто-то из админов клуба'; }
.b-cell.--96:before { content:'Аниме, которое вам порекомендовал другой участник'; }
.b-cell.--97:before { content:'Аниме, которое один из администраторов или модераторов сайта добавил в избранное'; }
.b-cell.--98:before { content:'Аниме, которое находится в рекомендациях у аниме, которое вы посмотрели в рамках челленджа'; }
.b-cell.--99:before { content:'Аниме из персонализированных рекомендаций'; }
.b-cell.--100:before { content:'Аниме из общих рекомендаций'; }
.b-cell.--101:before { content:'Аниме, которое начало выходить в день вашей регистрации на шикимори (любой год и месяц)'; }
.b-cell.--102:before { content:'Аниме, которое начало выходить в месяц вашей регистрации на шикимори (любой день и год)'; }
.b-cell.--103:before { content:'Аниме, которое ваш друг давно вам советует'; }
.b-cell.--104:before { content:'Аниме с растением на обложке'; }
.b-cell.--105:before { content:'Аниме с животным на обложке'; }
.b-cell.--106:before { content:'Аниме с транспортом на обложке'; }
.b-cell.--107:before { content:'Аниме с погодой на обложке'; }
.b-cell.--108:before { content:'Аниме, которое начинается и заканчивается на одну букву'; }
.b-cell.--109:before { content:'Аниме, которое было в списке клуба'; }
.b-cell.--110:before { content:'Аниме, действия которого происходят за пределами Японии, но на Земле'; }
.b-cell.--111:before { content:'Аниме, основанное на мобильной игре или гаче'; }
.b-cell.--112:before { content:'Аниме, название которого начинается на последнюю букву вашего ника'; }
.b-cell.--113:before { content:'Аниме с 6 или более словами в названии'; }
.b-cell.--114:before { content:'Аниме с одним словом в названии'; }
.b-cell.--115:before { content:'Аниме с символами в названии (♪★☆♥△ и т.д.)'; }
.b-cell.--116:before { content:'Аниме из любимой коллекции'; }
.b-cell.--117:before { content:'Аниме, продолжение пилота'; }
.b-cell.--118:before { content:'Аниме, на которое был написан обзор одним из участников клуба'; }
.b-cell.--119:before { content:'Аниме сериал от 10 серий, который вы можете закончить за день'; }
.b-cell.--120:before { content:'Аниме, которое приостановили/отменили'; }
.b-cell.--121:before { content:'Аниме без отзывов, за написанный там отзыв +2 балла'; }
.b-cell.--122:before { content:'Аниме, которое началось в 60-ых и ранее'; }
.b-cell.--123:before { content:'Аниме, за которое вам дадут ачивку'; }
.b-cell.--124:before { content:'Аниме без комментариев'; }

/*Фиолетовая карточка*/
.bingo-grid {
        background: url(https://kawai.shikimori.one/system/user_images/original/50587/1934421.jpg) no-repeat center / cover; 
}

/*Крестик*/
.b-cell.--c:after {
    background: url(https://xtremetrampolinepark.co.uk/wp-content/uploads/2021/11/Xtreme-Trampoline-Logo-favicon.webp) no-repeat center / 80%;
}

[div=b-cell --61 --c][/div]
[div=b-cell --36 --c][/div]
[div=b-cell --24 --c][/div]
[div=b-cell --116 --c][/div]
[div=b-cell --19 --c][/div]
[div=b-cell --67 --c][/div]
[div=b-cell --31 --c][/div]

[div=bingo-animes-line][b]61.[/b] [anime=42897][/div]
[div=bingo-animes-line][b]36.[/b] [anime=48761][/div]
[div=bingo-animes-line][b]24.[/b] [anime=11741][/div]
[div=bingo-animes-line][b]116.[/b] [anime=14829][/div]
[div=bingo-animes-line][b]19.[/b] [anime=48926][/div]
[div=bingo-animes-line][b]67.[/b] [anime=572][/div]
[div=bingo-animes-line][b]31.[/b] [anime=10087][/div]