*{box-sizing:border-box}body,html{padding:0;margin:0;background-color:#222}.container{display:flex;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.display{font-family:monospace;background-color:#6d775c;border:1px solid;width:calc(var(--height)*0.74);position:relative}.display,.snake{--height:60vh;display:flex;flex-direction:row;height:var(--height)}.snake{border:.5vh solid;align-items:stretch;flex-grow:0;flex-shrink:0;width:calc(var(--height)*0.5)}.snake__display{flex-grow:1;width:100%;height:100%}.help{--height:60vh;border:.5vh solid;background-color:#6d775c;padding:1vh 1.2vh;position:absolute;font-size:3.5vh;left:0;top:0;width:calc(var(--height)*0.5);height:var(--height)}.help__header{font-size:1em;text-align:center;padding-top:1vh;padding-bottom:2vh}.help__content{font-size:.4em;font-family:monospace;padding:0;white-space:pre;line-height:.7}.help_hidden{display:none}.info{flex-grow:1}.info,.info-block{display:flex;flex-direction:column}.info-block{padding:2vh;user-select:none}.info-block__label{font-weight:700}.info-block__label,.info-block__value{font-size:2vh;display:block;text-align:right}.controls{padding-top:3vh}.controls__main{display:flex;flex-direction:row;justify-content:space-between}.controls__reset{justify-content:space-around;margin-bottom:2vh}.controls__arrows,.controls__reset{display:flex;flex-direction:row;align-items:center}.controls__arrows{flex-wrap:wrap;justify-content:center;width:25vh}.controls__arrows-line{display:flex;justify-content:center;align-items:center;width:100%}.controls__arrows-line_wide{justify-content:space-between}.push-button{background-color:#f4d942;border-radius:100%;border:2px solid rgba(0,0,0,.1);outline:none;font-family:monospace;font-size:2vh}.push-button_small{width:3.5vh;height:3.5vh}.push-button_middle{width:8vh;height:8vh}.push-button_big{width:15vh;height:15vh}.push-button_active{background-color:orange}.top-part{display:flex}.button-block{user-select:none;text-align:center}.button-block__label{color:#fff;display:inline-block;width:100%;text-align:center;font-family:monospace;font-size:1.4vh;padding-bottom:.4vh}.side-panel{padding:2vh 1vh 2vh 0}.score-table,.side-panel{display:flex;flex-direction:column}.score-table{--height:60vh;border:.5vh solid;background-color:#6d775c;padding:1vh 1.2vh;position:absolute;font-size:3.5vh;left:0;top:0;width:calc(var(--height)*0.5);height:var(--height);justify-content:flex-start}.score-table__header{font-size:1em;text-align:center;padding-top:1vh;padding-bottom:2vh}.score-table__content{flex-grow:1;font-size:.2em;font-family:monospace;padding:0 0 1vh;white-space:pre;line-height:.7;overflow:hidden}.score-table__page-down,.score-table__page-up{width:2.5vh;height:2.5vh;position:absolute;right:0;border:.1vh solid;background-repeat:no-repeat;background-position:50%;background-size:contain}.score-table__page-up{top:0;background-image:url(img/page-up.svg)}.score-table__page-down{bottom:0;background-image:url(img/page-down.svg)}.score-table__table{border:0;font-size:2.2em;font-family:monospace;position:relative;width:calc(var(--height)*0.42)}.score-table__table-header_left{text-align:left}.score-table__table-header_right{text-align:right}.score-table__item_active{font-weight:700}.score-table__item-score,.score-table__item-text{padding-top:1vh}.score-table__item-score{text-align:right}.score-table_hidden{display:none}.name-field{--height:60vh;border:.5vh solid;background-color:#6d775c;padding:1vh 1.2vh;position:absolute;font-size:3.5vh;left:0;top:0;width:calc(var(--height)*0.5);height:var(--height);display:flex;flex-direction:column;justify-content:flex-start}.name-field__header{font-size:1em;text-align:center;padding-top:1vh;padding-bottom:2vh}.name-field__content{flex-grow:1;font-size:.4em;font-family:monospace;padding:0 0 1vh;white-space:pre;line-height:.7;overflow:hidden}.name-field__input,.name-field__keyboard{font-size:2.2em;font-family:monospace}.name-field__keyboard{border:0;position:relative;display:grid;grid-auto-rows:auto;grid-gap:.5vh;grid-template-columns:repeat(8,1fr)}.name-field__done,.name-field__symbol{display:flex;justify-content:center}.name-field__symbol{border:.25vh solid transparent;padding:.25vh;align-items:center;cursor:pointer}.name-field__symbol_active{border-color:#222}.name-field__symbol_done{font-size:2.2em}.name-field_hidden{display:none}.display__info{flex-shrink:0;flex-grow:0}.side-panel__button-block{margin-bottom:2vh}.side-panel__button-block:last-child{margin-bottom:0}