* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    background-color: white;
    color: black;
    font-family: "Helvetica Neue", "Arial", sans-serif;
    max-width:300px;
}

h1 {
    display: inline;
    margin: 3px 10px 0 0;
    color: #138BAE;
    font-size: 1em;
    max-width:300px;
}

.toolbar {
    padding:0;
    margin:0;
} 

.controls {
    display: -webkit-inline-flex;
    -webkit-flex-direction: row;
    display: inline-flex;
    flex-direction: row;
    padding: 5px 0px 0px 0px;
    margin: 0 0 0 0;
    width:300px;
}

.controls * {
   font-size: 11px;
   font-weight: bold;
}

.controls .left {
    order: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

.controls .center {
    order: 2;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 1em;
}

.controls .right {
    order: 3;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: right;
}

button {
    cursor: pointer;
}

.controls .disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: initial;
}

.board {
    height:524px;
}

.footer {
    display: inline;
    padding: 0px 0px 0px 0px;
    margin: 0 0 0 0;
    max-width: 300px;
}

.footer button {
    display: inline;
    background-color: #5C6F8B !important;
}

.footer button.playback {
    background-color: rgb(0, 158, 0) !important;;
}

.footer button:active {
    background-color: auto !important;
}

.footer button:hover {
    background-color: rgb(0, 95, 0) !important;
}

.footer input {
    width: 210px;
}

.footer * {
    font-size: 11px;    
    font-weight: bold;
}

.blobs {
    position: absolute;
    -ms-border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border: 2px solid white;
    height:10%;*/
    text-align:center;
    line-height:80px;
    -webkit-transform:translate3d(0,0,0);*/
    transition:top ease-in 500ms;
    -webkit-transition:top ease-in 500ms;
    -moz-transition:top ease-in 500ms;
    cursor: pointer;
}

/*@keyframes, @-moz-keyframes, @-o-keyframes, */
@-moz-keyframes pulse-moz {
  from {
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    opacity: 0.75;
  }
}

@-webkit-keyframes pulsewk {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

@-o-keyframes pulse-o {
  from {
    -o-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -o-transform: scale(1.2);
    opacity: 1.0;
  }
  to {
    -o-transform: scale(1.0);
    opacity: 0.75;
  }
}

@-ms-keyframes pulse-ms {
  from {
    -ms-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -ms-transform: scale(1.2);
    opacity: 1.0;
  }
  to {
    -ms-transform: scale(1.0);
    opacity: 0.75;
  }
}

.blobs.primed {
    background-color: rgba(235, 100, 0, 1) !important; 
    animation-name: pulse; 
    animation-duration: 0.5s; 
    animation-iteration-count: infinite; 
    -ms-animation-name: pulse-ms; 
    -ms-animation-duration: 0.5s; 
    -ms-animation-iteration-count: infinite; 
    -o-animation-name: pulse-o; 
    -o-animation-duration: 0.5s; 
    -o-animation-iteration-count: infinite; 
    -moz-animation-name: pulse-moz; 
    -moz-animation-duration: 0.5s; 
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: pulsewk; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-iteration-count: infinite; 
}

button {
    color: white;
    background: rgba(219, 133, 215, 1); /*rgb(227, 0, 77);*/
    border: 1px solid black;
    padding: 1ex 1ex;
    margin: 0;
    tab-index: 0;
    touch-action: manipulation;  /* switches off click-delay in ms touch */
}
.controls button:hover {
    background: red;
}

div {
    margin-bottom: 1ex;
}

.debug {
    font-size: small;
    color: gray;
    width: 300px;
}

.playfield {
/*    -webkit-filter: url("#goo");
    -ms-filter: url("#goo");
*/
    position: relative;
    /* -webkit-filter: url("#shadowed-goo"); */
    /* -moz-filter: url("#shadowed-goo"); */
    /* -ms-filter: url("#shadowed-goo"); */
    /* -filter: url("#shadowed-goo"); */
    width: 290px !important;
}

.pad {
    padding: 179% 0 0 0;
    width: 290px !important;
}

.limited {
    width: 300px !important;
}

.bordered {
    padding: 0;
    margin: 0;
    position: absolute;

    transition:background-position ease-in 500ms;
    -webkit-transition:background-position ease-in 500ms;
    -moz-transition:background-position ease-in 500ms;

    border: 5px solid rgba(19, 139, 174, 1);
    border-top: 0;
    background-image: url("../assets/trails2.png");
    background-size: 290px;
    background-color: rgba(255,40,40,0.1);
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.popover {
    border: 1px solid black;
    border-radius: 5px;
    opacity: 0.9;
    position: relative;
    top: 40px;
    left: 20px;
    width: 260px;
    max-width: 260px;
    margin: 0;
    padding: 10px;
    background-color: rgba(255,255,255,0.9);
    font-size: 14px;
}
.popover .title {
    font-weight: bold;
    font-size: 16px;
}
.flash-box {
    float: left;
    width: 300px;
    position: absolute;
    top:0px;
    padding-top: 3px;
    left: -5px;
    background: rgb(19, 139, 174);
}
.flash-box .msg {
    position: relative;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 5px 5px;
    font-size: 15px;
    font-weight: bold;
}
.flash-box .score {
    position: relative;
    float: right;
    text-align: right;
    color: #fff;
    margin: 0;
    padding: 5px 5px 5px 0px;
    font-size: 12px;
}

.flash-box.timer {
    background-color: #CB226F;
}

.flash-box.als,.flash-box.replay-als {
    background-color: rgb(255, 180, 0);
}

.flash-box.yours,.flash-box.replay-yours {
    background-color: rgb(235, 100, 0);
}