Simon Game

index.html

<div class="wrapper">
          <span role="hole">
              <div id="status"></div>
          </span>
          <section id="gaming-buttons">
              <button role="one" class="a"></button>
              <button role="two" class="s"></button>
              <button role="three" class="d"></button>
              <button role="four" class="f"></button>
          </section>
            
          <div id="info">
              <div id="score">0000000</div>
              <div id="level">0</div>
              <div id="mode-text">normal</div>
          </div>
        </div>
        
        <div id="controls">
            <button id="space" class="key">space bar</button> <span><b>new game</b></span>
            <button id="esc" class="key">esc</button> <span><b>reset</b></span>
            
            <hr />
            
            <b>mode</b>
            <form id="mode">
                <input type="radio" name="mode" id="normal" checked>
                <label id="one" class="key" for="normal">1</label>
                <input type="radio" name="mode" id="expert">
                <label id="two" class="key" for="expert">2</label>
                <input type="radio" name="mode" id="hell">
                <label id="three" class="key" for="hell">3</label>
            </form>
                
            <hr />
            
            <b>volume</b> 
            <button id="up" class="key">&#8592;</button> <span>=</span>
          <button id="plus" class="key">+</button> |
          <button id="down" class="key">&#8594;</button> <span>=</span> <button id="minus" class="key">-</button>
        </div>
        
        
        <div id="message"><div class="container"></div></div>
                
        <div id="stuff">
            <h1>asdf</h1>
          <p> A remake of that old game, "Simon." </p>
          
          <hr>
          
          <h2>KOG</h2>
            <p>
                This is a <button class="key">K</button>eyboard<button class="key">O</button>nly<button class="key">G</button>ame.
            </p>
          <hr />
          <p> 2012 by Marcello Africano </p>
        </div>

script.js

