@font-face {
    font-family : afterkilly;
    src : url(art/afterkilly.ttf);
}
html {
    padding : 0;
    background-color : black;
}

body {
    margin : 0;
    padding : 0;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    
    width : 100%;
    height : 100%;
}

.load-progress {
    position : absolute;
    left : 0;
    bottom : 0;
    height : 5px;
    width : 0;
    background-color : #666;
}


#main {
    position : absolute;
    left : 0;
    top : 0;
    width : 640px;
    height : 400px;
    left : 50%;
    top : 50%;
    margin-left : -320px;
    margin-top : -200px;
    overflow : hidden;
}

#game, #menu, #title-screen {
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    display : none;
    background-repeat : no-repeat;
}

#title-screen {
    background-image : url(art/title.png);
    display : block;
}

#game {
    background-color : rgb(0,56,56);
    background-image : url(art/gamebg.png);
}



#game .loading {
    background-color : rgb(0,56,56);
    display : none;
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 320px;
    z-index : 60;
}
#game .loading img {
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -224px;
    margin-top : -48px;
}


#game .renderer {
    z-index : 50;
    background-color : #222;
    overflow : hidden;
    position : absolute;
    left : 16px;
    top : 8px;
    cursor : crosshair;
}

#game *,
#game .renderer div,
#game .renderer div img,
#game .renderer .sprite,
#game .renderer .sprite img {
    image-rendering : optimizeSpeed;
    image-rendering : -moz-crisp-edges;
    image-rendering : -o-crisp-edges;
    image-rendering : optimize-contrast;
    image-rendering : -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

#game .renderer .player-weapon {
    z-index : 100000000;
    width : 256px;
    height : 256px;
    position : absolute;
    bottom : 0;
    left : 50%;
    margin-left : -128px;
    background-image : url(art/attack.png);
    background-repeat : no-repeat;
}


#game .renderer .overlay {
    z-index : 200000000;
    width : 100%;
    height : 100%;
    position : absolute;
    top : 0;
    left : 0;
    display : none;
}

#game .renderer .damage-flash {
    background : rgba(255,0,0,0.25);
}
#game .renderer .bonus-flash {
    background : rgba(255,255,128,0.20);
}
#game .renderer .death {
    background : rgba(255,0,0,0);
}

#game .renderer .pause {
    background : rgba(32,32,32,0.5);
}
#game .renderer .pause img {
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -64px;
    margin-top : -32px;
}


#game .ceiling, #game .floor {
    position : absolute;
    z-index : 0;
    left : 0;
    width : 100%;
    height : 50%;
}

#game .ceiling {
    top : 0;
}

#game .floor{
    top : 50%;
}

#game .hud {
    position : absolute;
    z-index : 100;
    bottom : 0;
    width : 640px;
    height : 80px;
    background-image : url(art/hudbg.png);
}

#game .hud .bj {
    position : absolute;
    width : 48px;
    height : 64px;
    left : 273px;
    top : 9px;
    overflow : hidden;
    background-image : url(art/bj.png);
}

#game .hud .key1,
#game .hud .key2 {
    position : absolute;
    width : 16px;
    height : 32px;
    left : 480px;
    overflow : hidden;
    background-image : url(art/hudkeys.png);
}

#game .hud .key1 {
    top : 8px;
}
#game .hud .key2 {
    top : 40px;
    background-position : -16px 0;
}


#game .hud .weapon {
    position : absolute;
    width : 96px;
    height : 48px;
    left : 512px;
    top : 16px;
    overflow : hidden;
    background-image : url(art/hudweapons.png);
}

#game .hud .number-container {
    position : absolute;
    height : 32px;
    top : 32px;
}

#game .hud .floor {
    left : 48px;
}
#game .hud .score {
    left : 96px;
}
#game .hud .lives {
    left : 224px;
}
#game .hud .health {
    left : 336px;
}
#game .hud .ammo {
    left : 428px;
}


#game .hud .number {
    display : inline-block;
    width : 16px;
    height : 32px;
    overflow : hidden;
    margin : 0;
    background-image : url(art/hudnumbers.png);
    background-repeat : no-repeat;
}

#game .fps, 
#game .logDisplay {
    position : absolute;
    z-index : 1000;
    font-family : courier new;
    font-size : 16px;
    color : #eee;
    padding : 0;
}

#game .fps {
    display : none;
    left : 15px;
    top : 8px;
    width : 60px;
    background : rgba(0,0,0,0.3);
    text-align : right;
}

#game .logDisplay {
    top : 311px;
    width: 100%;
    text-align : center;
}

