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


body {
    background-color: rgb(0,255,0);
    margin: 0;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}

@font-face {
    font-family: 'vcr_osd_monoregular';
    src: url( '../fonts/vcr_osd_mono-webfont.woff2' ) format( 'woff2' ),
         url( '../fonts/vcr_osd_mono-webfont.woff' ) format( 'woff' );
    font-weight: normal;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000; 
}

::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: grey; 
}

#dmk-credit {
    font-family: Helvetica, Arial, snas-serif;
    font-size: .75vw;
    position: absolute;
    left: 1%;
    bottom: 1%;
    z-index: 15;
}

#screen.wheel-bg #dmk-credit {
    color: rgb( 150 75 57 );
    text-shadow: 0px 0px 4px #522623;
}

#screen.minigame-compliment #dmk-credit {
    color: rgb(255 85 28);
    text-shadow: 0px 0px 4px #c8462a;
}

button {
    border: 0;
    outline: 0;
    background: #ffa502;
    color: #000;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

button:hover {
    background: #ffb93a;
}

#clear-entries {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 20px 0;
}

.clear-entries-text {
    padding: 5px 10px;
}

#clear-entries span {
    display: block;
}

.all-stop-btn {
    display: block;
    width: calc(100% - 40px);
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 20px;
    color: #fff;
    font-size: 22px;
    background: crimson;
}

.all-stop-btn:hover {
    
}

.all-stop-text {
    padding: 10px 10px;
}

.all-stop-btn span {
    display: block;
}

input[type="text"]:read-only {
    background: #666;
}

button:disabled {
    opacity: .7;
    cursor: pointer;
}

button:disabled:hover {
    background: #ffa502;
}

.all-stop-btn:disabled {
    opacity: .7;
    cursor: pointer;
}

.all-stop-btn:disabled:hover {
    background: crimson;
}

.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    margin-bottom: 20px;
}

.console-flex-btn {
    width: 33.3333%;
    margin: 0 2px;
}

.flex-input-row {

}

.flex-input-row input {
    width: 80%;
    margin-right: 4px;
}

.flex-input-row button {
    width: 20%;
}

#console {
    width: 300px;
    height: 100vh;
    background: #252627;
    float: left;
}

#screen-container {
    position: relative;
    margin-left: 300px;
    width: calc( 100vw - 300px );
    min-width: 720px;
    max-width: 1920px;
    height: 100vh;
    background: #222;
}

#screen {
    position: absolute;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    top: 0;
    left: 0;
    background: rgb( 0, 255, 0 );
    cursor: none;
    overflow: hidden;
}

#screen-contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 2s ease-in-out;
    transform-origin: center center;
}

#grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#grain:after {
    content: '';
    background-image: url( '../images/grain.png' );
    position: absolute;
    width: 200vw;
    height: 200vh;
    left: -50%;
    top: -50%;
    animation: grain 1.5s steps(6) infinite;
    z-index: 99;
    opacity: .25;
}

#screen.wheel-bg .haze-fg:before {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 26%;
    background: #ffaa8036;
    z-index: 9;
    bottom: 25%;
    filter: blur(15px);
    left: 0%;
    animation: animate-haze 5s 0s ease-in-out infinite;
}

#screen.wheel-bg .haze-fg:after {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 26%;
    background: #ffaa8036;
    z-index: 9;
    bottom: 25%;
    filter: blur(15px);
    right: 0%;
    animation: animate-haze 5s 1s ease-in-out infinite;
}

#screen.wheel-bg .haze-mg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(255,115,72);
    background: linear-gradient(0deg, rgb(239 96 54) 5%, rgba(255,167,72,0) 80%);
    z-index: 5;
    backdrop-filter: blur(1.5px);
}

#screen.wheel-bg .haze-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(255,115,72);
    background: linear-gradient(0deg, rgb(181 65 65 / 50%) 50%, rgb(255 188 117 / 40%) 100%);
    z-index: 3;
    backdrop-filter: blur(2px);
}

#screen.wheel-bg #screen-mg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
    transform-origin: center center;
    z-index: 4;
}

#screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    z-index: 0;
}

#screen.wheel-bg #screen-contents:before {
    content: '';
    display: block;
    background: rgb(255 88 21 / 15%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    box-shadow: inset 0 0 100px rgb(122 66 38 / 75%);
    animation: vingette-pulse 2s 0s linear infinite;
}

#screen.wheel-bg #screen-contents #screen-mg {
    background: url('../images/layout_giveaway_mg.png') no-repeat center center transparent;
    background-size: cover;
}

#screen.wheel-bg #screen-contents #screen-bg {
    background: url('../images/layout_giveaway_bg.jpg') no-repeat center center transparent;
    background-size: cover;
}

.monitor-zoom {
    transition: all 2s ease-in-out;
    transform: scale( 7.5 ) rotate( -5deg );
    left: -261% !important;
    top: -110% !important;
}            

.giveaway-doors {
    position: absolute;
    top: 0;
    width: 51.5%;
    height: 100%;
    transition: all 1s linear;
}

.giveaway-doors-front .giveaway-doors {
    z-index: 9999;
}

.giveaway-doors-back .giveaway-doors {
    z-index: 9998;
}

.giveaway-doors-front .giveaway-door-left {
    background: url( '../images/door_left_front.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    left: -100%;
}

.giveaway-doors-front .giveaway-door-right {
    background: url( '../images/door_right_front.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    right: -100%;
}

.giveaway-doors-back .giveaway-door-left {
    background: url( '../images/door_left_back.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    left: -100%;
}

.giveaway-doors-back .giveaway-door-right {
    background: url( '../images/door_right_back.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    right: -100%;
}

.giveaway-door-left.door-close {
    left: 0;
}

.giveaway-door-right.door-close {
    right: 0;
}

.giveaway-door-left.door-open {

    animation: open-left .5s 1s linear;
}

.giveaway-door-right.door-open {

    animation: open-right .5s 1s linear;
}

h1 {
    margin: 20px auto;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #ffa502;
}

h2 {
    text-align: center;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 5px;
    text-align: center;
    color: #fff;
}

#console-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
}

.nav-btn {
    width: 100%;
    height: 48px;
    background: #c4810d;
}

.nav-btn:hover, .nav-btn.active {
    background: #ffa502;
}

.nav-btn:hover .nav-icon, .nav-btn.active .nav-icon {
    
}

.nav-icon {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
}

#nav-btn-giveaway .nav-icon { background-image: url( '../images/icon_giveaway.png' ); }
#nav-btn-minigame .nav-icon { background-image: url( '../images/icon_minigame.png' ); }
#nav-btn-victory .nav-icon { background-image: url( '../images/icon_victory.png' ); }
#nav-btn-settings .nav-icon { background-image: url( '../images/icon_settings.png' ); }

.console-panel {
    display: none;
    height: auto;
    width: 100%;
    padding: 20px;
    color: #fff;
}

.console-panel.active {
    display: block;
}

#participants {
    padding: 0 2px 0 0;
    margin: 0;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #343638;
    border-top: 1px solid #000;
    border-right: 1px solid #414446;
    border-bottom: 1px solid #414446;
    border-left: 1px solid #000;
}

#participants li {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    list-style-type: none;
    margin-bottom: 2px;
}

#participants li span {
    display: block;
}