(function() {
    var _this;
    
    /*
     * Constructor
     */
    Asdf = function() {
        // Reference to root
        _this = this;
        
        // Get dom elements
        var buttons = this.getButtons();
       
        this.dom = {};
        this.dom.body = document.getElementsByTagName('body')[0];
        this.dom.wrapper = document.getElementsByClassName('wrapper')[0];
        this.dom.controls = this.getId('controls');
        this.dom.spacebar = this.getId('space');
        this.dom.esc = this.getId('esc');
        this.dom.one = this.getId('one');
        this.dom.two = this.getId('two');
        this.dom.three = this.getId('three');
        this.dom.up = this.getId('up');
        this.dom.down = this.getId('down');
        this.dom.message = this.getId('message');
        this.dom.status = this.getId('status');
        this.dom.score = this.getId('score');
        this.dom.level = this.getId('level');
        this.dom.tweet = this.getId('tweet');
        this.dom.tweetlink = this.getId('tweet-link');
        this.dom.noclick = this.getId('noclick');
        this.dom.info = this.getId('info');
        this.dom.mode = this.getId('mode');
        this.dom.modetext = this.getId('mode-text');
        
        // Options
        this.o = {};
        this.o.elements = {};
        this.o.elements['a'] = buttons[0];
        this.o.elements['s'] = buttons[1];
        this.o.elements['d'] = buttons[2];
        this.o.elements['f'] = buttons[3];
        this.o.types = ['a', 's', 'd', 'f'];
        
        // Audio
        this.o.audio = [];
        this.o.volume = .15;
        this.o.wave = [];
        this.o.data = [];
        this.o.data['a'] = [];
        this.o.data['s'] = [];
        this.o.data['d'] = [];
        this.o.data['f'] = [];
        
        // Game
        this.o.list = [];
        this.o.count = 0;
        this.o.started = false;
        
        // Register listener
        this.dom.body.onkeydown = this.keyboard.receive;
        this.dom.body.onkeyup = this.keyboard.receive;
        this.dom.body.onclick = this.clickizr;
        
        // Button clicked stuff
        Events.subscribe('a', this.dong);
        Events.subscribe('s', this.dong);
        Events.subscribe('d', this.dong);
        Events.subscribe('f', this.dong);
        
        // Game listener
        Events.subscribe('a-triggered', this.listener);
        Events.subscribe('s-triggered', this.listener);
        Events.subscribe('d-triggered', this.listener);
        Events.subscribe('f-triggered', this.listener);
        
        // Game mode
        Events.subscribe('mode', this.mode.change);
        
        // Init audio
        _this.audio.init();
        
        // Get focus
        this.dom.body.focus();
    }
        
    Asdf.prototype.getId = function(id) {
        return document.getElementById(id);
    }
 
    Asdf.prototype.mode = {
        number : 1,
 
        change : function() {
            _this.mode.number = arguments[0];

            // Restart game if running
            if (_this.o.started) {
                _this.o.started = false;
                _this.game.live = false;
                _this.gogogo();
            }
    
            // normal
            if (_this.mode.number == 1) {
                _this.mode.switchMode('normal');
                
                // status: true
                _this.dom.status.style.display = 'block';
                
                for (i = 0; i < _this.o.types.length; i++) {
                    var type = _this.o.types[i];
                    
                    // button text : true
                    _this.o.elements[type].style.color = '';
                    _this.o.elements[type].style.textShadow = '';
                }
            }
                
            // not easy
            if (_this.mode.number == 2) {
                _this.mode.switchMode('not easy');
                
                // status: true
                _this.dom.status.style.display = 'block';
                
                for (i = 0; i < _this.o.types.length; i++) {
                    var type = _this.o.types[i];
                    
                    // button text : true
                    _this.o.elements[type].style.color = '';
                    _this.o.elements[type].style.textShadow = '';
                }
            }

            // hell
            if (_this.mode.number == 3) {
                _this.mode.switchMode('hell');
                
                // status: false
                _this.dom.status.style.display = 'none';
                
                for (i = 0; i < _this.o.types.length; i++) {
                    var type = _this.o.types[i];
                    
                    // button text : false
                    _this.o.elements[type].style.color = 'transparent';
                    _this.o.elements[type].style.textShadow = 'none';
                }
            }
        },
            
       getMode : function() {
            switch (_this.mode.number) {
                case 1 : return 'normal';
                break;
            
                case 2 : return 'not easy';
                break;
                    
                case 3 : return 'hell';
                break;
                    
                default:; 
            }
       },
            
        switchMode : function(text) {
            _this.dom.modetext.innerHTML = text;   
            _this.dom.modetext.className = 'active';    

            _this.dom.body.className = text.split(' ').join('');
            setTimeout(function() {
                _this.dom.modetext.className = '';
            }, 250);
        },
            
        getLevel : function() {
            var listLength = _this.o.list.length;
            
            switch (_this.mode.number) {
                case 2 : listLength = listLength / 2;
                break;
                    
                case 3 : listLength = listLength / 2;
                break;
                    
                default:; 
            }
 
            return listLength;
        },
            
        getScore : function() {
            var score = parseInt(_this.dom.score.innerHTML) + (_this.o.list.length * _this.o.list.length);

            switch (_this.mode.number) {
                case 2 : score = parseInt(score * 1.5);
                break;
                    
                case 3 : score = parseInt(score * 3);
                break;
                    
                default:; 
            }
 
            return score;
            
        }
    }
       
    /*
     * Display messages
     */       
    Asdf.prototype.message = {
        show : function(o) {
           _this.message.hide();
    
           // Predefined message: game over
           if (o.type == 'lose') {
               _this.dom.message.className += ' lose';
               _this.dom.controls.className += ' inactive';
               _this.dom.wrapper.className += ' inactive';
               _this.dom.body.className += ' inactive';
               
               var type = _this.o.list[_this.o.count],
                   level = (parseInt(_this.dom.level.innerHTML) - 1);
               
               _this.dom.message.innerHTML = 
                   '<div class="container">'+
                   '<h2>GAME OVER</h2>'+
                   '<p>' + 
                     '<b>score</b> <span class="info-style">' + _this.dom.score.innerHTML + '</span> '+
                     '<b>level</b> <span class="info-style">' + level + '</span>'+
                   
                     '<b>mode</b> <span class="info-style">' + _this.mode.getMode() + '</span>'+
                   '</p>'+
                   '<hr>'+
                   '<p>'+
                     '<a id="tweet-link" href="http://twitter.com/share?text=Can+you+beat+my+score+'+_this.dom.score.innerHTML+'+on+level+' + level + '+(' + _this.mode.getMode() + ')?&via=js13kgames&hashtags=asdf&url=http://js13kgames.com/entries/asdf" target="_blank"><button id="tweet" class="key">t</button> Tweet your score</a>'+
                   '</p>'+
                   '<hr class="small">'+
                   '<p>'+
                     '<button class="key '+type+'">'+type+'</button> was the next key,'+
                   '</p>'+
                   '<p>'+
                   'but you pushed <button class="key '+o.key+'"">'+o.key+'</button> <b class="smiley">D:</b>'+
                   '</p>'+
                   '</div>';
           }
    
           // Predefined message: level completed
           if (o.type == 'win') {
               _this.dom.message.className += ' win';
               _this.dom.message.innerHTML = '<div class="container"><h1>LEVEL COMPLETED</h1></div>';
           }

            if (o.type == 'levelmode') {
                _this.dom.message.className += ' levelmode';
                _this.dom.message.innerHTML = '<div class="container"><h1>' + o.text + '</h1></div>';
            }
        
           // Show message
           _this.dom.message.className += ' active';
        },
        hide : function() {
           _this.dom.message.className = '';
           _this.dom.controls.className = '';
           _this.dom.body.className = _this.dom.body.className.replace('inactive', '');
           _this.dom.wrapper.className = 'wrapper';     
        }
    }
    
    /*
     * Handle audio
     */            
    Asdf.prototype.audio = {
        
        init : function() {
            var i = 5000;
            while (i<15000) { 
                _this.o.data['a'][i++] = 64+Math.round(32*(Math.cos(i*i/2000)+Math.sin(i*i/4000)));
                _this.o.data['a'][i++] = 64+Math.round(32*(Math.cos(i*i/2000)+Math.sin(i*i/4000)));
                //_this.o.data['a'][i++] = 128+Math.round(97*Math.sin(i/90)); // left speaker
                //_this.o.data['a'][i++] = 88+Math.round(87*Math.cos(i/60)); // right speaker
            }
    
            i = 10000;
            while (i<20000) { 
                _this.o.data['s'][i++] = Math.round(Math.cos(i % 100) * 5);
                _this.o.data['s'][i++] = Math.round(Math.cos(i % 100) * 5);
            }
    
            i = 1000;
            while (i<15000) { 
                _this.o.data['d'][i++] = 228+Math.round(87*Math.cos(i/20));
                _this.o.data['d'][i++] = 128+Math.round(97*Math.cos(i/80)); 
            }
    
            i = 8000;
            while (i<20000) { 
                /*_this.o.data['f'][i++] = 88+Math.round(87*Math.cos(i/20));
                _this.o.data['f'][i++] = 88+Math.round(87*Math.cos(i/60)); */
                _this.o.data['f'][i++] = Math.abs(250 - (i % 180));
                _this.o.data['f'][i++] = Math.abs(250 - (i % 180));
            }
    
            for (var x = 0; x < _this.o.types.length; x++) {
                var type = _this.o.types[x];
                
                _this.o.wave[type] = new RIFFWAVE();
                _this.o.wave[type].header.sampleRate = 44100;
                _this.o.wave[type].header.numChannels = 2;
                _this.o.wave[type].Make(_this.o.data[type]); 
                
                _this.o.audio[type] = new Audio();
                _this.o.audio[type].volume = _this.o.volume;
                _this.o.audio[type].src = _this.o.wave[type].dataURI; // set audio source
            }
    
        },
            
        play : function(type) {
            if (_this.o.volume > 0) {
                _this.o.audio[type].currentTime = 0;
                _this.o.audio[type].play();    
            }
        },
            
        volumeUp : function() {
            if (_this.o.volume < .92) {
                _this.o.volume += .05;
                _this.audio.changeVolume();
            }
        },
            
        volumeDown : function() {
            if (_this.o.volume > 0) {
                _this.o.volume -= .05;

                if (_this.o.volume <= 0) {
                    _this.o.volume = 0;
                }

                _this.audio.changeVolume();
            }
        }, 
                
        changeVolume : function() {
            for (var x = 0; x < _this.o.types.length; x++) {
                var type = _this.o.types[x];
                _this.o.audio[type].volume = _this.o.volume;
            }
        }
    }
                
    /*
     * Handle keyboard interactions
     */    
    Asdf.prototype.keyboard = {
                
        receive : function(e) {
          
            // spacebar
            if (e.keyCode == 32) {
                e.preventDefault();
                
                if (e.type == 'keydown') {
                   _this.gogogo();
                }
                _this.keyboard.pushState(e, _this.dom.spacebar);
            }
                    
            // esc
            if (e.keyCode == 27) {
                if (e.type == 'keydown') {
                    _this.game.reset();
                    _this.game.live = false;
                }
                _this.keyboard.pushState(e, _this.dom.esc);
            }
                
            // left
            if (e.keyCode == 37) {
                if (e.type == 'keydown') {
                  _this.audio.volumeDown();
                }
                _this.keyboard.pushState(e, _this.dom.up);
            }
                
            // right
            if (e.keyCode == 39) {
                if (e.type == 'keydown') {
                    
                    _this.audio.volumeUp();
                }
                _this.keyboard.pushState(e, _this.dom.down);
            }
                
            // 1 - mode: normal
            if (e.keyCode == 49) {
                if (_this.dom.mode.mode[0].checked) {
                    Events.publish('mode', [1]);
                }
                _this.dom.mode.mode[0].checked = true;
                _this.keyboard.pushState(e,  _this.dom.one);
            }

            // 2 - mode: expert
            if (e.keyCode == 50) {
                if (_this.dom.mode.mode[1].checked) {
                    Events.publish('mode', [2]);
                }
                _this.dom.mode.mode[1].checked = true;
                _this.keyboard.pushState(e,  _this.dom.two);
            }

            // 3 - mode: hell
            if (e.keyCode == 51) {
                if (_this.dom.mode.mode[2].checked) {
                    Events.publish('mode', [3]);
                }
                _this.dom.mode.mode[2].checked = true;
                _this.keyboard.pushState(e,  _this.dom.three);
            }
            
            // a
            if (e.keyCode == 97 || e.keyCode == 65) {
                Events.publish('a', ['a', e.type]);
            }
            
            // s
            if (e.keyCode == 115 || e.keyCode == 83) {
                Events.publish('s', ['s', e.type]);
            }
            
            // d
            if (e.keyCode == 100 || e.keyCode == 68) {
                Events.publish('d', ['d', e.type]);
            }
            
            // f
            if (e.keyCode == 102 || e.keyCode == 70) {
                Events.publish('f', ['f', e.type]);
            }
            
            // t
            if (e.keyCode == 84) {
                if (e.type == 'keydown') {
                    _this.dom.tweetlink = _this.getId('tweet-link');
                    
                    if (_this.dom.tweetlink != undefined) {
                        window.open(_this.dom.tweetlink.href, 'asdf-tweet-your-score');
                    }
                }
            }            
        },
                
        pushState : function(e, element) {
          if (e.type == 'keydown') {
              element.className = element.className.replace('active', '');
              element.className += ' active';
          } else {
              element.className = element.className.replace('active', '');
          }
       }
    }
    
    // @TODO: Create some awesome stuff :D                
    Asdf.prototype.clickizr = function(e) {
    }
                
    Asdf.prototype.getButtons = function(id) {
        return document.getElementById('gaming-buttons').getElementsByTagName('button');
    }

    /*
     * Handle the button active/inactive state and events
     */    
    Asdf.prototype.dong = function() {
        var type = arguments[0],
            event = arguments[1];
        
        // Handle css stuff
        if (event == 'keyup') {
            _this.o.elements[type].className = '';
        } else {
            _this.o.elements[type].className = 'active';
            
            // Playback riff sounds
            _this.audio.play(type);
            
            // Fire game stuff
            Events.publish(type + '-triggered', [type, _this.o.count]);
        }
    }
        
    Asdf.prototype.gogogo = function() {
        // Game is not started/finished
        if (!_this.game.live) {
            _this.game.live = true;
        
            _this.game.reset();
            
            _this.dom.info.className = 'active';
        
            // Trigger the game
            _this.game.next();
        }
    }
            
    Asdf.prototype.addElement = function() {
        if (_this.mode.number >= 2) {
            _this.o.list.push(_this.o.types[(Math.floor(Math.random() * _this.o.types.length))]);
        }
            
        _this.o.list.push(_this.o.types[(Math.floor(Math.random() * _this.o.types.length))]);
    }
    
    // Handle game stuff        
    Asdf.prototype.game = {
        count : 0,
        
        live : false,
        
        reset : function() {
            count = 0;
       
            // Reset the game
            _this.o.started = false;

            // Reset level list
            _this.o.list = [];

            // Hide info (score/level)
            _this.dom.info.className = '';

            // Reset score
            _this.game.updateScore();

            // Reset level count
            _this.dom.level.innerHTML = 0;

            // Hide message
            _this.message.hide();

            // Hide status
            _this.game.status.hide();
        },
        
        next : function() {
            count = 0;
        
            // Next element
            _this.addElement();

            // Show message
            _this.message.show({type : 'levelmode', text : 'LEVEL ' + _this.mode.getLevel() + ' <span class="info-style-2">' + _this.mode.getMode() + '</span>'});

            // Update level
            _this.game.updateLevel();

            // Trigger the game
            setTimeout(function() {
                _this.trigger(_this.o.list, count);
            }, 350);
        },
        
        won : function() {
            _this.o.started = false;

            // Update score
            _this.game.updateScore();

            // Hide status
            _this.game.status.hide();
                    
            _this.o.count = 0;
           
            _this.message.show({type : 'win'});

            setTimeout(function() {
                _this.game.next();
            }, 750);
        },
            
        lose : function(wrongtype) {
            _this.message.show({type : 'lose', key : wrongtype});

            _this.game.live = false;
            _this.o.started = false;
            _this.o.count = 0;
        },
            
        updateScore : function() {
            var width = 8,
                score = _this.mode.getScore();
              
            if (_this.o.list.length == 0) {
                score = 0;                
            }
            
            width -= score.toString().length;

            // Fill with zero
            if (width > 0) {
                score = new Array( width + (/\./.test( score ) ? 2 : 1) ).join( '0' ) + score;
            }

            // Change text
            _this.dom.score.innerHTML = score + "";

            // Update effect
            _this.dom.score.className = 'active';
            setTimeout(function() {
                    _this.dom.score.className = '';
            }, 250);
        },
            
        updateLevel : function() {
            _this.dom.level.innerHTML = _this.mode.getLevel();

            // Update effect
            if (_this.o.list.length > 0) {
                _this.dom.level.className = 'active';
                setTimeout(function() {
                    _this.dom.level.className = '';
                }, 250);
            }
        },
            
        status : {
            show : function(options) {
                _this.dom.status.innerHTML = options.text;

               // if (_this.dom.status.className.search('active'
                _this.dom.status.className = _this.dom.status.className.replace('active', '');
                _this.dom.status.className += ' active';
            },
            
            hide : function() {
                _this.dom.status.className = _this.dom.status.className.replace('active', '');

            }
        }
    }
        
    Asdf.prototype.trigger = function(list, count) {
        var type = list[count];
        
        setTimeout(function() {
            Events.publish(type, [type, 'keydown']);
            
            // Listen ultra fast
            if (list[count + 1] == undefined) {
              _this.o.started = true;
              
              // Hide message
              _this.message.hide();
               
              // Show process
              _this.game.status.show({ text : _this.o.count + '/' + _this.o.list.length});
              
              setTimeout(function() {
                Events.publish(type, [type, 'keyup']);
              }, 250);
            } else {
    
            setTimeout(function() {
                Events.publish(type, [type, 'keyup']);
                
                if (list[count++] != undefined) {
                    setTimeout(function() {
                        _this.trigger(list, count);
                    }, 50);
                } else {
                    _this.o.started = true;
                    
                   // Hide message
                   _this.message.hide();
                    
                   // Show process
                   _this.game.status.show({ text : _this.o.count + '/' + _this.o.list.length});
                }
            }, 200);
            }
        }, 150);
    }
        
    Asdf.prototype.listener = function(type, count) {
        var type = arguments[0],
            count = arguments[1];
    
        // Don't start until the show is over
        if (_this.o.started) {
                // Playing
                if (type == _this.o.list[count]) {
                    _this.o.count++;
                    
                    // Show process
                    _this.game.status.show({ text : _this.o.count + '/' + _this.o.list.length});
                    
                    // Game won
                    if (_this.o.list[count + 1] == undefined) {
                      _this.game.won();                        
                    }
                } else {
                    _this.game.lose(type);
                }
        }
    }
        
   
    function domLoaded() {
      if (document.readyState === 'complete') {
        var hack =  document.getElementsByTagName('body')[0];
        
        // This prevents the code from beeing executed twice
        // which is a codepen bug
        if (hack.className.search('hacked') == -1) {
          hack.className += ' hacked';
          /* A new game */
          var Game = new Asdf();
        }
      } else {
          setTimeout(function() {
              domLoaded();
          }, 25);
      }
    }

    // DOM loaded
    domLoaded();

}).call(this);