#text-screen {
    background-color : #8a0000;
    position : absolute;
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    z-index : 500;
    display : none;
}

#game .intermission,
#game .gameover {
    position : absolute;
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    background-color : #004141;
    display : none;
}

#game .gameover {
    background-image : url(art/intermission_gameover.png);
}

#game .intermission > div {
    position : absolute;
}

#game .intermission .background,
#game .intermission .background-secret,
#game .intermission .background-victory {
    position : absolute;
    background-image : url(art/intermission.png);
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    z-index : 0;
    display : none;
}
#game .intermission .background-secret {
    background-image : url(art/intermission_secret.png);
}
#game .intermission .background-victory {
    background-image : url(art/intermission_victory.png);
}

#game .intermission .bj {
    left : 40px;
    top : 32px;
    width : 162px;
    height : 174px;
    background-image : url(art/intermissionbj.png);
    overflow : hidden;
    z-index : 10;
}

#game .intermission .stat,
#game .intermission .victory-stat {
    z-index : 10;
}

#game .intermission .bonus {
    left : 412px;
    top : 108px;
}

#game .intermission .floor {
    left : 412px;
    top : 32px;
}


#game .intermission .total-time-minutes {
    top : 128px;
    left : 224px;
}

#game .intermission .total-time-seconds {
    top : 128px;
    left : 306px;
}


#game .intermission .time-minutes,
#game .intermission .par-minutes {
    left : 412px;
}

#game .intermission .time-seconds,
#game .intermission .par-seconds {
    left : 498px;
}

#game .intermission .time-minutes,
#game .intermission .time-seconds {
    top : 152px;
}

#game .intermission .par-minutes,
#game .intermission .par-seconds {
    top : 184px;
}

#game .intermission .kill-ratio,
#game .intermission .secret-ratio,
#game .intermission .treasure-ratio {
    left : 492px;
}
#game .intermission .kill-ratio {
    top : 224px;
}
#game .intermission .secret-ratio {
    top : 256px;
}
#game .intermission .treasure-ratio {
    top : 288px;
}

#game .intermission .avg-kill-ratio,
#game .intermission .avg-secret-ratio,
#game .intermission .avg-treasure-ratio {
    left : 384px;
}
#game .intermission .avg-kill-ratio {
    top : 224px;
}
#game .intermission .avg-secret-ratio {
    top : 256px;
}
#game .intermission .avg-treasure-ratio {
    top : 288px;
}

#game .intermission .digit {
    display : inline-block;
    width : 32px;
    height : 32px;
    background-image : url(art/intermissionfont.png);
    background-repeat : no-repeat;
    background-position : 32px 0px;
}
#game .intermission .num-0 {
    background-position : 0px 0px;
}
#game .intermission .num-1 {
    background-position : -32px 0px;
}
#game .intermission .num-2 {
    background-position : -64px 0px;
}
#game .intermission .num-3 {
    background-position : -96px 0px;
}
#game .intermission .num-4 {
    background-position : -128px 0px;
}
#game .intermission .num-5 {
    background-position : -160px 0px;
}
#game .intermission .num-6 {
    background-position : -192px 0px;
}
#game .intermission .num-7 {
    background-position : -224px 0px;
}
#game .intermission .num-8 {
    background-position : -256px 0px;
}
#game .intermission .num-9 {
    background-position : -288px 0px;
}

#menu div.menu {
    width : 100%;
    height : 100%;
    font-family : "Press Start 2P", "Courier New", monospace;
    font-size : 22px;
    font-weight : bold;
    color : #8e8e8e;
}

#menu div.menu.main {
    background-image : url(art/menubg_main.png);
}
 
#menu div.menu.episodes {
    background-image : url(art/menubg_episodes.png);
}

#menu div.menu.levels {
    background-image : url(art/menubg_levels.png);
}

#menu div.menu.skill {
    background-image : url(art/menubg_skill.png);
}


#menu div.menu.sound, #menu div.menu.control, #menu div.menu.other {
    background-image : url(art/menubg.png);
}


#menu div.menu.customize {
    background-image : url(art/menubg_customize.png);
}

#menu .settings-container {
    background : #590000;
    position : relative;
    width : 500px;
    height : 240px;
    border : 3px inset #b90000;
    top : 25px;
    left : 70px;
}

#menu .settings-container li {
    padding-top : 20px;
    position : relative;
    left : -40px;
}

