html{margin:0;}
body{background:#000; color:#FFF; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; margin:0; overflow-x:hidden;}
img{max-width:100%;}
a{color:#FC0;}
.bdrbox{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

.welcome{position:fixed; top:0; left:100%; z-index:100; width:100%; height:100vh; padding:1em; box-sizing:border-box; background:rgba(0,0,0,0.9); overflow-x:hidden; overflow-y:auto;}
.welcome.active{left:0%;}
.welcome .skip{position:fixed; top:0; right:-100%; z-index:1; padding:0.25em 0.5em; border-left:2px solid #FFF; border-bottom:2px solid #FFF; background:#000;}
.welcome.active .skip{right:0;}
.welcome h2{border-top:2px solid #FFF;}
.welcome .paren{font-family:Helvetica, Arial, sans-serif; color:#999;}
.welcome .icon img{width:12px;}

.results{position:fixed; top:0; left:0; z-index:100; width:100%; height:100vh; padding:1em; box-sizing:border-box; background:rgba(0,0,0,0.9); overflow-x:hidden; overflow-y:auto;}
.results .close{position:absolute; top:0; right:0; padding:0.25em; border:1px solid; line-height:0; margin:0.25em;}

.ad-wrapper{width:100%; float:left; text-align:center;}
.ad-box{width:100%; float:left;}
.ad-box.footer-ad{position:fixed; bottom:-100%; z-index:1; text-align:center; background:#000; border-top:2px solid #FFF;}
.ad-box.footer-ad.active{bottom:0;}
.ad-box.footer-ad .ad-close{cursor:pointer; position:absolute; top:-0.75em; right:0; background:#000; border-radius:100em; border:2px solid #FFF; padding:0 0.2em;}
.ad-box.options-ad{margin:1em 0 0;}
.ad-box.welcome-ad{margin:0 0 1em;}
.ad-box.welcome-ad-bottom{margin:1em 0;}

.kana-box{width:100%; text-align:center; height:22vh; border-bottom:1px solid #FFF; position:relative; margin-bottom:0.5em;}
.kana-box .kana-char{font-size:5em; white-space:nowrap; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
.kana-box .kana-msg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
.kana-box .heard{border:1px solid; padding:0.5em; position:absolute; right:0; top:10%;}
.options-toggle, .stop-timer{position:absolute; top:0; width:5vw; padding:0.25em; border:1px solid #666; line-height:0; border-top:0;}
.options-toggle{left:0; border-left:0;}
.stop-timer{right:0; border-right:0; color:#666;}
.stop-timer.active{color:#FFF;}
.welcome-toggle, .get-results{position:absolute; top:50%; width:5vw; padding:0.25em; border:1px solid #666; line-height:0; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.welcome-toggle{border-left:0; left:0;}
.get-results{color:#666; border-right:0; right:0;}
.get-results.active{color:#FFF;}
.answers{position:absolute; bottom:0; width:100%;}
.answers > div{box-sizing:border-box; padding-left:1em;}
.answers .right{width:25%; float:left; background:rgba(0,255,0,0.5);}
.answers .wrong{width:25%; float:right; background:rgba(255,0,0,0.5);}
.answers .fa{font-size:0.75em; margin-left:0.25em; color:rgba(255,255,255,0.5);}
timer{position:absolute; top:0; left:50%; font-size:0.75em; font-family:Helvetica, Arial, sans-serif; text-align:right; padding:0.5em; color:#999; transform:translateX(-50%); -webkit-transform:translateX(-50%);}

.chars{text-align:center;}
.chars > div{display:inline; vertical-align:top;}
.set-name{display:none;}
.set{display:none; font-size:1.25em; color:rgba(255,255,255,0.25); text-align:center; vertical-align:top;}
.set.active{display:block; color:#FFF;}
.set .status, .set.active .char{cursor:pointer;}
.set .status{padding:1em; position:relative; line-height:1em; display:none;}
.set .status span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
.set .char{padding:0.25em; margin:0.25em 0; font-size:0.9em; width:2.25em; display:inline-block;}
.set.active .char{background:rgba(255,255,255,0.25); border-radius:0.25em;}
.set .char.empty{background:none;}
.set .char.wrong{background:rgba(255,0,0,1); opacity:0.5;}

.options{position:fixed; top:0; left:100%; z-index:10; opacity:0; width:100%; height:100vh; background:rgba(0,0,0,0.9); overflow-x:hidden; overflow-y:auto;}
.options.active{opacity:1; left:0;}
.options .title{font-size:2em; text-transform:uppercase; border-bottom:1px solid; text-indent:0.25em;}
.options .close{position:absolute; top:0; right:0; padding:0.25em; border:1px solid; line-height:0; margin:0.25em;}
.opt-title{text-transform:uppercase; font-size:0.65em;}
.options .reset{background:rgba(255,255,255,0.25); text-align:center; border-bottom:1px solid; padding:0.5em 0; margin:0 0 0.5em;}
.opt-set{border-bottom:1px solid; padding:0.5em 0; text-align:center; width:100%; float:left;}
.options .opt-btn{display:inline-block; padding:0.25em 0.5em; border:1px solid; margin:0.25em; color:#666; background:rgba(255,255,255,0.05);}
.options .opt-btn.active{background:rgba(255,255,255,0.25); color:#FFF;}
.options .opt-btn div{font-size:0.5em; letter-spacing:3px;}
.options .char-set{background:rgba(255,255,255,0.05); display:inline-block; color:#666; border:1px solid; padding:0.25em 0.375em; margin:0.1em -1px; width:2em;}
.options .char-set.youon{padding:0.25em 0.5em 0.25em 0.25em;}
.options .char-set.youon.char2{padding:0.25em 0.375em;}
.options .char-set.active{background:rgba(255,255,255,0.25); color:#FFF;}
.options .mobile-limit{font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#999; padding:0.25em 0;}

@media (min-width:480px){
}

@media (min-width:768px){
	.kana-box{height:25vh;}
	.kana-box .kana-char{font-size:13em;}
	.chars > div{display:inline-block; margin:1em 0.25em 0; border:1px solid #333; padding:0.25em; border-radius:1em;}
	.set-name{display:block; cursor:pointer; border:1px solid #333; border-radius:0.25em; background:#000; color:#444; position:relative; top:-0.75em; margin:0 1em; padding:0.25em;}
	.set-name.active{color:#FFF; background:#222;}
	.set, .set.active{display:inline-block;}
	.set .status, .set .char{display:block;}

	.options, .welcome{transition:0.5s; -webkit-transition:0.5s;}
}

@media (min-width:1024px){
	.kana-box{height:50vh;}
}

@media (min-width:1025px){
	.ad-box{transition:0.8s;}
}

@media (min-width:1280px){
}