style.css

* {
    box-sizing: border-box;
}

body {
  height: 100%;
  padding:40px 0 0 0;
  overflow-x:hidden;
  font:18px "Lucida Grande", Lucida, Arial, sans-serif;
  margin: 0;
  
  /* fallback 1 */
  background-color:#bbb;
  
  background-image:linear-gradient(left, rgba(238,196,135,.5) 0%,rgba(243,207,154,.5) 3%,rgba(248,216,162,.5) 6%,rgba(243,207,154,.5) 6%,rgba(243,207,154,.5) 9%,rgba(241,202,136,.5) 12%,rgba(243,207,154,.5) 15%,rgba(244,208,158,.5) 17%,rgba(243,207,154,.5) 19%,rgba(243,207,154,.5) 21%,rgba(250,221,176,.5) 23%,rgba(250,221,176,.5) 25%,rgba(243,207,154,.5) 27%,rgba(238,200,138,.5) 29%,rgba(243,207,154,.5) 29%,rgba(243,207,154,.5) 32%,rgba(243,207,154,.5) 34%,rgba(243,207,154,.5) 37%,rgba(250,221,176,.5) 40%,rgba(250,221,176,.5) 43%,rgba(243,207,154,.5) 43%,rgba(243,207,154,.5) 44%,rgba(243,207,154,.5) 47%,rgba(238,200,138,.5) 49%,rgba(243,207,154,.5) 52%,rgba(250,221,176,.5) 54%,rgba(244,208,158,.5) 56%,rgba(243,207,154,.5) 59%,rgba(244,208,158,.5) 61%,rgba(250,221,176,.5) 64%,rgba(243,207,154,.5) 64%,rgba(244,208,158,.5) 66%,rgba(243,207,154,.5) 69%,rgba(248,216,162,.5) 71%,rgba(243,207,154,.5) 74%,rgba(243,207,154,.5) 76%,rgba(243,207,154,.5) 77%,rgba(243,207,154,.5) 80%,rgba(250,221,176,.5) 81%,rgba(243,207,154,.5) 83%,rgba(250,221,176,.5) 83%,rgba(250,221,176,.5) 85%,rgba(243,207,154,.5) 87%,rgba(250,221,176,.5) 89%,rgba(250,221,176,.5) 91%,rgba(243,207,154,.5) 92%,rgba(248,216,162,.5) 96%,rgba(243,207,154,.5) 97%,rgba(243,207,154,.5) 97%,rgba(243,207,154,.5) 98%,rgba(243,207,154,.5) 100%),
    linear-gradient(right, rgba(238,196,135,.3) 0%,rgba(243,207,154,.3) 3%,rgba(248,216,162,.3) 6%,rgba(243,207,154,.3) 6%,rgba(243,207,154,.3) 9%,rgba(241,202,136,.3) 12%,rgba(243,207,154,.3) 15%,rgba(244,208,158,.3) 17%,rgba(243,207,154,.3) 19%,rgba(243,207,154,.3) 21%,rgba(250,221,176,.3) 23%,rgba(250,221,176,.3) 25%,rgba(243,207,154,.3) 27%,rgba(238,200,138,.3) 29%,rgba(243,207,154,.3) 29%,rgba(243,207,154,.3) 32%,rgba(243,207,154,.3) 34%,rgba(243,207,154,.3) 37%,rgba(250,221,176,.3) 40%,rgba(250,221,176,.3) 43%,rgba(243,207,154,.3) 43%,rgba(243,207,154,.3) 44%,rgba(243,207,154,.3) 47%,rgba(238,200,138,.3) 49%,rgba(243,207,154,.3) 52%,rgba(250,221,176,.3) 54%,rgba(244,208,158,.3) 56%,rgba(243,207,154,.3) 59%,rgba(244,208,158,.3) 61%,rgba(250,221,176,.3) 64%,rgba(243,207,154,.3) 64%,rgba(244,208,158,.3) 66%,rgba(243,207,154,.3) 69%,rgba(248,216,162,.3) 71%,rgba(243,207,154,.3) 74%,rgba(243,207,154,.3) 76%,rgba(243,207,154,.3) 77%,rgba(243,207,154,.3) 80%,rgba(250,221,176,.3) 81%,rgba(243,207,154,.3) 83%,rgba(250,221,176,.3) 83%,rgba(250,221,176,.3) 85%,rgba(243,207,154,.3) 87%,rgba(250,221,176,.3) 89%,rgba(250,221,176,.3) 91%,rgba(243,207,154,.3) 92%,rgba(248,216,162,.3) 96%,rgba(243,207,154,.3) 97%,rgba(243,207,154,.3) 97%,rgba(243,207,154,.3) 98%,rgba(243,207,154,.3) 100%),
    linear-gradient(left, rgba(238,196,135,.3) 0%,rgba(243,207,154,.3) 3%,rgba(238,200,138,.3) 49%,rgba(243,207,154,.3) 52%,rgba(250,221,176,.3) 54%,rgba(244,208,158,.3) 56%,rgba(243,207,154,.2) 59%,rgba(244,208,158,.3) 61%,rgba(250,221,176,.3) 64%,rgba(243,207,154,.3) 64%,rgba(244,208,158,.3) 66%,rgba(243,207,154,.3) 69%,rgba(248,216,162,.3) 71%,rgba(243,207,154,.3) 74%,rgba(243,207,154,.3) 76%,rgba(243,207,154,.3) 77%,rgba(243,207,154,.3) 80%,rgba(250,221,176,.3) 81%,rgba(243,207,154,.3) 83%,rgba(250,221,176,.3) 83%,rgba(250,221,176,.3) 85%,rgba(243,207,154,.3) 87%,rgba(250,221,176,.3) 89%,rgba(250,221,176,.3) 91%,rgba(243,207,154,.3) 92%,rgba(248,216,162,.3) 96%,rgba(243,207,154,.3) 97%,rgba(243,207,154,.3) 97%,rgba(243,207,154,.3) 98%,rgba(243,207,154,.3) 100%);
  background-size:500px 20px, 300px 20px, 20px 820px;
  background-position:50% 50%, 70% 70%, 30% 30%;
    
  transition:background-size .28s ease-in-out;
}

