body{background-color:#1a1a1a;color:#f0f0f0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}h1{color:#4caf50}canvas{background-color:#000;border:2px solid #333;border-radius:8px}#restartButton{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;font-size:20px;cursor:pointer;border:2px solid #4CAF50;background-color:#000000b3;color:#4caf50;border-radius:5px;transition:all .3s ease}#restartButton:hover{background-color:#4caf50;color:#fff}#ranking{width:800px;margin-top:20px;margin-bottom:20px;background-color:#222;border:2px solid #333;border-radius:8px;padding:10px 20px 20px;box-sizing:border-box}#ranking h2{color:#4caf50;text-align:center;border-bottom:2px solid #333;padding-bottom:10px;margin-top:10px}#ranking-list{list-style:none;padding:0;margin:0}#ranking-list li{display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #333;font-size:18px;counter-increment:ranking-counter}#ranking-list li:before{content:counter(ranking-counter) ".";font-weight:700;color:#4caf50;min-width:30px}#ranking-list li:last-child{border-bottom:none}#ranking-list li .name{flex-grow:1;padding-left:15px;text-align:left}#ranking-list li .score{font-weight:700;color:#f0f0f0}#ranking-list li:nth-child(1):before{color:gold}#ranking-list li:nth-child(2):before{color:silver}#ranking-list li:nth-child(3):before{color:#cd7f32}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#2a2a2a;padding:30px;border-radius:8px;border:2px solid #444;text-align:center;width:90%;max-width:400px;box-shadow:0 5px 15px #00000080}.modal-content h2{color:#4caf50;margin-top:0}.modal-content p{margin-bottom:20px}.modal-content input{width:100%;padding:10px;box-sizing:border-box;border-radius:4px;border:1px solid #555;background-color:#333;color:#f0f0f0;font-size:16px;margin-bottom:10px}.modal-content button{width:100%;padding:12px;font-size:18px;cursor:pointer;border:none;background-color:#4caf50;color:#fff;border-radius:5px;transition:background-color .3s ease}.modal-content button:hover{background-color:#45a049}.error-message{color:#ff6b6b;min-height:20px;margin-bottom:10px;font-size:14px}.modal-buttons{display:flex;gap:10px}.button-secondary{background-color:transparent;border:1px solid #888}.button-secondary:hover{background-color:#444}