html{height:100%;font-size:10px}body,ul,li{margin:0;padding:0}.page{display:flex;flex-direction:column;height:100%;font-family:sans-serif;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.page.page_dark{background-color:#777;color:#eee}.theme-check{position:absolute;top:1rem;right:1rem}.section{height:100%;padding:0 1rem}.section-in{max-width:84.5rem;height:100%;margin:0 auto}.svg-sprite{display:none}
.header{padding:3rem 2rem}.header__title{text-align:center}
.menu__list,.menu__item{margin:0;position:relative;list-style:none}.menu__list{display:flex;justify-content:center;align-items:center;-moz-column-gap:4rem;column-gap:4rem}.menu__link{text-decoration:none;color:currentColor}.menu__link:hover:not(.active){color:#aaa}.menu__link.active{font-weight:bold}
.footer{padding:2rem 0}
.main{flex-grow:1}
.game{display:flex;flex-direction:column;height:100%}.game__row-board{flex-grow:1}
.board{display:block;margin:0 auto}
.popup__overlay{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(170,170,170,.8);z-index:10}.popup__message{position:fixed;top:50%;left:50%;width:80%;max-width:70rem;background-color:#fff;border-radius:1rem;transform:translate(-50%, -50%);z-index:100}.popup__message-in{position:relative;padding:3rem}.btn.popup__btn{--first-color: #f00;--second-color: #fff;position:absolute;top:-2rem;right:-2rem;display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;padding:.6rem;line-height:1;color:red;border:1px solid red;border-radius:50%}.popup__text{text-align:center}
.btn{--first-color: #000;--second-color: #fff;display:block;width:2.6rem;height:2.6rem;padding:0;margin:0;color:currentColor;background-color:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer}.btn:hover{background-color:var(--first-color);color:var(--second-color)}.btn:active{transform:scale(0.9)}.page_dark .btn{--first-color: #fff;--second-color: #000}
.icon{display:block;width:100%;height:100%;fill:currentColor}
.panel{display:flex;justify-content:center;align-items:center;-moz-column-gap:1.2rem;column-gap:1.2rem;row-gap:.8rem;padding:1rem 0}
.display{display:flex;align-items:center;pointer-events:none}.display__icon{display:block;width:2rem;height:2rem;margin-right:.2rem}.display__output{width:1.2em;height:1.6em;padding:0 .2em;font-size:1.6rem;line-height:1.6;text-align:right;border:1px solid currentColor;border-radius:2px}.dispaly_long-rank .display__output{width:1.8em}.dispaly_time .display__output{width:2.6em}
.select{font-size:1.6rem;padding:.1rem .2rem}
.input{display:flex;align-items:center;-moz-column-gap:.6rem;column-gap:.6rem;row-gap:.6rem}.input__icon{display:block;width:2rem;height:2rem}.input__filed{font-size:1.6rem;width:4rem}
.scorce__item,.scorce__list{margin:0;padding:0;list-style:none}.scorce__item{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));padding-bottom:1rem}.score__title{flex-grow:1;padding-bottom:3rem;font-size:1.2em;font-weight:bold;text-transform:uppercase;text-align:center}.score__text{flex-grow:1;text-align:center}.score__caption{text-transform:uppercase;text-align:center}
.checkbox{--first-color: #000;--second-color: #fff;display:block;width:2.5rem;height:2.5rem;padding:.2rem;background-color:rgba(0,0,0,0);border-radius:50%;cursor:pointer}.checkbox:hover{color:var(--second-color);background-color:var(--first-color)}.checkbox:active{transform:scale(0.9)}.page_dark .checkbox{--first-color: #fff;--second-color: #000}.checkbox__icon-on{display:none}.checkbox__input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none}.checkbox__input:checked~.checkbox__icon-off{display:none}.checkbox__input:checked+.checkbox__icon-on{display:block}