body.inactive {
    background-size:300px 20px, 150px 20px, 20px 220px;
}

body.hell {
    background:
    linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
    linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
    linear-gradient( 72deg, #a33 8.5%, transparent 8.5%) 30px 43px,
    linear-gradient(288deg, #a33 8.5%, transparent 8.5%) -70px 43px,
    linear-gradient(216deg, #a33 7.5%, transparent 7.5%) -70px 23px,
    linear-gradient(144deg, #a33 7.5%, transparent 7.5%) 30px 23px,
    
    linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
    linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
    linear-gradient( 72deg, #666 8.5%, transparent 8.5%) 80px 93px,
    linear-gradient(288deg, #666 8.5%, transparent 8.5%) -20px 93px,
    linear-gradient(216deg, #666 7.5%, transparent 7.5%) -20px 73px,
    linear-gradient(144deg, #666 7.5%, transparent 7.5%) 80px 73px;
    background-color: #232927;
    background-size: 100px 100px;
}

body.hell.inactive {
    background-size:80px 80px;
}

body.noteasy {
    background-color:#269;
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}

body.noteasy.inactive {
    background-size:80px 80px, 80px 80px, 10px 10px, 10px 10px;
}

body::-webkit-scrollbar {
  width: 15px;
}
 
body::-webkit-scrollbar-track {
  background-color: rgba(217, 217, 217, .5);
}

body::-webkit-scrollbar-thumb {
  background: rgba(131, 130, 130, .7);
  box-shadow:
    inset 1px 1px 10px rgba(0, 0, 0, 0.25),
    inset 0 -1px 3px rgba(0, 0, 0, 0.1)
  ;
  border-radius:50px;
}

a,
a:active,
a:visited {
  color:inherit;
  text-decoration:none;
  font-weight:bold;
  padding:0 0 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  transition:all .25s ease-in-out;
}

a:hover {
  border-bottom-color: rgba(0, 0, 0, .7);
}

/* UI stuff */

#message,
#stuff,
#controls,
#score:before,
#level:before,
#mode-text:before {
    border: 3px solid rgba(0, 0, 0, .2); 
    background-color:rgba(0, 0, 0, .2);
    background-image:radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
    box-shadow:
        inset 0 0 12px 0 rgba(0, 0, 0, .2),
        0 0 8px 2px rgba(0, 0, 0, .3)
    ;
    color:rgba(255, 255, 255, .6);
    text-align: center;
    backface-visibility: hidden; 
}

#message:hover a,
#stuff:hover a,
#controls:hover a {
    color:rgba(0, 255, 255, .8);
}

#message {
    position:fixed;
    z-index:-1;
    top:560px;
    padding:0 20px;
    margin:-60px 0 0 -15%;
    height:120px;
    width:130%;
    opacity:0;
    transform:translate(0, 100%) rotate(-15deg);
    transition: all .2s ease-in;
}

/* A ghost to enable vertical align of #message p */
#message:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

#message .info-style-2 {
    color: rgba(255, 255, 255, .85);
    text-shadow: 1px 0 0 rgba(30, 30, 30, .6);
    background-color: rgba(90, 90, 90, 1);
    padding: 10px 18px;
    border-radius: 20px;
    margin: 0 10px 0 5px;
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2), 0 0 0 4px rgba(0, 0, 0, .4), 0 0 10px 2px rgba(255, 255, 255, .3), 0 0 20px 1px rgba(255, 255, 255, .6), 0 0 25px 1px rgba(255, 255, 255, .6);
    font-weight: normal;
    font-size:45px;
    line-height:55px;
}

#message .container {
  display: inline-block;
  vertical-align: middle;
  margin:0;
  padding:0;
  width:100%;
} 

#message h1,
#message h2 {
    font:italic bold 55px/55px sans-serif;
    margin:0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
    color: rgba(255, 255, 255, .8);
}

#message h2 {
    border-bottom: 2px double rgba(0, 0, 0, .3);
    box-shadow:0 8px 14px -6px rgba(0, 0, 0, .3);
    margin: 0 0 30px 0;
}

