/**
 * asdf 
 * 
 * A remake (HTML5, CSS3, JS) of the 1978 launched Simon electronic game.
 * https://github.com/TimPietrusky/asdf
 * 
 * Copyright (c) 2012 Tim Pietrusky
 * See the file license.txt for copying permission.
 */

* {
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');
body,input,select,textarea,button {font-size:14px;font-family:'Nanum Gothic', sans-serif;color:#666} 
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:-100px;
  content: '레벨';
  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: '점수 ';
    padding:10px 100px 10px 10px;
}

#mode-text {
  top:50px;
}

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

/*
 * Controls
 */ 
#controls {
  position:absolute;
  top:570px;
  left:50%;
  width:400px;
  margin:0 0 2em -200px;
  padding:1.5em;
  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: 990px;
    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);
}