@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";html,body{margin:0;padding:0}:root{font-family:"Press Start 2P",monospace;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100svh;text-align:center;--precentage: 70%;--shadow-bt-color: #e9e4d9}.App{height:100svh;display:flex;justify-content:center;align-items:center;position:relative}h1{font-size:3.2em;line-height:1.1}button{font-family:"Press Start 2P",monospace;text-transform:uppercase;padding:10px 16px;margin:1em;font-size:1rem;color:#fff;border:0 solid;box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color);cursor:pointer}button:hover{transform:translate(-2px,-2px);box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color)}button:active{transform:translate(2px,2px);box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color)}.canvas,.ui-panel{position:absolute}.canvas{height:100svh;width:100svw;display:grid;z-index:1}.ui-panel{z-index:2}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;margin:10px 10px 20px}.gamescreen{position:fixed;bottom:2%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;opacity:.9;width:90%;z-index:100;margin-top:10px;margin-bottom:10px;padding:10px;background-color:#585353;box-shadow:10px 0 0 var(--shadow-bt-color),-10px 0 0 var(--shadow-bt-color),0 10px 0 var(--shadow-bt-color),0 -10px 0 var(--shadow-bt-color)}#title{font-size:2.5rem;margin-top:0;margin-bottom:2px}#subtitle{font-size:1.1rem;margin-top:0}#time-bar-button-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;width:100%}#time-bar-container{position:relative;flex-shrink:1;width:100%;height:4vh;background-color:#333;border-radius:0;margin:10px;box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color)}#time-bar-fill{height:100%;width:var(--precentage, 70%);background-color:#4caf50;transition:width .1s linear;border-radius:inherit}#time-bar-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700}#end-game-button{flex-shrink:0;padding:10px 20px;font-size:1rem;margin:10px;cursor:pointer;color:#e73232;background-color:#474444}#counter-label{font-size:1.5rem;margin-top:20px;margin-bottom:0}#start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#333030;opacity:.9;box-shadow:10px 0 0 var(--shadow-bt-color),-10px 0 0 var(--shadow-bt-color),0 10px 0 var(--shadow-bt-color),0 -10px 0 var(--shadow-bt-color)}#start-title{font-size:2.5rem;margin:4px}#start-subtitle{font-size:1.1rem;margin-bottom:4px}a{font-family:"Press Start 2P",monospace;text-transform:uppercase;padding:10px 16px;margin:1.3em .7em;font-size:1rem;border:0 solid transparent;background-color:#3f3c3c;box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color);cursor:pointer;text-decoration:none}a:hover{transform:translate(-2px,-2px);box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color)}a:active{transform:translate(2px,2px);box-shadow:4px 0 0 var(--shadow-bt-color),-4px 0 0 var(--shadow-bt-color),0 4px 0 var(--shadow-bt-color),0 -4px 0 var(--shadow-bt-color)}#tiny-button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;margin:5px 5px 3px}.tiny-button{font-size:.8rem}#endscreen{display:flex;flex-direction:column;align-items:center;width:100%;height:auto;z-index:1000;background-color:#333030;opacity:.9;box-shadow:10px 0 0 var(--shadow-bt-color),-10px 0 0 var(--shadow-bt-color),0 10px 0 var(--shadow-bt-color),0 -10px 0 var(--shadow-bt-color)}.error{color:#f04242}#upgrade-board{display:flex;flex-direction:column;align-items:center;width:90%;height:auto;z-index:1000;background-color:#333030;opacity:.9;box-shadow:10px 0 0 var(--shadow-bt-color),-10px 0 0 var(--shadow-bt-color),0 10px 0 var(--shadow-bt-color),0 -10px 0 var(--shadow-bt-color)}#stats-board{box-shadow:6px 0 0 var(--shadow-bt-color),-6px 0 0 var(--shadow-bt-color),0 6px 0 var(--shadow-bt-color),0 -6px 0 var(--shadow-bt-color);padding:10px;margin:20px}#stats-cell{display:flex;box-shadow:5px 0 0 var(--shadow-bt-color),-5px 0 0 var(--shadow-bt-color),0 5px 0 var(--shadow-bt-color),0 -5px 0 var(--shadow-bt-color);margin:20px;padding:5px;align-items:center;justify-content:center;gap:20px}button{padding:10px;margin:10px;font-size:1rem}button:disabled{background-color:#443c3c;color:#a7da94}p{padding:10px;margin:5px}#creditscreen{display:flex;flex-direction:column;align-items:center;width:130vh;height:auto;z-index:1000;background-color:#333030;opacity:.9;box-shadow:10px 0 0 var(--shadow-bt-color),-10px 0 0 var(--shadow-bt-color),0 10px 0 var(--shadow-bt-color),0 -10px 0 var(--shadow-bt-color)}h1{padding:10px;margin-bottom:5px}p{font-size:20px}