html,body{background:#121212;margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:Arial,sans-serif;font-size:16px;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;justify-content:center;align-items:center}#mainContent{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}#mainCanvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}#loadingText{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:24px;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:10;transition:opacity .5s ease}.level-indicator{position:absolute;top:1rem;left:1rem;font-size:14px;color:#fff;background-color:#121212b3;padding:.5rem;border-radius:4px;z-index:15;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.score-display{position:absolute;top:1rem;right:1rem;background-color:#121212b3;padding:.5rem;border-radius:4px;z-index:15}.score-display .score-item{display:inline-block;margin-left:1rem;font-size:14px;color:#fff}.score-display .score-item:first-child{margin-left:0}@media (hover: hover) and (pointer: fine){.desktop-hide{display:none!important}}#virtualArrows{position:absolute;right:1rem;bottom:2rem;background:#0006;padding:.5rem;border-radius:12px;box-shadow:0 2px 10px #ffffff26;touch-action:none;-webkit-user-select:none;user-select:none;z-index:20;transition:transform .2s ease,opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px solid rgba(101,67,33,.6);max-width:180px}@media (hover: hover) and (pointer: fine){#virtualArrows{display:none!important}}#virtualArrows .drag-handle{text-align:center;padding:2px 0;margin-bottom:4px;cursor:move;font-size:16px;color:gold;text-shadow:0 1px 2px rgba(0,0,0,.8)}#virtualArrows .controls-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}#virtualArrows .middle-row{display:flex;justify-content:center;gap:.5rem;width:100%}#virtualArrows .arrow-btn{width:50px;height:50px;margin:0;display:flex;justify-content:center;align-items:center;background-color:#8b4513;background-image:linear-gradient(to bottom,#ffffff1a,#0000001a);color:#faf0dc;border:2px solid #3a2214;border-radius:12px;font-size:24px;cursor:pointer;position:relative;transition:all .15s ease-in-out;padding:0}#virtualArrows .arrow-btn:active,#virtualArrows .arrow-btn.active{transform:scale(.9);background-color:#9b5523;border-color:gold;box-shadow:0 0 8px gold}#virtualArrows .arrow-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000080}#virtualArrows .arrow-btn .arrow-icon{display:block;font-weight:700;position:relative;text-shadow:1px 1px 2px rgba(0,0,0,.7)}#virtualArrows .arrow-btn.up-btn .arrow-icon{transform:translateY(-2px)}#virtualArrows .arrow-btn.down-btn .arrow-icon{transform:translateY(2px)}#virtualArrows .arrow-btn.left-btn .arrow-icon{transform:translate(-2px)}#virtualArrows .arrow-btn.right-btn .arrow-icon{transform:translate(2px)}#virtualArrows .arrow-btn:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGcklEQVRogd2Ze4xU1R3HP+fce2d2Z3ZmdnbZXRaWxyLLAgsIVUAeFVRqrY1UreKjNWpjTBOT2qRNm5jGpIlp0z+M/tOm2j+axBcaU2ubGKU0AcQICCzyWHkJu7DPnZmdx713zun5Y2bWYXcG2GVJ25NM7r3nnnPu+X7P93ce91zhvXcjkS2rq8pdAVQAZcAicD4oXdBKad0HSnUL2n6p+g4K0XeyuVhkYnw0pS0hjTTGTWVZdiKRsMbFma5GVgghPS0NAduDOIrgX0ACuKOWthzjOG5ip4wcSovQB47tpHKpxGRR1BxJJ9OReCRRGo0lymMl0VhJSbQkURqLlcRjprCafb9CiEBrmbdcN5/P5/Op/tNnzqT6T59O9acO95/qP3WwNzlwsr83eainJ2mFQ9OCaaHoW0D8VhakadVWY5mPbf/xJV9UBct20tlsdvhPn7z19yK4xWRz2WxmMJ0ZHEz3DAx0Hzvd3dfb03usNxk/cirR0ZP0fQ0DGWAI0EPim7qgw+9fdcGeRCLRC4wfrBSl0fg7mqlGULn2pw+QvG8W5tgjv8xeuuc75TXL1t+2aOXytcuuvq5+XmNjrLy83MTj8ZF2y7KwLGukPB6Po5QayT548CDd3d0opVBKYZrmSP6FF15gYGAA27YH0umB0z09XX39vb3HDu9/Y9eO5175675jyf7+U6Sf/s9nkB8BdwJGUwPXArUlJSVvao36H8Jcssywr3pHvat5GVJolEcV23pPsjfVzerlK9ZvvPPOzZvuvvtLVVVVAJw5c4Zdu3axceNGHnroIXbv3k1HRwdbtmzh+eefp7W1lWw2S01NDY899hh79+7l8OHDRCIRUqkUe/bsoauri5dffpm2tjba29tpbW3lxIkT9Pf309zczGeffcauXbtQSnHDDTdACOIO1WUV9TNrquaPr6mpb/nRxvvbWrc+8cRAf//uaDSaB14D7r5o4tbWp7WOXK9UuE55YanvqHAICHpUEFJGG2W+xMpmSw8eOlS5ePHijtbW1ur169d/SgghJmMsy7J49dVXaWlpYd26dcRiMRobG9m0aRNSSnzf54knnmDZsmUsWbKE+vr6i+p4nocQAikl0WiUTCZDNpvFsqzRVW0AKmvnzO+89rqbv+oqb8+OHc88q0P+KWAvsPWixhYsf0jp0GMhKavCICwlQh4JIFSIRhkuVVqDDNMXFr6QQDhE1YJG1qxZF7py+bWHo/HYqffee+8BoJcJmu/o6KC9vZ1Dhw7xzjvvMGfOHKLRKAsWLKCrq4uXXnqJpUuX0tTUdNE9IoLBYOS6bDZLNBolEolQW1tLbW0tpaWlRCIRotEoAIlEAuBureMaeKWtrYVkMvkI8PkYgSsvX6NV+OsqFFoWsiKADIeeEBLTMAgplEQThijUwgWFOkCCgEhpKUvXrBvZB5578smvCxh5GjHexPz581m5ciX79+9n586drFq1iubmZjZs2MDLL7/Mtm3buP7668dxETQ1NVFXV8cHH3xAc3MzK1euxDRNysrKsCyL6upq2tvb2b59O/F4nLq6OpYvX85dd93FwMAAP3nsMUIi9Bcz4JjneXfbtn2fl8/PURZJgcQQEoEAIYiFAizTwDYNQqEQQmvkBfLTQRuCvONy7mwnuYIoKYlYtsvJfDabvf2tt95qA45dxAzgnnvuYcuWLbS3t7Nt2zYmQ319Pa+//jpt...);background-size:100% 100%;opacity:.2;border-radius:10px;pointer-events:none}.game-menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#121212e6;padding:2rem;border-radius:1rem;z-index:30;min-width:300px;box-shadow:0 0 20px #00000080}.game-menu h2{color:#fa0;margin-top:0}.game-menu p{margin:1rem 0}.game-menu .button-group{margin-top:2rem;display:flex;justify-content:center;gap:1rem}button{width:3.5rem;margin:.2rem;aspect-ratio:4/3;background:#ffffffb3;color:#333;padding:.5rem 1rem;border-radius:8px;border:1px solid rgba(216.75,216.75,216.75,.7);cursor:pointer;transition:all .2s ease;font-size:1.2rem;font-weight:700;box-shadow:0 2px 4px #00000080}button:hover{background:#ffffffb3}button:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0000004d}button:focus{outline:none;box-shadow:0 0 0 3px #ffaa0080}button:active{background:#ffffffe6;box-shadow:inset 0 2px 4px #00000080;transform:translateY(2px)}.btn-primary{background:#fa0;color:#fff;padding:.5rem 1rem;border-radius:8px;border:1px solid rgb(178.5,119,0);cursor:pointer;transition:all .2s ease;font-weight:700;padding:.5rem 2rem}.btn-primary:hover{background:#ffb31a}.btn-primary:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0000004d}.btn-primary:focus{outline:none;box-shadow:0 0 0 3px #ffaa0080}.btn-secondary{background:#fff3;color:#fff;padding:.5rem 1rem;border-radius:8px;border:1px solid rgba(216.75,216.75,216.75,.2);cursor:pointer;transition:all .2s ease;padding:.5rem 2rem}.btn-secondary:hover{background:#fff3}.btn-secondary:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0000004d}.btn-secondary:focus{outline:none;box-shadow:0 0 0 3px #ffaa0080}.win-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#121212e6;color:#fa0;padding:2rem;border-radius:1rem;text-align:center;z-index:30;box-shadow:0 0 20px #000000b3}.win-message h2{font-size:36px;margin-bottom:1rem}.win-message .stats{margin:2rem 0}.win-message .stats .stat-item{margin:.5rem 0}.language-selector{position:absolute;top:1rem;right:1rem;z-index:100;padding:.5rem;border-radius:4px;background-color:#121212b3}.language-selector select{background-color:#323232cc;color:#fff;border:1px solid rgb(59.5,59.5,59.5);border-radius:4px;padding:4px 20px 4px 8px;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 2px center;background-size:16px}.language-selector select:hover{background-color:#3c3c3ce6}.language-selector select:focus{outline:none;box-shadow:0 0 0 2px #ffaa0080}.language-selector select option{background-color:#333;color:#fff}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.pulse{animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-height: 700px){#mainCanvas{height:100vh;width:auto}}@media (max-width: 600px){#virtualArrows{right:.5rem;bottom:1rem;padding:.8rem}button{width:3rem;margin:.1rem;font-size:1rem}.game-menu{width:80%;min-width:auto;padding:1rem}.win-message{width:80%;padding:1rem}}@media (min-width: 601px) and (max-width: 900px){.game-menu,.win-message{width:60%}}