#participants li span.participant-name {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    color: #fff;
    background: #242424;
    font-size: 12px;
    font-family: Helvetica, Arial, snas-serif;
    overflow: hidden;
}

span.confirm-bar {
    z-index: -1;
    background: red;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hide-contents, .hide-contents * {
    visibility: hidden;
    opacity: 0;
}

#floater {
    background-image: url( '../images/floater_1.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 6.482%;
    height: 0;
    padding-top: 8.642%;
    position: absolute;
    top: 49.5%;
    left: -8%;
    z-index: 7; 
    filter: blur(.5px);
}

#floater.active {
    animation-name: move-floater, animate-floater, bob-floater;
    animation-duration: 31.5s, .3s, 5s;
    animation-delay: 0s, 0s, 0s;
    animation-timing-function: linear, linear, ease-in-out;
    animation-iteration-count: 1, infinite, infinite;
    animation-play-state: running, running, running;
}

#shark {
    background-image: url( '../images/shark_1.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 14%;
    height: 0;
    padding-top: 8%;
    position: absolute;
    top: 53.5%;
    left: -15%;
    z-index: 7; 
    filter: blur(.5px);
}

#shark.active {
    animation-name: move-shark, animate-shark, bob-shark;
    animation-duration: 12.5s, .5s, 1s;
    animation-delay: 0s, 0s, 0s;
    animation-timing-function: linear, linear, ease-in-out;
    animation-iteration-count: 1, infinite, infinite;
    animation-play-state: running, running, running;
}

#floater.shark-attack {
    background-image: url( '../images/sign_1.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 6.482%;
    height: 0;
    padding-top: 8.642%;
    position: absolute;
    top: 49.5%;
    left: -58%;
    z-index: 7; 
    filter: blur(.5px);
}

#floater.active.shark-attack {
    animation-name: sign-rotate, sign-animate, sign-move, sign-arc;
    animation-duration: 1s, .3s, 1s, 1s;
    animation-delay: 0s, 0s, 0s, 0s;
    animation-timing-function: ease-in-out, linear, linear, ease-out;
    animation-iteration-count: 1, infinite, 1, 1;
    animation-play-state: running, running, running, running;
}

#volcano-smoke {
    display: none;
}

#screen.wheel-bg #volcano-smoke {
    display: block;
    position: absolute;
    top: -0.5%;
    left: 30.3%;
    width: 15%;
    z-index: 2;
    opacity: .5;
}

#embers {
    position: relative;
    width: 100%;
    height: 0;
    padding: 20%;
    z-index: 6;
}

#screen.wheel-bg #embers {
    background-color: transparent;
    background-image: url( '../images/graphic_lava_flow.png' );
    background-position: 0% 97%;
    background-repeat: repeat-x;
    background-size: auto 15%;
    animation: lava-flow 5s 0s linear infinite;
}

.ember {
    display: none;
    animation-name: unset;
    animation-duration: unset;
    animation-timing-function: unset;
    animation-iteration-count: unset;
    animation-play-state: unset;
}

.ember:before, .ember:after {
    display: none;
    left: 0;
    top: 0;
}

#screen.wheel-bg .ember {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ff9900;
    position: absolute;
    filter: blur(1px); 
    top: -30%;
    z-index: 0;
    animation-name: embers-rise, embers-shake, embers-fade;
    animation-duration: 4s, 2s, 4s;
    animation-timing-function: linear, ease-in-out, linear;
    animation-iteration-count: infinite, infinite, infinite;
    animation-play-state: running, running, running;
}

#screen.wheel-bg .ember:before {
    content: '';
    display: block;
    position: relative;
    width: 3px;
    height: 3px;
    left: 150px;
    top: -60px;
    background-color: #ff9900;
}

#screen.wheel-bg .ember:after {
    content: '';
    display: block;
    position: relative;
    width: 3px;
    height: 3px;
    left: -150px;
    top: 90px;
    background-color: #ff9900;
}

.ember:nth-of-type(0) {
    left: -5%;
    animation-delay: 0s, 0s;
}

.ember:nth-of-type(1) {
    left: 0%;
    width: 5px !important;
    height: 5px !important;
    animation-delay: 2s, 1s;
}

.ember:nth-of-type(2) {
    left: 10%;
    animation-delay: 4s, .5s;
}

.ember:nth-of-type(3) {
    left: 15%;
    animation-delay: 1s, 2s;
}

.ember:nth-of-type(4) {
    left: 20%;
    width: 5px !important;
    height: 5px !important;
    animation-delay: 3s, 2s;
}

.ember:nth-of-type(5) {
    left: 25%;
    transform: rotate(0deg);
    animation-delay: 5s, 3s;
}

.ember:nth-of-type(6) {
    left: 30%;
    width: 2px !important;
    height: 2px !important;
    animation-delay: 0.5,2s
}

.ember:nth-of-type(7) {
    left: 35%;
    animation-delay: 2.5s, 0s;
}

.ember:nth-of-type(8) {
    left: 40%;
    transform: rotate(0deg);
    animation-delay: 4.5s, 1s;
}

.ember:nth-of-type(9) {
    left: 45%;
    width: 7px !important;
    height: 7px !important;
    animation-delay: 1.5s, .5s;
}

.ember:nth-of-type(10) {
    left: 50%;
    animation-delay: 3.5s, 2s;
}

.ember:nth-of-type(11) {
    left: 55%;
    animation-delay: 5s, 1s;
}

.ember:nth-of-type(12) {
    left: 60%;
    width: 2px !important;
    height: 2px !important;
    animation-delay: 0s, .5s;
}