#message p {
    margin:4px 0;
}


#message hr,
hr {
    border:none;
    height:2px;
    background: rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    margin: 30px 35px 15px 35px;
    border-radius: 100%;
}

#message hr.small {
   margin: 15px 35px 10px 35px;
}

#message .smiley {
    transform:rotate(-90deg);
    display:inline-block;
}

#message.active {
   z-index:9999;
   opacity:1;
   transform:translate(0, 0) rotate(0);
}

#message.win {
    background-color:rgba(0, 150, 0, .7);
    height:200px;
    margin-top:-100px;
}

#message.lose {
    background-color:rgba(150, 0, 0, .7);
    height:330px;
    margin-top:-475px;
}

.wrapper {
  position:relative;
  width:450px;
  height:450px;
  margin:0 auto;
  border-radius:50%;
  box-shadow:
        0 0 8px 4px rgba(255, 255, 255, .2),
        inset 0 0 90px 500px rgba(30, 30, 30, .5),
        0 0 12px 10px rgba(60, 60, 60, .7),
        0 0 50px 30px rgba(30, 30, 30, .9);
    
  transition:transform .3s ease-in-out;
  
   background:linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
   background-color: #131313;
   background-size: 20px 20px;
}

.wrapper::after {
   position:absolute;
   content:'';
   top:50%;
   left:50%;
   margin:-250px 0 0 -250px;
   z-index:-1;
   height:500px;
   width:500px;
   border-radius:50%;
   background-color: #131313;
}  

