@font-face {
    font-family: "PressStart2P";
    src: url("/css/PressStart2P-Regular.ttf") format('woff');
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html, body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 14px; min-height: 100vh; width: 100%; background-color: #000; color: #d4d6db; }
.flex { display: flex; }
.flex-center { justify-content: center; }
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
#game { font-family: 'PressStart2P', sans-serif; position: fixed; inset: 0 0 0 0; text-align: center; }
#game .screen { display: none; position: absolute; inset: 0 0 0 0; padding: 80px; flex-direction: column; justify-content: center; }
#game[data-screen="1"] .screen1,
#game[data-screen="2"] .screen2,
#game[data-screen="3"] .screen3 { display: flex; width: 100%; height: 100%; }
#screen1-clicktoplay { font-size: 42px; }
#screen1-clicktoplay.ready { animation: blink 1s infinite; }
#game .screen2 > div:first-child { font-size: 32px; }
#game .screen2 .characters { display: flex; justify-content: center; align-items: center; margin: 80px 0; }
#screen2-characterPreview { width: 300px; height: 500px; background: no-repeat center / contain; margin-right: 160px; }
#game .screen2 .characters .heads { display: flex; flex-wrap: wrap; }
#game .screen2 .characters .heads .selectCharacter { transition: .2s; margin: 10px; width: 200px; height: 200px; border-radius: 10px; border: 2px solid #242424; background: #242424 no-repeat center / contain;  cursor: pointer; }
#game .screen2 .characters .heads .selectCharacter:hover { background-color: #646464; }
#game .screen2 .characters .heads .selectCharacter:active { transform: scale(.96); }
#screen2-characterPreview[data-character="0"] + .heads .selectCharacter[data-character="0"],
#screen2-characterPreview[data-character="1"] + .heads .selectCharacter[data-character="1"] { border-color: #4d88ff; box-shadow: 0 0 10px 5px #4d88ff; background-color: #242424 !important; }
#startTheGame { margin: 40px auto; font-size: 18px; height: 80px; line-height: 80px; width: 320px; color: #333; background-color: #ff884d; border-radius: 10px; cursor: pointer; transition: .2s; }
#startTheGame:hover { background-color: #ffaa80; }
#startTheGame:active { transform: scale(.96); }
#game[data-screen="3"] .screen3 { background: no-repeat center / cover; }
#player { transform: translateX(-50%); transition: left .05s linear; position: absolute; bottom: 80px; left: 0; width: 100px; height: 166px; background: no-repeat center bottom / contain; }
#enemy { transform: translateX(-50%); position: absolute; top: 0; left: 150%; width: 250px; height: 225px; background: no-repeat center bottom / contain; }
#game .screen .bomb { position: absolute; z-index: 2; top: 0%; transition: top 5s ease-in; width: 100px; height: 100px; background: no-repeat center bottom / contain; }
#game .screen .bomb.fall { top: 100%; }