.nickname-container{background:#fff;padding:15px;border:1px solid #ddd;margin:20px auto;width:auto;display:flex;gap:20px;box-shadow:0px 0px 0px rgba(0,0,0,.1);border-radius:8px;justify-content:center}.nickname-settings,.nickname-output-box{text-align:center}.nickname-settings{flex:1;max-width:300px}.nickname-output-box{flex:2}.nickname-button{background:#0073aa;font-weight:700;font-size:16px;color:#fff;border:none;padding:10px 20px;cursor:pointer;border-radius:3px;transition:background .3s ease;margin-top:15px;width:100%}.nickname-button:hover{background:#005177}.nickname-button:active{transform:scale(.95)}.nickname-settings label,.nickname-settings select,.nickname-settings input [type=range]{margin-bottom:5px;padding:5px;font-size:14px;width:100%}#nickname-list .nickname-box{border:1px solid #ddd;border-radius:8px;padding:10px;margin:10px 0;background:#f9f9f9;font-size:24px;font-weight:700;text-align:center;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}@media screen and (max-width:600px){.nickname-container{flex-direction:column;padding:10px}.nickname-settings,.nickname-output-box{width:100%}.nickname-button{font-size:16px;padding:12px}#nickname-list .nickname-box{font-size:18px}}#nickname-list:empty:before{content:"? ? ?";font-size:40px;font-weight:700;color:#000;display:block;text-align:center;#padding:20px}@media screen and (max-width:600px){.nickname-container{flex-direction:column;align-items:center;text-align:center;padding:10px}.nickname-settings,.nickname-output-box{width:100%;max-width:100%;text-align:center}.nickname-settings label{text-align:center;margin-top:0;margin-bottom:0}.nickname-settings select,.nickname-settings input,.nickname-button{width:90%;margin-left:auto;margin-right:auto}#nickname-list .nickname-box{font-size:18px;margin-left:auto;margin-right:auto}}