.wrapper.inactive {
    transform:translate(0, -40px) scale(.6) rotate(15deg);
    filter:grayscale(80%) blur(4px);
    -webkit-filter:grayscale(80%) blur(4px);
}

#info {
    position:absolute;
    top:-40px;
    opacity:0;
    transition:all .25s ease-in-out;
    width:450px;
}

#info.active {
    top:0;
    opacity:1;
}

#score,
#level,
#mode-text {
    position:absolute;
    top:-10px;
    left:-120px;
    color: rgba(255, 255, 255, .85);
    text-shadow: 1px 0 0 rgba(30, 30, 30, .6);
    background-color:rgba(90, 90, 90, 1);
    padding:8px;
    border-radius:10px;
    box-shadow:
        inset 0 0 2px 2px rgba(0, 0, 0, .2),
        0 0 0 4px rgba(0, 0, 0, .4),
        0 0 10px 2px rgba(255, 255, 255, .3),
        0 0 20px 1px rgba(255, 255, 255, .6),
        0 0 25px 1px rgba(255, 255, 255, .6)
    ;
    
    text-align:right;
    transition:all .2s ease-in;
}

.info-style {
    color: rgba(255, 255, 255, .85);
    text-shadow: 1px 0 0 rgba(30, 30, 30, .6);
    background-color:rgba(90, 90, 90, 1);
    padding:8px;
    border-radius:10px;
    margin:0 10px 0 5px;
    box-shadow:
        inset 0 0 2px 2px rgba(0, 0, 0, .2),
        0 0 0 4px rgba(0, 0, 0, .4),
        0 0 10px 2px rgba(255, 255, 255, .3),
        0 0 20px 1px rgba(255, 255, 255, .6),
        0 0 25px 1px rgba(255, 255, 255, .6)
}