.ember:nth-of-type(13) {
    left: 65%;
    animation-delay: 1s, 3s;
}

.ember:nth-of-type(14) {
    left: 70%;
    width: 4px !important;
    height: 4px !important;
    animation-delay: 2s, .5s
}

.ember:nth-of-type(15) {
    left: 75%;
    animation-delay: 3s, 0s;
}

.ember:nth-of-type(16) {
    left: 80%;
    width: 6px !important;
    height: 6px !important;
    animation-delay: 0s, 2s;
}

.ember:nth-of-type(17) {
    left: 85%;
    width: 8px !important;
    height: 8px !important;
    animation-delay: 5s, .5s;
}

.ember:nth-of-type(18) {
    left: 90%;
    animation-delay: 2.5s, 1s;
}

.ember:nth-of-type(19) {
    left: 95%;
    animation-delay: 5s, 2s;
}

.ember:nth-of-type(20) {
    left: 2%;
    animation-delay: 1.65s, .65s;
}

.ember:nth-of-type(21) {
    left: 8%;
    width: 6px !important;
    height: 6px !important;
    animation-delay: .35s, 1.1s;
}

.ember:nth-of-type(22) {
    left: 12%;
    width: 8px !important;
    height: 8px !important;
    animation-delay: 2.3s, .9s;
}

.ember:nth-of-type(23) {
    left: 17%;
    width: 7px !important;
    height: 7px !important;
    animation-delay: 1.5s, .5s;
}

.ember:nth-of-type(24) {
    left: 67%;
    animation-delay: 2.8s, 1.6s;
}

.ember:nth-of-type(25) {
    left: 73%;
    animation-delay: 2.1s, 1.7s;
}

#screen.wheel-bg #monitor-wrapper {
    position: absolute;
    width: 25%;
    height: 44.44%; /* width/56.25 */
    bottom: 0;
    right: 3.75%;
    z-index: 10;
    transform: rotate( 5deg );
}

#screen.wheel-bg #wheel-wrapper {
    position: absolute;
    width: 36%;
    height: 64%; /* width/56.25 */
    top: 0;
    bottom: -7%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}

.blur {
    transition: all 1s ease-in-out;
    filter: blur( 5px ) !important;
}

#screen.wheel-bg #wheel-container {
    position: relative;
    width: 100%;
    height: 100%;
    top: -18%;
}

#screen.wheel-bg #wheel-face {
    position: absolute;
    z-index: 15;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
}

#screen.minigame-compliment #dangle-face {
    position: absolute;
    width: 33%;
    height: 0;
    padding-top: 17%;
    bottom: 28%;
    left: 0;
    right: 0;
    margin: auto;
}

#screen.wheel-bg #face-sweat {
    position: absolute;
    z-index: 21;
    left: 0;
    right: 0;
    top: -1%;
    bottom: 0;
    margin: auto;
    background: url( '../images/face_sweat.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    opacity: 0;
    transition: all .25s ease-in-out;
}

#screen.wheel-bg #face-sweat.active {
    transition: all 2s 3s ease-in-out;
    opacity: 100% !important;
    top: 0 !important;
}

#screen.wheel-bg #wheel-face-eyelids {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: url( '../images/face_blink.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    opacity: 1;
}

#screen.minigame-compliment #dangle-face-eyelids {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    bottom: 27%;
    margin: auto auto 0 auto;
    width: 33%;
    height: 0;
    background: url( '../images/dangle_eyelids.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    opacity: 1;
    padding-top: 18%;
}

.blink {
    animation: blink 6s .25s linear infinite;
}

.face-start {
    background: url( '../images/face_start.svg' ) no-repeat center center transparent;
}

.face-spin {
    background: url( '../images/face_spin.svg' ) no-repeat center center transparent;
}

.face-stop {
    background: url( '../images/face_stop.svg' ) no-repeat center center transparent;
}

#screen.wheel-bg #wheel-face .pupil {
    background-color: #000;
    height: 1.5%;
    width: 1%;
    position: absolute;
    z-index: 12;
    top: 30.75%;
    border-radius: 50%;
}

#screen.minigame-compliment .pupil {
    background-color: #000;
    height: 22%;
    width: 7%;
    position: absolute;
    z-index: 12;
    top: 42%;
    border-radius: 50%;
}

#screen.wheel-bg #wheel-face .eye-left {
    left: 44%;
}

#screen.wheel-bg #wheel-face .eye-right {
    right: 44%;
}

#screen.minigame-compliment #dangle-face .eye-left {
    left: 17%;
}

#screen.minigame-compliment #dangle-face .eye-right {
    right: 17%;
}

#screen.wheel-bg #wheel-face .dart-left {
    transition: all .25s linear, opacity 0s linear;
    animation: dart-left 10s linear infinite;
}

#screen.wheel-bg #wheel-face .dart-right {
    transition: all .25s linear, opacity 0s linear;
    animation: dart-right 10s linear infinite;
}

#screen.minigame-compliment #dangle-face .dart-left {
    transition: all .25s linear, opacity 0s linear;
    animation: dangle-dart-left 12s linear infinite;
}

#screen.minigame-compliment #dangle-face .dart-right {
    transition: all .25s linear, opacity 0s linear;
    animation: dangle-dart-right 12s linear infinite;
}

.wobble-left {
    animation: wobble-left 3s linear infinite;
}

.wobble-right {
    animation: wobble-right 3s linear infinite;
}

#screen.wheel-bg #wheel-front {
    background: url( '../images/wheel_front.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#screen.wheel-bg #wheel-back {
    background: url( '../images/wheel_back.svg' ) no-repeat center center transparent;
    background-size: 86% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 7;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#screen.wheel-bg #wheel-ground {
    background: url( '../images/layout_giveaway_fg.png' ) no-repeat center center transparent;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: -25%;
    margin: auto;
}

#screen.wheel-bg #wheel-platform {
    background: url( '../images/wheel_platform.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    width: 90%;
    height: 100%;
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 0;
    bottom: -20%;
    margin: auto;
}

#screen.wheel-bg #monitor-rocks {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 100%;
    background: url( '../images/monitor_rocks.png' ) no-repeat left bottom transparent;
    background-size: 100% auto;
}

#screen.wheel-bg #wheel-monitor-screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 26;
    width: 100%;
    height: 100%;
    background: url( '../images/wheel_monitor_off.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    transition: opacity .5s linear;
    opacity: 1;
}