#menu .option {
    background : #aaa;
    color : #555;
    margin : 2px 0;
    padding-top : 2px;
    border : 2px outset #ccc;
    width : 260px;
    display : block;
    margin : auto;
    text-align : center;
    font-size : 18px;
    font-weight : 900;
    left : 10px;
    position : relative;
}

#menu div.plack {
    background : -webkit-linear-gradient(88deg, #fff 0%, #f00 30%, #f00 34%, #500 48%, #000 50%, #000 51%, #fff 54%, #fff 55%, #ddd 57%, #333 100%);
    -webkit-background-clip : text;
    color : transparent;
    filter : drop-shadow(1px 2px 0.4px #666);
    font-size : 78px;
    font-family : 'afterkilly', serif;
    letter-spacing : 1.5px;
    text-align : center;
    position : relative;
    top : 18px;
}

#menu input[type=range] {
    -webkit-appearance : none;
    appearance : none;
    width : 400px;
    height : 2px;
    outline : none;
    position : relative;
    background : transparent;
    top : -5px;
}

#menu li.active input[type=range] {
    height : 4px; /* Increase the height on active */
    top : -4px;
}
#menu li.active label.option {
    color : #eee;
}

#menu input[type=range]::-webkit-slider-thumb {
    -webkit-appearance : none;
    background-image : url('art/menulsm.png');
    width : 42px;
    height : 16px;
    cursor : pointer;
}

#menu input[type=range]::-moz-range-thumb {
    background-image: url('art/menulsm.png');
    background-color: transparent;
    border-radius: 0;
    border: 0;
    width: 42px;
    height: 16px;
    cursor: pointer;
}

#menu ul {
    list-style : none;
    margin : 0;
    padding : 0;
    position : absolute;
}

#menu div.menu.main ul {
    left : 196px;
    top : 118px;
    width : 330px;
    height : 232px;
}

#menu div.menu.sound ul {
    left : 110px;
    top : 10px;
    width : 330px;
}

#menu div.menu.control ul,
#menu div.menu.other ul {
    left : 110px;
    top : 10px;
    width : 400px;
}

#menu div.menu ul.selector li {
    position : relative;
}

#menu div.menu ul.selector li:has(.light) {
    left : 0;
}

#menu div.menu.episodes ul {
    left : 44px;
    top : 100px;
    width : 550px;
    height : 240px;
}

#menu div.menu.skill ul {
    left : 144px;
    top : 186px;
    width : 384px;
    height : 128px;
}


#menu div.menu.levels ul {
    left : 90px;
    top : 110px;
    width : 256px;
    height : 240px;
}


#menu div.menu.customize ul {
    left : 116px;
    top : 192px;
    width : 512px;
    height : 96px;
}


#menu ul.two-column {
    columns : 2;
    column-gap : 256px;
}

/* menu items */

#menu ul li div {
    display : block;
    height : 24px;
    cursor : pointer;
    margin-bottom : 8px;
}

#menu li.active {
    color : #c3c3c3;
}

#menu ul li div.button {
    background-image : url(art/menuitems.png);
}


#menu li.resumegame div {
    color : #b6ae1d;
}

#menu li.active.resumegame div {
    color : #fff72e;
}


#menu li.baby div.button {
    background-position : 0 -160px;
}
#menu li.active.baby div.button {
    background-position : -384px -160px;
}

#menu li.easy div.button {
    background-position : 0 -192px;
}
#menu li.active.easy div.button {
    background-position : -384px -192px;
}

#menu li.medium div.button {
    background-position : 0 -224px;
}
#menu li.active.medium div.button {
    background-position : -384px -224px;
}

#menu li.hard div.button {
    background-position : 0 -256px;
}
#menu li.active.hard div.button {
    background-position : -384px -256px;
}

#menu div.menu.episodes ul {
	height:230px;
	width:570px;
	overflow-y:scroll;
	overflow-x:hidden;
}

#menu div.menu.episodes li div.button {
    height : 56px;
    width : 550px;
    background-image : url(art/menuitems_episodes_lightside.png);
}

#menu div.menu.episodes li.episode-0 div.button {
    background-position : 0 0;
}
#menu div.menu.episodes li.active.episode-0 div.button {
    background-position : 0 -56px;
}

#menu div.menu.episodes li.episode-1 div.button {
    background-position : 0 -112px;
}
#menu div.menu.episodes li.active.episode-1 div.button {
    background-position : 0 -168px;
}

#menu div.menu.episodes li.episode-2 div.button {
    background-position : 0 -224px;
}
#menu div.menu.episodes li.active.episode-2 div.button {
    background-position : 0 -280px;
}