#score.active,
#level.active,
#mode-text.active {
    background-color:rgba(255, 255, 255, .7);
    opacity:.4;
    animation: wobble .25s 1 linear;
}

@keyframes wobble {
    0%, 40%, 80% {
        transform:scale(1.1) rotate(5deg);
    }
    20%, 60%, 100% {
        transform:scale(1.1) rotate(-5deg);
    }
}

#score:before,
#level:before,
#mode-text:before {
    z-index:-1;
    top:-5px;
    position:absolute;
    font-weight:bold;
}

#level {
  left:auto;
  right:-40px;
  text-align:right;
}

#level:before {
  right:-80px;
  content: 'level ';
  padding:10px 10px 10px 55px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
}

#score:before,
#mode-text:before {
    left:-90px;
    border-top-right-radius:35px;
    border-bottom-right-radius:35px;
}

#score:before {
    content: 'score ';
    padding:10px 100px 10px 10px;
}

#mode-text {
  top:50px;
}

#mode-text:before {
  content:'mode ';
  padding:10px 70px 10px 10px;
}

/*
 * Controls
 */ 
#controls {
  position:absolute;
  top:570px;
  left:50%;
  width:400px;
  height:250px;
  margin:0 0 0 -200px;
  padding:20px;
  transition:top .3s ease-in-out;
}

#controls.inactive {
    top:450px;
}

/*
 * Default key style
 */
.key {
    color:rgba(90, 90, 90, 1);
    font:bold 18px "Lucida Grande", Lucida, Arial, sans-serif;
    min-width:40px;
    padding:0 10px 4px 8px;
    margin: 0 5px 0 10px;
    border-radius:10px;
    height:40px;
    border:none;
    background-color: rgba(245, 244, 211, .9);
    background-image: linear-gradient(top, rgba(230, 230, 230, .5) 0%, rgba(160, 160, 160, .7) 100%);
    box-shadow:
        inset -1px -2px 0 1px rgba(0, 0, 0, .4),
        0 0 8px 4px rgba(0, 0, 0, .4)
    ;
    transition:all .12s linear;
}

.key.a,
.key.s,
.key.d,
.key.f {
    color:rgba(30, 30, 30, 1);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .6);
}

.key.a {
    background-color:rgba(0, 191, 121, 1);
}

.key.s {
    background-color:rgba(193, 56, 38, 1);
}

.key.d {
    background-color:rgba(222, 209, 62, 1);
}

.key.f {
    background-color:rgba(49, 85, 151, 1);
}

.key.active,
#mode input:checked + label {
    color:rgba(30, 30, 30, 1);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .6);
    background-color: rgba(190, 190, 190, .9);
    box-shadow:
        inset -1px -1px 0 1px rgba(0, 0, 0, .3),
        0 0 8px 4px rgba(0, 0, 0, .2)
    ;
}

#mode {
    display:inline-block;
    padding: 0;
    margin: 0;
    height: 25px;
}

#mode input {
  position: absolute;
  left:50%;
  z-index:-1;
  visibility: hidden;
}

#mode label {
  display:inline-block;
  padding:7px;
}

#stuff {
    position: absolute;
    z-index: 5;
    top: 850px;
    left: 50%;
    width: 650px;
    margin: 0 0 0 -325px;
    padding: 20px 20px;
}

#stuff h2 {
    margin:20px 0 0 0;
}

