:root{--color-primary: #01a7a8}body,html{margin:0;padding:0;overflow:hidden;font-family:"Press Start 2P",cursive;image-rendering:pixelated}#app{width:100vw;height:100vh;background-color:#000}.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-container{position:relative;background-color:var(--color-primary);color:#000;padding:5px;border-radius:0;text-align:center;max-width:400px;font-size:12px;line-height:1.5}.modal-content{border:2px solid white;padding:10px}.modal-content h2{margin-top:0;color:#ff0;text-transform:uppercase;font-size:16px;text-shadow:2px 2px 0 black;margin-bottom:20px}.close-button{position:absolute;top:-25px;right:-25px;border:none;background-color:transparent;color:#fff;font-size:20px;cursor:pointer;border-radius:0;font-family:"Press Start 2P",cursive}.form-group{margin-bottom:15px;text-align:left}.form-group label{display:block;margin-bottom:5px}.form-group input{width:100%;padding:12px;border-radius:0;border:none;background-color:#fff;color:#000;box-sizing:border-box;font-family:"Press Start 2P",cursive;font-size:16px;min-height:44px}.required-field{color:red;font-size:10px;text-transform:uppercase}.button-group{display:flex;justify-content:space-between;margin-top:20px;gap:10px;flex-wrap:wrap}.action-button{color:#000;padding:12px 20px;border:none;border-radius:0;cursor:pointer;font-family:"Press Start 2P",cursive;text-align:center;font-size:12px;flex:1;text-transform:uppercase;image-rendering:pixelated;box-shadow:4px 4px #000;position:relative;transition:all .1s;will-change:transform;transform:translateZ(0);min-height:44px;min-width:80px}.action-button:hover:not(.disabled){background-color:#ff0;transform:translate3d(2px,2px,0);box-shadow:2px 2px #000}.action-button.disabled{opacity:.5;cursor:not-allowed;background-color:#666}.work-cooldown{margin-top:5px;font-size:12px;color:#000}#statusMessage{margin-top:15px;padding:10px;border-radius:0;border:3px solid white;font-size:10px;line-height:1.5}.error-message{background-color:#fff;color:red;border-color:red}.success-message{background-color:#fff;color:#0f0;border-color:#0f0}.color-selection{display:flex;justify-content:space-around;margin-bottom:15px}.color-option{width:50px;height:50px;border-radius:0;cursor:pointer;border:2px solid white;transition:transform .1s;image-rendering:pixelated}.color-option:hover{transform:scale(1.05)}.color-option.selected{border-color:#ff0}.color-option.red{background-color:#ff4d4d}.color-option.green{background-color:#4caf50}.color-option.blue{background-color:#4d79ff}.input-hint{display:block;font-size:8px;color:#fff;margin-top:5px;text-transform:uppercase;letter-spacing:1px}.dot-info{display:flex;align-items:start;margin:20px 0;text-align:left}.dot-preview{margin-right:20px}.dot-preview div{width:50px;height:50px;margin:0 auto}.creation-preview{width:50px;height:50px;border-radius:50%;margin:0 10px 0 auto}#dotColorPreview{width:50px;height:50px;border:2px solid white;image-rendering:pixelated}.creation-preview{margin-right:20px}#creationColorPreview{width:50px;height:50px;border:2px solid white;border-radius:50%;image-rendering:pixelated}.dot-details{flex:1}.dot-details p{margin:5px 0;font-size:10px}.dot-details strong{color:#fff}#regStatusMessage,#successStatusMessage{margin-top:15px;padding:10px;border-radius:0;border:3px solid white;font-size:10px;line-height:1.5}.overlay-button{position:fixed;background-color:transparent;color:#fff;border:none;padding:10px;width:fit-content;height:fit-content;border-radius:0;cursor:pointer;font-family:"Press Start 2P",cursive;font-size:12px;text-transform:uppercase;z-index:900}.overlay-button:hover{color:#ff0}#logoutButton{top:20px;right:20px}#createButton{bottom:20px;left:20px}#createButton.active{color:#ff0}#createButton.disabled{opacity:.6;cursor:not-allowed}#createButton.disabled:hover{color:#fff}#helpButton{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background-color:#000;color:#fff;border:none;border-radius:0;cursor:pointer;font-family:"Press Start 2P",cursive;font-size:20px;text-align:center;line-height:34px;z-index:900}#helpButton:hover{color:#ff0}.zoom-controls{position:fixed;top:20px;left:20px;display:flex;flex-direction:column;gap:10px;z-index:900}.go-to-dot-button{top:20px;left:80px;font-size:10px;background-color:#000000b3;border:none;padding:8px 12px}.go-to-dot-button:hover{background-color:#01a7a833}.zoom-button{width:40px;height:40px;background-color:transparent;color:#fff;border:none;border-radius:0;cursor:pointer;font-family:"Press Start 2P",cursive;font-size:20px;text-align:center;line-height:34px}.zoom-button:hover{color:#ff0}@media (max-width: 480px){.modal{padding:10px;align-items:center}.modal-container{width:calc(100% - 20px);max-width:100%;font-size:14px;max-height:90vh;overflow-y:auto}.modal-content{padding:15px}.modal-content h2{font-size:14px;margin-bottom:15px}.form-group input{font-size:16px;padding:15px;min-height:50px}.action-button{font-size:11px;padding:15px 12px;min-height:50px;min-width:100px}.button-group{gap:8px;flex-direction:column}.color-option{width:60px;height:60px}.close-button{top:5px;right:5px;font-size:16px;background-color:#00000080;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:0}.overlay-button{font-size:10px;padding:8px}#logoutButton{top:10px;right:10px}#createButton{bottom:10px;left:10px}#helpButton{bottom:10px;right:10px;width:35px;height:35px;font-size:16px;line-height:30px}.zoom-controls{top:10px;left:10px;gap:5px}.zoom-button{width:35px;height:35px;font-size:16px;line-height:30px}.go-to-dot-button{top:10px;left:60px;font-size:10px;padding:10px 12px;min-height:35px}}@media (max-width: 320px){.modal{padding:5px}.modal-container{width:calc(100% - 10px);font-size:12px}.modal-content h2{font-size:12px}.action-button{font-size:10px;padding:12px 8px;min-width:80px}.form-group input{font-size:14px;padding:12px}}