#screen.wheel-bg #wheel-monitor-screen.active {
    opacity: 0;
    transition: opacity .5s linear;
}

#screen.wheel-bg #wheel-monitor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
    width: 100%;
    height: 100%;
    background: url( '../images/wheel_monitor.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
}

#screen.wheel-bg #monitor-glow {
    width: 72%;
    height: 56%;
    position: absolute;
    top: 4%;
    left: 14%;
    border-radius: 12%;
    border: 10px solid #5298ce
    filter: blur( 7px );
    opacity: 0;
}

#screen.wheel-bg #monitor-flash {
    width: 72%;
    height: 56%;
    position: absolute;
    top: 4%;
    left: 14%;
    border-radius: 12%;
    filter: blur( 7px );
    opacity: 0;
    background: #fff;
}

#screen.wheel-bg #wheel-monitor.rumble {
    animation: rumble .5s linear;
}

#screen.wheel-bg #monitor-glow.active {
    animation: monitor-glow 2s 1s ease-in-out infinite;
}

#screen.wheel-bg #monitor-flash.active {
    animation: monitor-flash .5s .5s linear;
}

.monitor-rules {
    font-family: 'vcr_osd_monoregular', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 67%;
    height: 44.5%;
    right: 0;
    overflow: hidden;
    padding: 10%;
    color: #78cef7;
    font-size: 1vw;
    top: 11%;
    left: 0;
    margin: auto;
    opacity: 0;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px #002a3e;
}

.monitor-rules h2 {
    text-align: center;
    font-size: 3vw;
    line-height: 0;
    opacity: .75;
    margin: 24% 0;
}

.monitor-rules p {
    text-align: center;
    margin: 0;
    font-size: 1vw;
    line-height: 0;
    opacity: .75;
}

.monitor-rules.active {
    transition: all .25s 1s ease-in-out;
    opacity: 100%;
}

#screen.wheel-bg #wheel-monitor .scanlines {
    position: absolute;
    width: 67%;
    height: 44.5%;
    right: 0;
    overflow: hidden;
    top: 11%;
    left: 0;
    margin: auto;
    transition: all .25s ease-in-out;
}

#screen.wheel-bg .scanlines-large {
    position: absolute;
    overflow: hidden;
    margin: auto;
    transition: all .25s ease-in-out;
    display: none;
    width: 68%;
    height: 82%;
    right: 0;
    top: 8%;
    left: 13.5%;
}

#rules-container.active .scanlines-large {
    display: block;
}

#screen.wheel-bg #wheel-monitor .scanlines:before, #screen.wheel-bg #wheel-monitor .scanlines:after,
#screen.wheel-bg .scanlines-large:before, #screen.wheel-bg .scanlines-large:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}

#screen.wheel-bg #wheel-monitor .scanlines:before,
#screen.wheel-bg .scanlines-large:before {
    width: 100%;
    height: .5%;
    z-index: 10;
    background: rgba( 255, 255, 255, 0.25 );
    animation: scanline 6s linear infinite;
}

#screen.wheel-bg #wheel-monitor .scanlines:after,
#screen.wheel-bg .scanlines-large:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient( transparent 50%, rgba( 255, 255, 255, .075 ) 51% );
    background-size: 100% 3%;
    animation: scanlines 1s steps( 12 ) infinite;
}

#screen.wheel-bg .scanlines-large:before {
    height: .25%;
    z-index: 9;
    background: rgba( 255, 255, 255, 0.125 );
    animation: scanline 8s linear infinite;
}

#screen.wheel-bg .scanlines-large:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient( transparent 50%, rgba( 255, 255, 255, .075 ) 51% );
    background-size: 100% 1.25%;
    animation: scanlines .15s steps( 12 ) infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-center {
    position: absolute;
    width: 13.5%;
    height: 36.5%;
    right: 0;
    overflow: hidden;
    top: 56%;
    left: 0;
    margin: auto;
    transition: all .25s ease-in-out;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-left {
    position: absolute;
    width: 35%;
    height: 17%;
    right: 0;
    overflow: hidden;
    top: 66%;
    left: 7.5%;
    margin: auto auto auto 0;
    transition: all .25s ease-in-out;
    transform: skew( 10deg );
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-right {
    position: absolute;
    width: 35%;
    height: 17%;
    left: 0;
    overflow: hidden;
    top: 66%;
    right: 7.5%;
    margin: auto 0 auto auto;
    transition: all .25s ease-in-out;
    transform: skew( -10deg );
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-left .scanlines {
    transform: skew( -10deg );
    width: 100%;
    height: 100%;
    right: 5%;
    position: relative;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-right .scanlines {
    transform: skew( 10deg );
    width: 100%;
    height: 100%;
    left: 5%;
    position: relative;
}

#screen.minigame-compliment #compliment-timer-contents .scanlines:before, #screen.minigame-compliment #compliment-timer-contents .scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-center .scanlines:before {
    width: 100%;
    height: .5%;
    z-index: 10;
    background: rgba( 255, 255, 255, 0.25 );
    animation: scanline 5s linear infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-center .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient( transparent 50%, rgba( 255, 255, 255, .075 ) 51% );
    background-size: 100% 3%;
    animation: scanlines 1s steps( 10 ) infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-left .scanlines:before {
    width: 100%;
    height: .5%;
    z-index: 10;
    background: rgba( 255, 255, 255, 0.25 );
    animation: scanline 8s linear infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-left .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient( transparent 50%, rgba( 255, 255, 255, .075 ) 51% );
    background-size: 100% 2.75%;
    animation: scanlines 1s steps( 16 ) infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-right .scanlines:before {
    width: 100%;
    height: .5%;
    z-index: 10;
    background: rgba( 255, 255, 255, 0.25 );
    animation: scanline 9s linear infinite;
}

#screen.minigame-compliment #compliment-timer-contents .timer-scanlines-right .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient( transparent 50%, rgba( 255, 255, 255, .075 ) 51% );
    background-size: 100% 2.75%;
    animation: scanlines 1s steps( 18 ) infinite;
}

.monitor-text {
    font-family: 'vcr_osd_monoregular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    position: absolute;
    width: 63%;
    height: 35%;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
    padding: 0;
    margin: auto;
    text-shadow: 0px 0px 6px #002a3e;
}

#monitor-text-main {
    z-index: 30;
    top: 17%;
    padding-top: 8%;
}

#monitor-text-copy {
    z-index: 30;
    top: 12%;
}

.monitor-text li {
    font-size: .75vw;
    font-weight: bold;
    display: block;
    color: #78cef7;
    line-height: 2.65vw;
    transition: opacity .5s linear;
    opacity: 1;
}

#monitor-text-copy li {
    display: none;
}

#monitor-text-main li:first-child {
    font-size: 1.25vw;
}

