#auth-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#2c3e50;display:flex;justify-content:center;align-items:center;z-index:9999}.auth-container{background:#34495e;border:1px solid #555;padding:40px;width:400px}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{color:#ecf0f1;font-size:28px;margin:0 0 10px}.auth-header p{color:#bdc3c7;font-size:14px;margin:0}.auth-tabs{display:flex;gap:10px;margin-bottom:30px}.auth-tab{flex:1;padding:12px;background:#2c3e50;border:1px solid #555;color:#bdc3c7;cursor:pointer;font-size:14px;text-align:center}.auth-tab:hover{background:#3d5266}.auth-tab.active{background:#7f8c8d;color:#fff;border-color:#95a5a6}.auth-form{display:none}.auth-form.active{display:block}.form-group label{display:block;color:#ecf0f1;font-size:13px;margin-bottom:8px}.form-group input{width:100%;padding:10px;background:#2c3e50;border:1px solid #555;color:#ecf0f1;font-size:14px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#7f8c8d;background:#34495e}.form-group input::placeholder{color:#7f8c8d}.auth-button{width:100%;padding:12px;background:#7f8c8d;border:1px solid #555;color:#fff;font-size:14px;cursor:pointer;margin-top:10px}.auth-button:hover{background:#95a5a6}.auth-button:active{background:#6c7a7b}.auth-error{background:#e74c3c;border:1px solid #c0392b;color:#fff;padding:10px;margin-bottom:20px;font-size:13px;display:none;text-align:center}.auth-error.show{display:block}.auth-success{background:#2ecc71;border:1px solid #27ae60;color:#fff;padding:10px;margin-bottom:20px;font-size:13px;display:none;text-align:center}.auth-success.show{display:block}#character-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#2c3e50;display:flex;align-items:center;justify-content:center;z-index:1000}.character-container{background:#34495e;border:1px solid #555;padding:40px;max-width:900px;width:90%}.character-header{text-align:center;margin-bottom:30px}.character-header h1{font-size:28px;color:#ecf0f1;margin-bottom:5px}.character-header p{color:#bdc3c7;font-size:14px}.character-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin-bottom:30px}.character-slot{background:#2c3e50;border:1px solid #555;padding:20px;cursor:pointer;text-align:center}.character-slot:hover{background:#3d5266;border-color:#7f8c8d}.character-slot.empty{border-style:dashed;opacity:.7}.character-slot.empty:hover{opacity:1}.character-class-icon{font-size:48px;margin-bottom:10px}.character-slot h3{color:#ecf0f1;font-size:18px;margin-bottom:8px}.character-slot p{color:#bdc3c7;font-size:13px;margin:3px 0}.character-slot .class{color:#ecf0f1;font-weight:700;text-transform:capitalize}.character-creation{background:#2c3e50;border:1px solid #555;padding:30px;max-width:500px;margin:0 auto}.character-creation h2{color:#ecf0f1;margin-bottom:20px;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;color:#ecf0f1;margin-bottom:8px;font-size:14px}.form-group input{width:100%;padding:10px;background:#34495e;border:1px solid #555;color:#ecf0f1;font-size:14px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#7f8c8d;background:#3d5266}.class-selection{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.class-option{background:#34495e;border:1px solid #555;padding:15px;cursor:pointer;text-align:center}.class-option:hover{background:#3d5266;border-color:#7f8c8d}.class-option.selected{border-color:#ecf0f1;background:#3d5266}.class-option .icon{font-size:32px;margin-bottom:8px}.class-option .name{color:#ecf0f1;font-size:14px;font-weight:700;margin-bottom:5px}.class-option .description{color:#bdc3c7;font-size:11px}.character-buttons{display:flex;gap:10px;margin-top:20px}.btn{flex:1;padding:12px 20px;border:1px solid #555;background:#2c3e50;color:#ecf0f1;font-size:14px;cursor:pointer;text-align:center}.btn:hover{background:#3d5266}.btn.primary{background:#7f8c8d;border-color:#95a5a6}.btn.primary:hover{background:#95a5a6}.btn.secondary{border-color:#555}.btn.secondary:hover{background:#3d5266;border-color:#7f8c8d}.character-message{padding:10px;margin-bottom:20px;font-size:14px;text-align:center;display:none}.character-message.show{display:block}.character-message.error{background:#e74c3c;border:1px solid #c0392b;color:#fff}.character-message.success{background:#2ecc71;border:1px solid #27ae60;color:#fff}@media (max-width: 768px){.character-container{padding:20px}.character-list{grid-template-columns:repeat(2,1fr)}.class-selection{grid-template-columns:1fr}}