html,body{position:relative;margin:0;padding:0;width:100%;height:100%;overflow:hidden;}body,#header button,#bottom_menu_box button{font-size:22px;}body,button,a{color:#FFFFFF;font-family:"Microsoft YaHei","Noto SansCJK","Roboto","STHeitiSC-Light";-webkit-tap-highlight-color:transparent;}button{margin:0;padding:0;background-color:transparent;border:0 none;cursor:pointer;outline:none;text-shadow:2px 2px 6px #AAAAAA;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}button:focus,a:focus,a:focus h1{color:yellow;outline:none;background-color:rgba(255,255,255,0.2);}button:active{color:yellow;outline:none;background-color:rgba(255,255,255,0.2);}.show-hover button:hover,.show-hover a:hover,.show-hover a:hover h1{color:yellow;outline:none;background-color:rgba(255,255,255,0.2);}.opacity{opacity:0.1;}.radius-1em{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;}.radius{-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px;}.box-shadow{-webkit-box-shadow:2px 2px 6px #AAAAAA;-moz-box-shadow:2px 2px 6px #AAAAAA;box-shadow:2px 2px 6px #AAAAAA;}.iconfont{font-family:"iconfont";}.text-shadow{text-shadow:2px 2px 6px #AAAAAA;}.box-left,.box-right{float:left;box-sizing:border-box;width:50%;}.box-left{padding:0 7px 0 15px;}.box-right{padding:0 15px 0 7px;}.cup{position:relative;}.cup span,.cup-number{position:absolute;top:11%;left:0;padding:0;width:100%;font-size:0.4em;text-align:center;}#stage{opacity:0.8;position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;margin:0 auto;overflow:hidden;}#stage div{float:left;}#ctrl_panel{margin:0 auto;width:100%;}#header{height:50px;width:100%;padding:0;font-size:25px;line-height:50px;box-shadow:0 0 8px 0 #FFFFFF;}#page_title{float:left;margin-left:15px;color:#FFFFFF;text-decoration:none;}#page_title h1{margin:0;padding:0;font-size:1em;font-weight:normal;}#header #top_menu_box{float:right;margin-right:5px;}#top_menu_box .ctrl-btn{float:left;padding:0 10px;line-height:50px;}.sound-closed{display:none;position:absolute;text-shadow:1px 1px 4px #00111e;}#score_box{width:100%;padding:0 0 15px 0;}.score-desc{width:100%;box-shadow:1px 2px 4px 0 #FFFFFF;-webkit-border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;border-radius:0 0 9px 9px;}.desc-title{width:100%;padding:10px 0 8px;text-align:center;}.desc-content{width:100%;padding-bottom:12px;line-height:115%;}.usetime,.score{box-sizing:border-box;width:50%;}#score_box .usetime div{float:right;}.usetime-val{padding:0 10px 0 5px;}.score-name{padding:0 5px 0 10px;}#topic_box{display:none;position:relative;width:100%;height:auto;}#topic_panel{position:relative;border-radius:1px;}#sp_left,#sp_right{position:absolute;top:0;margin-top:-35px;}#sp_left{left:0;letter-spacing:2px;}#sp_right{right:0;letter-spacing:5px;}#topic_canvas{}#add_score,#sub_score,#add_life,#sub_life{display:none;position:absolute;top:0;left:0;margin-top:-30px;word-wrap:normal;word-break:keep-all;white-space:nowrap;}#life span{display:none;}#life.life-0 .life-i-0{display:block;}#life.life-1 .life-i-1{display:block;}#life.life-2 .life-i-2{display:block;}#life.life-3 .life-i-3{display:block;}#result_status span{display:none;}#result_status.right .status-right{display:inline-block;}#result_status.wrong .status-wrong{display:inline-block;}#sky_bg{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;background:linear-gradient(#000000 30%,#00111e);}#sky_bg_canvas,#meteor_canvas,#topic_canvas,#write_canvas{position:absolute;z-index:90;top:0;left:0;}#meteor_canvas{}#write_canvas{z-index:9999;}#bottom_menu_box{opacity:0.8;position:absolute;z-index:999900;bottom:5px;right:15px;}#bottom_menu_box div,#bottom_menu_box button{cursor:pointer;float:left;width:40px;height:30px;text-align:center;line-height:30px;}#bottom_menu_box #keyboard{display:none;margin-top:-90px;width:120px;height:120px;opacity:0.8;}#keyboard span{box-sizing:border-box;float:left;padding:3px;width:40px;height:30px;line-height:100%;}.status-show{display:none;}.status-hidden{display:block;}.show-kb .status-show{display:block;}.show-kb .status-hidden{display:none;}.cover{display:none;position:absolute;z-index:999990;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.05);}.cover-panel{position:relative;margin:0 auto;height:100%;width:100%;max-width:500px;}.cover-content{position:absolute;top:40%;margin-top:-20%;width:100%;height:100%;padding:0 20px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.cover-content h3{margin:0.5em 0;}.cover-content p{margin:0.5em 0;}.btn-hide-cover{position:absolute;right:0;width:1.5em;height:1.5em;font-size:1.5em;font-weight:900;border:0.1em solid #EEEEEE;text-align:center;cursor:pointer;margin:-0.7em 0 0 0;}.show-cover #topic_box,.show-cover #score_box,.show-cover #write_canvas,.show-cover #bottom_menu_box{animation:fadeout 0.5s 1 linear forwards;-moz-animation:fadeout 0.5s 1 linear forwards;-webkit-animation:fadeout 0.5s 1 linear forwards;opacity:0.1;}.cover-btn-box{position:absolute;z-index:999998;left:0;bottom:0;width:100%;}.cover-btn-box button{width:100%;margin:1.5em 0;font-size:1.2em;line-height:1.6em;border:1px dotted #EEEEEE;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);background-color:rgba(255,255,255,0.1);}.cover-btn-box button.active-focus{background-color:rgba(255,255,255,0.3);}.cover-btn-box button:focus,.show-hover .cover-btn-box button:hover{border:1px dotted yellow;box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);}#up_level .up-level-view{position:absolute;top:100%;left:0;width:100%;text-align:center;font-size:300px;}#up_level .up-level-view .level-number{position:absolute;width:100%;top:1.65em;left:0;text-align:center;font-size:0.25em;}#confirm_restart .cover-panel{font-weight:900;}#confirm_restart .cover-content{margin-top:-36%;}#confirm_restart .cover-restart-icon{width:100%;text-align:center;font-size:18em;line-height:1.02em;padding-top:0.13em;-webkit-border-radius:0.05em;-moz-border-radius:0.05em;border-radius:0.05em;background-color:rgba(255,255,255,0.05);box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);}#confirm_restart .icon-text{position:absolute;top:5.8em;width:100%;margin:0 -20px 0;text-align:center;font-size:1.5em;}#ready .help-text,#confirm_continue .help-text{box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);padding:0.2em 1em;font-size:0.8em;}#ready p,#confirm_continue p{text-indent:2em;}#ready .countdown,#confirm_continue .countdown{text-align:center;font-size:18em;line-height:1em;width:1em;margin:auto;background-color:rgba(255,255,255,0.05);box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);}#end_result h3{margin:0.5em 0;font-size:1em;}#end_result .end-result-content,#playing_rd .end-result-content{box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);padding:0.2em 1em;font-size:1.3em;}#rank_list .cover-content{margin-top:0;top:0;padding:60px 20px 60px;}#rank_list .cover-table{box-sizing:border-box;width:100%;float:left;box-shadow:2px 2px 3px 3px rgba(255,255,255,0.2);padding:0.2em 1em;font-size:1.3em;height:100%;overflow:hidden;}#rank_list .current-result{float:left;width:100%;margin:0 -1.22em 0 -1.2em;padding:0 1.22em 0.5em 1.2em;-webkit-box-shadow:0 6px 6px -6px rgba(255,255,255,0.2);-moz-box-shadow:0 6px 6px -6px rgba(255,255,255,0.2);box-shadow:0 6px 6px -6px rgba(255,255,255,0.2);}#rank_list .current-result div{float:left;}#rank_list h3{margin:0.5em 0;font-size:0.75em;}#rank_list .current-result p{float:left;margin:0.2em 1em 0 0;font-size:0.75em;}#rank_list .record-box{float:left;width:100%;margin:0.2em 0;}#record_list_clone{display:none;}#record_list{font-size:0.8em;}#record_list div{float:left;}.record-box ul,.record-box li{position:relative;float:left;margin:0;padding:0;width:100%;list-style-type:none;}.record-box ul{overflow-y:auto;padding:0.2em 0;}.record-box li{padding:0.2em 0;cursor:pointer;border-radius:0.2em;}.record-box li:nth-of-type(even){background-color:rgba(255,255,255,0.1);}.show-hover .record-box li:hover{background-color:rgba(255,255,255,0.2);}.rd-no{position:absolute;width:1.5em;height:100%;}.rd-content{box-sizing:border-box;width:100%;height:100%;padding-left:1.5em;line-height:100%;}.rd-1,.rd-2{position:relative;float:left;width:100%;line-height:1.5em;}.rd-2{display:none;}.score-content{width:5.8em;}.record-box li:hover .rd-2{display:block;}.rd-btn-box{position:absolute;right:0;}.rd-btn-box button{font-size:1em;width:2em;padding:0.1em 0 0 0;background-color:rgba(255,255,255,0.1);}#record_list .usetime-val{margin-right:0.5em;}#playing_rd{}.ctrl-btn-box{position:absolute;bottom:0;left:0;margin:0 0 0 -2px;padding:2px 6px 0 8px;border-radius:9px 9px 0 0;box-shadow:1px 1px 3px 3px rgba(255,255,255,0.5);}.ctrl-btn-box button{width:40px;height:40px;line-height:40px;font-size:22px;}.ctrl-btn-box>div,.ctrl-btn-box>button{float:left;}.btn-play-or-pause span{display:none;}.btn-play-or-pause.status-play .btn-play{display:block;}.btn-play-or-pause.status-pause .btn-pause{display:block;}.play-rd-progress{padding:0 10px;line-height:36px;font-size:20px;}#toast_box{display:none;position:fixed;z-index:999998;bottom:70px;width:100%;box-sizing:border-box;font-size:0.7em;}#toast_box .toast-content{box-sizing:border-box;width:100%;max-width:500px;margin:auto;padding:0 20px;}#toast_box .toast-text{box-sizing:border-box;width:100%;padding:0.5em 1em;font-weight:600;color:#FF5722;background-color:rgba(200,200,200,0.9);}#audio_box{width:1px;height:1px;overflow:hidden;position:absolute;z-index:0;}.late-at-night #sky_bg{background:linear-gradient(#000000 30%,#00111e);}.morning #sky_bg{background:linear-gradient(rgb(55,148,192) 30%,rgb(203,235,219));}.level-7 #sky_bg,.purple #sky_bg{background:linear-gradient(#48028D 30%,#7F4FAF);}.level-10 #sky_bg,.pink #sky_bg{background:linear-gradient(#DF4B85 30%,#ED76AC);}.level-11 #sky_bg,.red #sky_bg{background:linear-gradient(#B20000 30%,#C84949);}.level-1 #sky_bg{background:linear-gradient(#FF6600 30%,#FF9F5F);}.level-2 #sky_bg{background:linear-gradient(#EB9316 30%,#F0AD4E);}.level-3 #sky_bg{background:linear-gradient(#008000 30%,#51A851);}.level-4 #sky_bg,.green #sky_bg{background:linear-gradient(#006600 30%,#529752);}.level-5 #sky_bg,.cyan #sky_bg{background:linear-gradient(#00A2A2 30%,#00CCCC);}.level-6 #sky_bg,.blue #sky_bg{background:linear-gradient(#04477C 30%,#065FB9);}.level-8 #sky_bg,.black #sky_bg{background:linear-gradient(#232323 30%,#565656);}.level-9 #sky_bg,.aubergine #sky_bg{background:linear-gradient(#990099 30%,#C745C7);}#record_list li .rd-no,.no-other .rd-no{color:#EEEEEE;}#record_list li:nth-child(1) .rd-no,.no-first .rd-no{color:orangered;}#record_list li:nth-child(2) .rd-no,.no-two .rd-no{color:gold;}#record_list li:nth-child(3) .rd-no,.no-three .rd-no{color:yellow;}.hidden{display:none;}.floatup{position:absolute;top:0;left:0;animation:floatup 2s 1 linear forwards;-moz-animation:floatup 2s 1 linear forwards;-webkit-animation:floatup 2s 1 linear forwards;}.flyup{animation:flyup 2s 1 ease-in forwards;-moz-animation:flyup 2s 1 ease-in forwards;-webkit-animation:flyup 2s 1 ease-in forwards;}.flydown{animation:flydown 0.5s 1 linear forwards;-moz-animation:flydown 0.5s 1 linear forwards;-webkit-animation:flydown 0.5s 1 linear forwards;}.flyout{animation:flyout 0.5s 1 linear forwards;-moz-animation:flyout 0.5s 1 linear forwards;-webkit-animation:flyout 0.5s 1 linear forwards;}.shake{animation:shake 0.5s 1 linear forwards;-moz-animation:shake 0.5s 1 linear forwards;-webkit-animation:shake 0.5s 1 linear forwards;}.fadeout{animation:fadeout 0.5s 1 linear forwards;-moz-animation:fadeout 0.5s 1 linear forwards;-webkit-animation:fadeout 0.5s 1 linear forwards;}.fadeint{animation:fadeint 0.5s 1 linear forwards;-moz-animation:fadeint 0.5s 1 linear forwards;-webkit-animation:fadeint 0.5s 1 linear forwards;}@keyframes floatup{0%{margin-top:0px;}25%{margin-top:-10px;}50%{margin-top:-18px;}75%{margin-top:-25px;opacity:0.6;}100%{margin-top:-30px;opacity:0;}}@keyframes flyup{0%{top:20%;}25%{top:21%;}50%{top:20%;}75%{top:22%;}100%{top:-100%;}}@keyframes flydown{0%{top:-100%;opacity:0;}25%{top:-75%;opacity:0.8;}50%{top:-50%;opacity:1;}75%{top:-25%;}100%{top:-0%;}}@keyframes flyout{0%{top:-0%;}25%{top:-25%;}50%{top:-50%;}75%{top:-75%;}100%{top:-100%;display:none;}}@keyframes shake{0%{margin-left:5px;}25%{margin-left:-5px;}50%{margin-left:5px;}75%{margin-left:-5px;}100%{margin-left:0;}}@keyframes fadeout{0%{opacity:1.00;}25%{opacity:0.75;}50%{opacity:0.50;}75%{opacity:0.30;}100%{opacity:0.10;}}@keyframes fadein{0%{opacity:0.00;}25%{opacity:0.40;}50%{opacity:0.60;}75%{opacity:0.80;}100%{opacity:1.00;}}@media screen and (max-width:520px){#header h1,#header button,.cover-panel{font-size:22px;}#score_box{font-size:18px;}}@media screen and (max-width:450px){#header h1,#header button,.cover-panel{font-size:20px;}#score_box{font-size:16px;}}@media screen and (max-width:420px){#header h1,#header button,.cover-panel{font-size:19px;}#score_box{font-size:15px;}.usetime-val{padding:0 6px 0 4px;}.score-name{padding:0 4px 0 6px;}}@media screen and (max-width:380px){#header h1,#header button,.cover-panel{font-size:18px;}#score_box{font-size:14px;}.usetime-val{padding:0 6px 0 4px;}.score-name{padding:0 4px 0 6px;}}@media screen and (max-width:360px){#header h1,#header button,.cover-panel{font-size:16px;}#score_box{font-size:13px;}.usetime-val{padding:0 5px 0 3px;}.score-name{padding:0 3px 0 5px;}}@media screen and (max-width:330px){#header h1,#header button,.cover-panel{font-size:14px;}#score_box{font-size:12px;}.usetime-val{padding:0 5px 0 2px;}.score-name{padding:0 2px 0 5px;}}