#monitor-text-main li.short-name:first-child {
    font-size: 1.5vw;
}

#monitor-text-main li.long-name:first-child {
    font-size: 1vw;
}

#monitor-text-main li.longest-name:first-child {
    font-size: .75vw;
}

#monitor-text-copy li:last-child {
    display: block;
}

.spinning {
    transition-property: all;
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
}

.highlight-winner {
    color: #fff !important;
    animation: highlight-winner .5s 1s linear infinite;
}

.hide-losers {
    opacity: 0 !important;
}

#rules-container {
    position: absolute;
    left: -31%;
    width: 25%;
    height: 53%;
    margin: auto 0;
    padding: 0;
    background: url( '../images/monitor_large.svg' ) no-repeat center center transparent;
    background-size: 100% auto;
    z-index: 10;
    bottom: 0;
    top: 0;
    transition: all .25s ease-in-out;
}

#screen-contents.show-rules #rules-container {
    animation: flyout .35s 0s ease-in-out;
    left: -2%;
}

#screen-contents #rules-container:before {
    content: '';
    display: block;
    background: url( '../images/monitor_large_off.svg' ) no-repeat center center transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#screen-contents.show-rules #rules-container.active:before {
    content: '';
    display: none;
}

#rules-container:after {
    content: '';
    display: block;
    position: absolute;
    width: 81%;
    height: 2%;
    background: rgba(0,0,0,0.35);
    transition: all 1s ease-in-out;
    bottom: -6%;
    border-radius: 50%;
    left: 16%;
}

#rules-container .rules-content {
    display: none;
    padding: 15% 15% 15% 29%;
    font-size: 12px;
    font-family: 'vcr_osd_monoregular', Helvetica, Arial, snas-serif;
    color: #78cef7;
    line-height: 1vw;
    height: 100%;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px #002a3e;
}

#rules-container.active .rules-content {
    display: block;
}

#rules-container .rules-content h2 {
    text-align: center;
    font-size: 1vw;
}

#rules-container .rules-content p {
    font-size: .6vw;
}

.lava-shape {
    display: none;
    animation-name: animate-shape;
    animation-duration: 6s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    background-image: url( '../images/lava_shape_01.png' );
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    transition: all .5s linear;
    height: 0;
    padding: 4%;
    position: absolute;
    z-index: 12;
    transform-origin: center center;
    transform: scale(1.0);
    filter: hue-rotate( -6deg ) brightness( .7 ) saturate( 1.35 );
}

.shape1 {
    width: 28%;
    left: 5%;
    bottom: 3%;
    background-image: url( '../images/lava_shape_01.png' );
}

.shape2 {
    width: 29%;
    left: 15%;
    bottom: 9%;
    animation-delay: -1s;
    background-image: url( '../images/lava_shape_02.png' );
}

.shape3 {
    width: 24%;
    left: 70%;
    bottom: 7%;
    animation-delay: -1.75s;
    background-image: url( '../images/lava_shape_03.png' );
}

.shape4 {
    width: 32%;
    left: 34%;
    bottom: -7%;
    animation-delay: -2.5s;
    background-image: url( '../images/lava_shape_04.png' );
}

.shape5 {
    width: 25%;
    left: 53%;
    bottom: 4%;
    animation-delay: -1.3s;
    background-image: url( '../images/lava_shape_02.png' );
}

.shape6 {
    width: 18%;
    left: 48%;
    bottom: 12%;
    background-image: url( '../images/lava_shape_01.png' );
    animation-delay: -4.25s;
}

.shape7 {
    width: 28%;
    left: 78%;
    bottom: -7%;
    background-image: url( '../images/lava_shape_02.png' );
    animation-delay: -5.3s;
}

.cave-eyes {
    display: none;
    position: absolute;
    width: 1.15%;
    height: 0;
    padding-top: .85%;
    animation-name: cave-eyes-blink;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    background-image: url( '../images/graphic_cave_eyes.png' );
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    transition: all .25s linear;
    opacity: 1;
    z-index: 1;
}

#screen.minigame-compliment .cave-eyes {
    display: block;
}

.cave-eyes1 {
    left: 24%;
    top: 25%;
    transform: rotate(40deg);
}

.cave-eyes2 {
    left: 27.5%;
    top: 18%;
    animation-delay: -3.6s;
    transform: rotate(-30deg);
}

.cave-eyes3 {
    left: 38%;
    top: 29%;
    animation-delay: -5.3s;
    transform: rotate(-22deg);
}

.cave-eyes4 {
    left: 47.25%;
    top: 21.5%;
    animation-delay: -.8s;
    transform: rotate(30deg);
}

.cave-eyes5 {
    left: 61%;
    top: 23%;
    transform: rotate(22deg);
    animation-delay: -4.3s;
}

.cave-eyes6 {
    left: 65%;
    top: 27%;
    animation-delay: -2.8s;
}

.lava-bubble {
    display: none;
    position: absolute;
    width: 12%;
    height: 0;
    padding-top: 12%;
    animation-name: bubble-grow, bubble-animate;
    animation-duration: 2s, 2s;
    animation-delay: 0s, 0s;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
    background-image: url( '../images/graphic_bubble_01.png' );
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    transition: all .25s linear;
    opacity: 0;
    z-index: 14;
    transform-origin: center 60%;
    transform: scale(.1);
    filter: hue-rotate(-6deg) saturate(1.5);
}

#screen.minigame-compliment .lava-bubble {
    display: block;
}

.bubble1 {
    left: 16%;
    bottom: 10%;
    animation-delay: 0s, 0s;
}

.bubble2 {
    left: 24%;
    bottom: 12%;
    animation-delay: .5s, .5s;
}

.bubble3 {
    left: 40%;
    bottom: 13%;
    animation-delay: 1.1s, 1.1s;
}

.bubble4 {
    left: 56%;
    bottom: 7%;
    animation-delay: .3s, .3s;
}

.bubble5 {
    left: 77%;
    bottom: 3%;
    animation-delay: -.8s, -.8s;
}