span[role="hole"] {
  position:absolute;
  top:50%;
  left:50%;
  z-index:1337;
  margin:-125px 0 0 -125px;
  width:250px;
  height:250px;
  display:block;
  content:'';
  border-radius:100%;
  border:8px solid rgba(0, 0, 0, .2);
    
  transform:rotate(45deg);
    
  /* Simurai metal brush */
  background-color: #E6E6E6;
  box-shadow: 
    inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ 
    inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */
    inset rgba(0, 0, 0, .25) 0 -1px 0px 7px,    /* bottom SD */
    inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */
    rgba(0, 0, 0, .45) 0 0 6px 4px,
    rgba(0, 0, 0, .15) 0 5px 8px 4px,
    rgba(0, 0, 0, .15) 0 -5px 8px 4px
   ;
    
    /* fallback */
    background-image: repeating-linear-gradient(left center , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(left center , transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(left center , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), linear-gradient(-90deg, #C6C6C6 0%, #E5E5E5 47%, #C6C6C6 53%, #B2B2B2 100%);
    
    /* real brush */
    background-image: radial-gradient( 50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient( 100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), repeating-radial-gradient(50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), repeating-radial-gradient(50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), repeating-radial-gradient(50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), radial-gradient(50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%);
}

span[role="hole"] #status {
    position:absolute;
    top:50%;
    left:50%;
    height:40px;
    width:80px;
    text-align:center;
    margin:-20px 0 0 -40px;
    transform:rotate(-45deg);
    font-size:35px;
    font-weight:bold;
    padding:0;
    color: rgba(0, 0, 0, .7);
    text-shadow: 2px 0 1px rgba(255, 255, 255, .7), 0 1px 1px rgba(255, 255, 255, .4);
    opacity:0;
    letter-spacing:5px;
    transition:all .25s linear;
}

span[role="hole"] #status.active {
    opacity:1;
}

section {
  margin:20px auto;
}

section button {
  width:210px;
  height:210px;
  background-image: radial-gradient(center, 
        rgba(255,255,255,0.2) 0%, 
        rgba(0,0,0,0.2) 35%, 
        rgba(255,255,255,0.2) 80%, 
        rgba(255,255,255,0.2) 100%);
  float:left;
  margin:0;
  display:inline-block;
  cursor:pointer;
  color:rgba(0, 0, 0, .6);
  font:bold 65px sans-serif;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, .3);
  border:5px solid rgba(0, 0, 0, .5);
  border-radius: 7px;
  box-shadow: 
      inset 0 0 1px 20px rgba(0, 0, 0, .2), 
      inset 0 2px 8px 4px rgba(0, 0, 0, .2),
      inset 0 0 4px 2px rgba(0, 0, 0, .4)
  ;
    
  transition: all .075s ease-in-out;
}

section button:after {
    background:#fff;
    background: linear-gradient(bottom, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%);
    border-radius:50%;
    padding:8px 30px 15px 30px;
    box-shadow:inset 0 0 4px rgba(0, 0, 0, .3);
}

section button.active {
  transform:scale(.9);
  backface-visibility: hidden;

    /* 
     * @TODO [TimPietrusky] 20120728: skewX(-2deg) skewY(2deg);
     */
}

section button[role="one"] {
  background-color:rgba(0, 191, 121, 1);
  margin:0 15px 15px 0;
  border-top-left-radius:50%;
  transform-origin: 100% 50%;
}

section button[role="one"]:after {
    content:'a';
}

section button[role="one"].active {
  background:rgba(0, 191, 121, .7);
  box-shadow: 
        inset 0 0 3px 5px rgba(0, 0, 0, .2), 
        inset 0 2px 8px 4px rgba(0, 191, 121, .4),
        inset 0 0 4px 2px rgba(0, 0, 0, .4),
        0 0 50px rgba(0, 191, 121, .7)
  ;
}

section button[role="two"] {
  background-color:rgba(193, 56, 38, 1);
  margin:0 0 15px 15px;
  border-top-right-radius:50%;
  transform-origin: 0 50%;
}

section button[role="two"]:after {
    content:'s';
}

section button[role="two"].active {
  background:rgba(226, 43, 27, .7);
    box-shadow: 
        inset 0 0 3px 5px rgba(0, 0, 0, .2), 
        inset 0 2px 12px rgba(226, 43, 27, .4),
        0 0 50px rgba(226, 43, 27, .7);
}

section button[role="three"] {
  background-color:rgba(222,209,62, 1);
  margin:15px 15px 0 0;
  border-bottom-left-radius:50%;
  transform-origin: 100% 50%;
}

section button[role="three"]:after {
    content:'d';
}

section button[role="three"].active {
  background:rgba(255, 219, 20, .7);
  box-shadow: 
        inset 0 0 3px 5px rgba(0, 0, 0, .2), 
        inset 0 2px 12px rgba(255, 219, 20, .4),
        0 0 50px rgba(255, 219, 20, .7);
}

section button[role="four"] {
  background-color: rgba(49,85,151,1);
  margin:15px 0 0 15px;
  border-bottom-right-radius:50%;
  transform-origin: 0 50%;
}

section button[role="four"]:after {
    content:'f';
    padding:10px 37px 10px 37px;
}

section button[role="four"].active {
  background:rgba(96, 167, 242, .7);
  box-shadow: 
        inset 0 0 3px 5px rgba(0, 0, 0, .2), 
        inset 0 2px 12px rgba(96, 167, 242, .4),
        0 0 50px rgba(96, 167, 242, .7);
}