#menu div.menu.episodes li.episode-3 div.button {
    background-position : 0 -336px;
}
#menu div.menu.episodes li.active.episode-3 div.button {
    background-position : 0 -392px;
}

#menu div.menu.episodes li.episode-4 div.button {
    background-position : 0 -448px;
}
#menu div.menu.episodes li.active.episode-4 div.button {
    background-position : 0 -504px;
}

#menu div.menu.episodes li.episode-5 div.button {
    background-position : 0 -560px;
}
#menu div.menu.episodes li.active.episode-5 div.button {
    background-position : 0 -616px;
}




#menu div.menu.levels li div.button {
    width : 256px;
    margin-bottom : 16px;
    background-image : url(art/menuitems_levels.png);
}

#menu li.level-0 div.button {
    background-position : 0 0;
}
#menu li.active.level-0 div.button {
    background-position : -256px 0;
}

#menu li.level-1 div.button {
    background-position : 0 -32px;
}
#menu li.active.level-1 div.button {
    background-position : -256px -32px;
}

#menu li.level-2 div.button {
    background-position : 0 -64px;
}
#menu li.active.level-2 div.button {
    background-position : -256px -64px;
}

#menu li.level-3 div.button {
    background-position : 0 -96px;
}
#menu li.active.level-3 div.button {
    background-position : -256px -96px;
}

#menu li.level-4 div.button {
    background-position : 0 -128px;
}
#menu li.active.level-4 div.button {
    background-position : -256px -128px;
}

#menu li.level-5 div.button {
    background-position : 0 -160px;
}
#menu li.active.level-5 div.button {
    background-position : -256px -160px;
}

#menu li.level-6 div.button {
    background-position : 0 -192px;
}
#menu li.active.level-6 div.button {
    background-position : -256px -192px;
}

#menu li.level-7 div.button {
    background-position : 0 -224px;
}
#menu li.active.level-7 div.button {
    background-position : -256px -224px;
}

#menu li.level-8 div.button{
    background-position : 0 -256px;
}
#menu li.active.level-8 div.button {
    background-position : -256px -256px;
}

#menu li.level-9 div.button {
    background-position : 0 -288px;
}
#menu li.active.level-9 div.button {
    background-position : -256px -288px;
}

/* menu toggle light */

#menu div.light {
    width : 42px;
    height : 16px;
    margin-left : -48px;
    margin-top : 4px;
    overflow : hidden;
    display : inline-block;
    background-image : url(art/menulsm.png);
    background-color : #222;
    top : 4px;
    position : relative;
    margin-right : 6px;
}

#menu div.light.on {
    background-color : #ff0;
}

/* menu selector gun */
#menu ul.selector li.active::before {
    display : block;
    width : 46px;
    height : 24px;
    position : absolute;
    left : -50px;
    content : "";
    background-image : url(art/menuselector.png);
}

#menu div.menu.sound li.active::before {
    top : 30px;
}

#menu div.menu.control li.active::before,
#menu div.menu.other li.active::before {
    left : -60px;
}

#menu div.menu li:has(.light).active::before {
    left : -100px;
    top : 26px;
}


/* customize keys menu */
#menu div.menu.customize ul.selector li.active::before {
    left : -80px;
}
#menu div.menu.customize li div.button {
    margin-bottom : 28px;
    background : none;
}

#menu div.menu.customize li div.button span {
    position : relative;
    display : inline-block;
    width : 122px;
    height : 28px;
    background-image : url(art/control_keys.png);
    margin-right : -24px;
}


/* skill menu face */

#menu div.menu.skill div.face {
    width : 48px;
    height : 64px;
    left : 460px;
    top : 210px;
    position : absolute;
    background-image : url(art/skillfaces.png);
}

#menu div.menu.skill div.face.gd_baby {
    background-position : 0 0;
}
#menu div.menu.skill div.face.gd_easy {
    background-position : -48px 0;
}
#menu div.menu.skill div.face.gd_medium {
    background-position : -96px 0;
}
#menu div.menu.skill div.face.gd_hard {
    background-position : -144px 0;
}


/* menu confirm box */

#menu .message {
    position : absolute;
    z-index : 1000;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    display : none;
}

#menu .message.confirm-newgame div.box {
    position : absolute;
    width : 460px;
    height : 100px;
    left : 50%;
    top : 50%;
    margin-left : -230px;
    margin-top : -50px;
    overflow : hidden;
    background-image : url(art/confirm_newgame.png);
}

#menu .message.confirm-newgame div.box.blink {
    background-position : 0 100px;
}