.bubble6 {
    left: 89%;
    bottom: -2%;
    animation-delay: 3.4s, 3.4s;
}

.bubble7 {
    left: 24%;
    bottom: 0%;
    animation-delay: .15s, .15s;
}

.bubble8 {
    left: 5%;
    bottom: 5%;
    animation-delay: 1.6s, 1.6s;
}

.bubble9 {
    left: 63%;
    bottom: -3%;
    animation-delay: 2.7s, 2.7s;
}

.bubble10 {
    left: 46%;
    bottom: -6%;
    animation-delay: -.6s, -.6s;
}

.vapor {
    display: none;
}

#screen.wheel-bg .vapor, #screen.minigame-compliment .vapor {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 1%;
    left: 0;
    z-index: 15;
}

#screen.wheel-bg .vapor span, #screen.minigame-compliment .vapor span {
    display: block;
    padding-top: 15%;
    width: 2.7%;
    height: 0;
    border-radius: 50%;
    background: rgb(221 113 94 / 25%);
    bottom: 0;
    filter: blur(10px);
    opacity: 0;
    transform: translateY(0) scaleX(1);
    animation: animate-vapor 5s linear infinite;
    animation-delay: calc( var(--v) * -0.35s );
}

#screen.wheel-bg .vapor {
    z-index: 8;
}

#screen.wheel-bg .vapor span {
    background: rgb(221 113 94 / 50%);    
}

#screen.minigame-compliment #screen-contents #screen-bg {
    background: url('../images/layout_compliment_bg.jpg') no-repeat center center transparent;
    background-size: cover;
}

#screen.minigame-compliment .lava-shape {
    display: block;
}

#screen.minigame-compliment #minion-dangle-wrapper {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 20%;
    height: 60%;
    z-index: 9;
    transform-origin: center top;
    transform: rotate(0deg);
}

#screen.minigame-compliment #minion-dangle-wrapper.active {
    transform: rotate(5deg);
    animation: animate-dangle 3s ease-in-out infinite alternate;
}

#screen.minigame-compliment #minion-dangle {
    background-image: url( '../images/minion_dangle.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 100%;
    z-index: 10; 
}

#screen.minigame-compliment #minion-dangle-head {
    background-image: url( '../images/minion_dangle_head.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 0;
    z-index: 11;
    position: absolute;
    bottom: .5%;
    padding-top: 38%;
}

.animate-dangle-head {
    animation: animate-dangle-head 12s linear infinite;
}

#screen.minigame-compliment #minion-dangle-mouth {
    background-image: url( '../images/minion_dangle_worry.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 0;
    z-index: 12;
    position: absolute;
    top: 4.5%;
    padding-top: 12%;
}

#screen.minigame-compliment #minion-dangle-mouth.pass {
    background-image: url( '../images/minion_dangle_smile.png' );
}

#screen.minigame-compliment #minion-dangle-mouth.fail {
    background-image: url( '../images/minion_dangle_yell.png' );
}

#screen.minigame-compliment #minion-dangle-rope {
    background-image: url( '../images/minion_dangle_rope.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

#screen.minigame-compliment #compliment-timer-bar {
    background-image: url( '../images/compliment_timer_bar_off.png' );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    width: 80%;
    height: 0;
    top: -15%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 12;
    padding-top: 20%;
}

#screen.minigame-compliment #compliment-timer-bar.active {
    background-image: url( '../images/compliment_timer_bar_on.png' );
}

#screen.minigame-compliment #timer-content-left,
#screen.minigame-compliment #timer-content-right {
    font-family: 'vcr_osd_monoregular', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 32.75%;
    height: 16%;
    overflow: hidden;
    padding: 1%;
    color: #ff9e9e;
    font-size: 1.5vw;
    top: 49%;
    bottom: 0;
    margin: auto;
    opacity: 1;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px #260000;
    text-align: center;
    line-height: .75em;
}

#screen.minigame-compliment #timer-content-left {
    left: 8%;
}

#screen.minigame-compliment #timer-content-right {
    right: 8%;
}

#screen.minigame-compliment #timer-content-center {
    font-family: 'vcr_osd_monoregular', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 7vw;
    height: 3.85vw;
    overflow: hidden;
    padding: 0.5vw;
    color: #ff9e9e;
    font-size: 4vw;
    top: 48%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 1;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px #260000;
    text-align: center;
    line-height: .65em;
}

#screen.minigame-compliment #timer-content-center.timer-end {
    height: 38%;
    font-size: 2.5vw;
    line-height: 1em;
}

#winner-container {
    text-align: center;
    background: #000;
    padding: 5px;
    margin-bottom: 10px;
    border: inset 1px #484848;
    min-height: 36px;
}

@keyframes grain {
    0%, 100% { transform: translate( 0,0 ); }
    10% { transform: translate( -5%, -10% ); }
    30% { transform: translate( 3%, -15% ); }
    50% { transform: translate( 12%, 9% ); }
    70% { transform: translate( 9%, 4% ); }
    90% { transform: translate( -1%, 7% ) ; }
}

@keyframes animate-haze {
    0% { height: 26%; }
    50% { height: 20%; }
    100% { height: 26%; }
}

@keyframes vingette-pulse {
    0% { box-shadow: inset 0 0 100px rgb(122 66 38 / 75%); }
    50% { box-shadow: inset 0 0 150px rgb(122 66 38 / 95%); }
    100% { box-shadow: inset 0 0 100px rgb(122 66 38 / 75%); }
}

@keyframes open-left {
    0% { left: 0; }
    15% { left: -1%; }
    25% { left: 0; }
    32% { left: -.5%; }
    37% { left: 0; }
    40% { left: -.25%; }
    41% { left: 0; }
}

@keyframes open-right {
    0% { right: 0; }
    15% { right: -1%; }
    25% { right: 0; }
    32% { right: -.5%; }
    37% { right: 0; }
    40% { right: -.25%; }
    41% { right: 0; }
}

@keyframes move-floater {
    0% { left: -8%; }
    100% { left: 108%; }
}

@keyframes animate-floater {
    0% { background-image: url( '../images/floater_1.png' ); }
    33% { background-image: url( '../images/floater_2.png' ); }
    66% { background-image: url( '../images/floater_3.png' ); }
}

@keyframes bob-floater {
    0% { top: 49.5%; }
    50% { top: 49%; }
    100% { top: 49.5%; }
}

@keyframes move-shark {
    0% { left: -15%; }
    100% { left: 115%; }
}

@keyframes animate-shark {
    0% { background-image: url( '../images/shark_1.png' ); }
    25% { background-image: url( '../images/shark_2.png' ); }
    50% { background-image: url( '../images/shark_3.png' ); }
    75% { background-image: url( '../images/shark_2.png' ); }
    100% { background-image: url( '../images/shark_1.png' ); }
}

@keyframes bob-shark {
    0% { top: 53.5%; }
    50% { top: 53.25%; }
    100% { top: 53.5%; }
}

@keyframes sign-rotate {
    0% { transform: rotate( 0deg ); }
    100% { transform: rotate( 900deg ); }
}

@keyframes sign-animate {
    0% { background-image: url( '../images/sign_1.png' ); }
    33% { background-image: url( '../images/sign_2.png' ); }
    66% { background-image: url( '../images/sign_3.png' ); }
}

@keyframes sign-move {
    0% { left: 65%; }
    100% { left: 74%; }
}

@keyframes sign-arc {
    0% { top: 49.5%; }
    50% { top: 40%; }
    100% { top: 49.5%; }
}

@keyframes lava-flow {
    0% { background-position: 0% 97%; }
    100% { background-position: -145% 97%; }
}

@keyframes embers-rise {
    0% { top: 130%; margin-left: 0; }
    100% { top: -30%; margin-left: 15%; }
}

@keyframes embers-shake {
    0% {
        transform: translate( 0px, 0px );
    }
    
    50% {
        transform: translate( 30px, -20px );
    }
    
    100% {
        transform: translate( 0px, 0px );
    }
}

@keyframes embers-fade {
    0% { opacity: .95; }
    50% { opacity: .95; }
    70% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 0; }
    97% { opacity: 0; }
    98% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes animate-dangle-head {
    0% { bottom: .5%; }
    1% { bottom: .5%; }
    2% { bottom: 2.5%; }
    17% { bottom: 2.5%; }
    18% { bottom: .5%; }
    23% { bottom: .5%; }
    24% { bottom: 2.5%; }
    40% { bottom: 2.5%; }
    41% { bottom: -1%; }
    50% { bottom: -1%; }
    51% { bottom: -1%; }
    60% { bottom: -1%; }
    61% { bottom: -1%; }
    70% { bottom: -1%; }
    71% { bottom: .5%; }
    100% { bottom: .5%; }
}

@keyframes animate-dangle {
    0% { transform: rotate(7deg); }
    3% { transform: rotate(7deg); }
    97% { transform: rotate(-7deg); }
    100% { transform: rotate(-7deg); }
}

@keyframes dart-left {
    0% { left: 44%; top: 30.75%; }
    1% { left: 44%; top: 30.75%; }
    2% { left: calc( 44% - 1.5% ); top: calc( 30.75% + 1% ); }
    20% { left: calc( 44% - 1.5% ); top: calc( 30.75% + 1% ); }
    21% { left: calc( 44% - 1.5% ); top: calc( 30.75% - 1% ); }
    30% { left: calc( 44% - 1.5% ); top: calc( 30.75% - 1% ); }
    31% { left: calc( 44% + .75% ); top: calc( 30.75% + 1.75% ); }
    40% { left: calc( 44% + .75% ); top: calc( 30.75% + 1.75% ); }
    41% { left: calc( 44% + 1% ); top: calc( 30.75% - 1.5% ); }
    50% { left: calc( 44% + 1% ); top: calc( 30.75% - 1.5% ); }
    51% { left: calc( 44% + 1.5% ); top: 30.75%; }
    70% { left: calc( 44% + 1.5% ); top: 30.75%; }
    71% { left: calc( 44% - 1.5% ); top: calc( 30.75% - 1% ); }
    90% { left: calc( 44% - 1.5% ); top: calc( 30.75% - 1% ); }
    91% { left: 44%; top: 30.75%; }
    100% { left: 44%; top: 30.75%; }

}

@keyframes dart-right {
    0% { right: 44%; top: 30.75%; }
    1% { right: 44%; top: 30.75%; }
    2% { right: calc( 44% + 1.5% ); top: calc( 30.75% + 1% ); }
    20% { right: calc( 44% + 1.5% ); top: calc( 30.75% + 1% ); }
    21% { right: calc( 44% + 1.5% ); top: calc( 30.75% - 1% ); }
    30% { right: calc( 44% + 1.5% ); top: calc( 30.75% - 1% ); }
    31% { right: calc( 44% - .75% ); top: calc( 30.75% + 1.75% ); }
    40% { right: calc( 44% - .75% ); top: calc( 30.75% + 1.75% ); }
    41% { right: calc( 44% - 1% ); top: calc( 30.75% - 1.5% ); }
    50% { right: calc( 44% - 1% ); top: calc( 30.75% - 1.5% ); }
    51% { right: calc( 44% - 1.5% ); top: 30.75%; }
    70% { right: calc( 44% - 1.5% ); top: 30.75%; }
    71% { right: calc( 44% + 1.5% ); top: calc( 30.75% - 1% ); }
    90% { right: calc( 44% + 1.5% ); top: calc( 30.75% - 1% ); }
    91% { right: 44%; top: 30.75%; }
    100% { right: 44%; top: 30.75%; }
}

@keyframes dangle-dart-left {
    0% { left: 17%; top: 42%; }
    1% { left: 17%; top: 42%; }
    2% { left: 17%; top: calc( 42% - 22% ); }
    17% { left: 17%; top: calc( 42% - 22% ); }
    18% { left: 17%; top: 42%; }
    23% { left: 17%; top: 42%; }
    24% { left: 17%; top: calc( 42% - 22% ); }
    40% { left: 17%; top: calc( 42% - 22% ); }
    41% { left: 17%; top: calc( 42% + 22% ); }
    50% { left: 17%; top: calc( 42% + 22% ); }
    51% { left: calc( 17% - 7% ); top: calc( 42% + 12% ); }
    60% { left: calc( 17% - 7% ); top: calc( 42% + 12% ); }
    61% { left: calc( 17% + 7% ); top: calc( 42% + 12% ); }
    70% { left: calc( 17% + 7% ); top: calc( 42% + 12% ); }
    71% { left: 17%; top: 42%; }
    100% { left: 17%; top: 42%; }

}

@keyframes dangle-dart-right {
    0% { right: 17%; top: 42%; }
    1% { right: 17%; top: 42%; }
    2% { right: 17%; top: calc( 42% - 22% ); }
    17% { right: 17%; top: calc( 42% - 22% ); }
    18% { right: 17%; top: 42%; }
    23% { right: 17%; top: 42%; }
    24% { right: 17%; top: calc( 42% - 22% ); }
    40% { right: 17%; top: calc( 42% - 22% ); }
    41% { right: 17%; top: calc( 42% + 22% ); }
    50% { right: 17%; top: calc( 42% + 22% ); }
    51% { right: calc( 17% + 7% ); top: calc( 42% + 12% ); }
    60% { right: calc( 17% + 7% ); top: calc( 42% + 12% ); }
    61% { right: calc( 17% - 7% ); top: calc( 42% + 12% ); }
    70% { right: calc( 17% - 7% ); top: calc( 42% + 12% ); }
    71% { right: 17%; top: 42%; }
    100% { right: 17%; top: 42%; }
}

@keyframes wobble-left {
    0% { left: calc( 44% - 1.875% ); top: calc( 30.75% - 1.5% ); }
    6.25% { left: calc( 44% - 1.975% ); top: calc( 30.75% - 1.25% ); }
    12.5% { left: calc( 44% - 2% ); top: calc( 30.75% - 1.25% ); }
    25% { left: calc( 44% - 2.25% ); top: 30.75%; }
    37.5% { left: calc( 44% - 1.7% ); top: calc( 30.75% + 1.25% ); }
    50% { left: calc( 44% - 1.5% ); top: calc( 30.75% + 1.5% ); }
    62.5% { left: calc( 44% - 1.7% ); top: calc( 30.75% + 1.25% ); }
    75% { left: calc( 44% - 2.25% ); top: 30.75%; }
    87.5% { left: calc( 44% - 2% ); top: calc( 30.75% - 1.25% ); }
    93.75% { left: calc( 44% - 1.975% ); top: calc( 30.75% - 1.25% ); }
    100% { left: calc( 44% - 1.875% ); top: calc( 30.75% - 1.5% ); }
}

@keyframes wobble-right {
    0% { right: calc( 44% - 1.5% ); top: calc( 30.75% + 1.5% ); }
    6.25% { right: calc( 44% - 1.7% ); top: calc( 30.75% + 1.25% ); }
    12.5% { right: calc( 44% - 2% ); top: calc( 30.75% + 1.25% ); }
    25% { right: calc( 44% - 2.25% ); top: 30.75%; }
    37.5% { right: calc( 44% - 1.975% ); top: calc( 30.75% - 1.25% ); }
    50% { right: calc( 44% - 1.875% ); top: calc( 30.75% - 1.5% ); }
    62.5% { right: calc( 44% - 1.975% ); top: calc( 30.75% - 1.25% ); }
    75% { right: calc( 44% - 2.25% ); top: 30.75%; }
    87.5% { right: calc( 44% - 2% ); top: calc( 30.75% + 1.25% ); }
    93.75% { right: calc( 44% - 1.7% ); top: calc( 30.75% + 1.25% ); }
    100% { right: calc( 44% - 1.5% ); top: calc( 30.75% + 1.5% ); }
}

@keyframes rumble {
    0% { left: 0px; top: 0px; }
    10% { left: 1px; top: 1px; }
    20% { left: 2px; top: 0px; }
    30% { left: -1px; top: -1px; }
    40% { left: 1px; top: 1px; }
    50% { left: 2px; top: 0px; }
    60% { left: -1px; top: -1px; }
    70% { left: 1px; top: 1px; }
    80% { left: 0px; top: 0px; }
    90% { left: -2px; top: 2px; }
    40% { left: 0px; top: 1px; }
}

@keyframes monitor-glow {
    0% { opacity: .25; }
    50% { opacity: 1.0; }
    100% { opacity: .25; }
}

@keyframes monitor-flash {
    0% { opacity: 0; }
    20% { opacity: 1.0; }
    30% { opacity: 0; }
    39% { opacity: 0; }
    40% { opacity: 1.0; }
    50% { opacity: 0; }
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {

    0% {
        transform: translate3d( 0, 200000%, 0 );
    }

}

@keyframes scanlines {

    0% {
        background-position: 0 50%;
    }

}

@keyframes flyout {
    0% { left: -31%; }
    70% { left: 0%; }
    80% { left: 0%; }
    100% { left: -2%; }
}

@keyframes highlight-winner {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

@keyframes animate-shape {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.0); }
}

@keyframes cave-eyes-blink {
    0% { opacity: 1; }
    96% { opacity: 1; }
    97% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes bubble-grow {
    0% { transform: scale(.1); }
    100% { transform: scale(1.5); }
}

@keyframes bubble-animate {
    0% { opacity: 0.0; background-image: url( '../images/graphic_bubble_01.png' ); }
    5% { opacity: 1.0; background-image: url( '../images/graphic_bubble_02.png' ); }
    10% { background-image: url( '../images/graphic_bubble_03.png' ); }
    15% { background-image: url( '../images/graphic_bubble_01.png' ); }
    20% { background-image: url( '../images/graphic_bubble_02.png' ); }
    25% { background-image: url( '../images/graphic_bubble_03.png' ); }
    30% { background-image: url( '../images/graphic_bubble_04.png' ); }
    35% { background-image: url( '../images/graphic_bubble_05.png' ); }
    40% { opacity: 1.0;background-image: url( '../images/graphic_bubble_06.png' ); }
    45% { background-image: url( '../images/graphic_bubble_07.png' ); }
    50% { opacity: 0.0; background-image: url( '../images/graphic_bubble_08.png' ); }
    55% { background-image: url( '' ); }
    100% { background-image: url( '' ); }
}

@keyframes animate-vapor {
    0% { transform: translateY(0) scaleX(1); }
    15% { opacity: 1.0; }
    50% { transform: translateY(-100%) scaleX(5); }
    95% { opacity: 0.0; }
    100% { transform: translateY(-200%) scaleX(10); }
}

@media( max-width: 1020px ) { 
    
    #dmk-credit {
        font-size: 7.5px;   
    }

    .monitor-text li {
        font-size: 10px;
        line-height: 27px;
    }

    #monitor-text-main li:first-child {
        font-size: 18px;
    }

    .monitor-rules {
        font-size: 2.5px;
    }
    
    #rules-container .rules-content {
        line-height: .9em;
    }
    
    #rules-container .rules-content h2 {
        font-size: 9px;
    }

    #rules-container .rules-content p {
        font-size: 6px;
    }

}